From a8c9f816e763f1e507b9451cab01f7fba4424516 Mon Sep 17 00:00:00 2001 From: brian teeman Date: Fri, 15 Jan 2021 12:38:36 +0000 Subject: [PATCH] [4.0] skipto accessibility plugin major upgrade v4.0 SkipTo is a replacement for your old classic "Skipnav" link, (so please use it as such)! The SkipTo script creates a drop-down menu consisting of the links to important landmarks and headings on a given web page. The menu makes it easier for keyboard and screen reader users to quickly jump to the desired location by simply choosing it from the list of options. Benefits - All users can get an outline of the content on the page. - Screen reader users can get a higher level navigation menu without having to use the screen reader landmark and header navigation commands which typically include longer lists of lower level headings and less used landmarks. - Keyboard only users can more efficiently navigate to content on a page. - Speech recognition users can use the menu to more efficiently navigate to content on a page. How it works - The SkipTo menu button is the first tabbable element on the page, and it is configured not to be visible when the page is loaded, the menu button becomes visible when it receives focus. - Once the keyboard focus is on the menu button, pressing the ENTER or the SPACEBAR key will pull down the list of important landmarks and headings on the page. - If you decide to reach the menu again, simply press the built-in access key alt+9 This plugin is enabled by default for the admin and can optionally be enabled for the frontend This version addresses previous concerns about an additional dropdown menu js. This version addresses previous concerns that the landmarks were not translatable. To facilitate upgrades from previous beta releases I have added the list of removed files. Thanks to the help of the people at https://github.com/paypal/skipto for adding some joomla specific changes --- administrator/components/com_admin/script.php | 4 ++ .../language/en-GB/plg_system_skipto.ini | 24 +++++-- build/build-modules-js/settings.json | 23 ++----- package-lock.json | 6 +- package.json | 2 +- plugins/system/skipto/skipto.php | 66 ++++++++++++------- plugins/system/skipto/skipto.xml | 8 +-- 7 files changed, 79 insertions(+), 54 deletions(-) diff --git a/administrator/components/com_admin/script.php b/administrator/components/com_admin/script.php index 64d21d2e43766..af08d43dd7b4f 100644 --- a/administrator/components/com_admin/script.php +++ b/administrator/components/com_admin/script.php @@ -6226,6 +6226,10 @@ public function deleteUnexistingFiles($dryRun = false, $suppressOutput = false) '/libraries/vendor/joomla/controller', // Joomla 4.0 Beta 5 '/plugins/content/imagelazyload', + // Joomla 4.0 Beta 6 + '/media/vendor/skipto/js/skipTo.js', + '/media/vendor/skipto/js/dropMenu.js', + '/media/vendor/skipto/css/SkipTo.css' ); $status['files_checked'] = $files; diff --git a/administrator/language/en-GB/plg_system_skipto.ini b/administrator/language/en-GB/plg_system_skipto.ini index f6dd8bc41a162..fed6455a1fecb 100644 --- a/administrator/language/en-GB/plg_system_skipto.ini +++ b/administrator/language/en-GB/plg_system_skipto.ini @@ -4,13 +4,29 @@ ; Note : All ini files need to be saved as UTF-8 PLG_SYSTEM_SKIPTO="System - Skip-To Navigation" -PLG_SYSTEM_SKIPTO_CONTENT="Content" -PLG_SYSTEM_SKIPTO_PAGE_OUTLINE="Page Outline" +PLG_SYSTEM_SKIPTO_ACCESS_KEY_NOT_SUPPORTED="The use of Access keys is not supported on this browser." +PLG_SYSTEM_SKIPTO_HEADING="Page Outline" +PLG_SYSTEM_SKIPTO_HEADING_LEVEL="Heading level" +; next line begins with a space. $m is count, %n is total +PLG_SYSTEM_SKIPTO_HEADING_MOFN=" ($m of $n)" +PLG_SYSTEM_SKIPTO_HEADING_NONE="No headings to skip to" +PLG_SYSTEM_SKIPTO_LANDMARK_ASIDE="Aside" +PLG_SYSTEM_SKIPTO_LANDMARK_FOOTER="Footer" +PLG_SYSTEM_SKIPTO_LANDMARK_FORM="Form" +PLG_SYSTEM_SKIPTO_LANDMARK_HEADER="Header" +PLG_SYSTEM_SKIPTO_LANDMARK="Landmarks" +PLG_SYSTEM_SKIPTO_LANDMARK_MAIN="Main" +PLG_SYSTEM_SKIPTO_LANDMARK_NAV="Navigation" +PLG_SYSTEM_SKIPTO_LANDMARK_NONE="No landmarks to skip to" +PLG_SYSTEM_SKIPTO_LANDMARK_REGION="Region" +PLG_SYSTEM_SKIPTO_LANDMARK_SEARCH="Search" +PLG_SYSTEM_SKIPTO_MENU="Landmarks and Page Outline" PLG_SYSTEM_SKIPTO_SECTION="Site Section" PLG_SYSTEM_SKIPTO_SECTION_ADMIN="Administrator (Backend)" PLG_SYSTEM_SKIPTO_SECTION_BOTH="Both" PLG_SYSTEM_SKIPTO_SECTION_SITE="Site (Frontend)" PLG_SYSTEM_SKIPTO_SKIP_TO="Skip To" -PLG_SYSTEM_SKIPTO_SKIP_TO_AND_PAGE_OUTLINE="Skip To and Page Outline" -PLG_SYSTEM_SKIPTO_SKIP_TO_KEYBOARD="Skip To Keyboard Navigation" +PLG_SYSTEM_SKIPTO_TITLE="Keyboard Navigation" +; do not translate $key +PLG_SYSTEM_SKIPTO_TITLE_WITH_ACCCESS_KEY="Keyboard Navigation - Access key is $key" PLG_SYSTEM_SKIPTO_XML_DESCRIPTION="The plugin creates a dropdown menu consisting of the links to the important places on a given web page. This makes it easier for keyboard and screen reader users to quickly jump to the desired location by choosing it from the list of options." diff --git a/build/build-modules-js/settings.json b/build/build-modules-js/settings.json index 276c31954dd8f..c12c0e4de3d16 100644 --- a/build/build-modules-js/settings.json +++ b/build/build-modules-js/settings.json @@ -548,30 +548,15 @@ "name": "skipto", "licenseFilename": "LICENSE.md", "js": { - "src/js/skipTo.js": "js/skipTo.js", - "src/js/dropMenu.js": "js/dropMenu.js" - }, - "css": { - "src/css/SkipTo.css": "css/SkipTo.css" + "compiled/js/skipto.js": "js/skipto.js", + "compiled/js/skipto.min.js": "js/skipto.min.js", + "compiled/js/skipto.min.js.map": "js/skipto.min.js.map" }, "provideAssets": [ - { - "name": "skipto", - "type": "style", - "uri": "SkipTo.css" - }, - { - "name": "skipto.dropmenu", - "type": "script", - "uri": "dropMenu.js", - "attributes": { - "defer": true - } - }, { "name": "skipto", "type": "script", - "uri": "skipTo.js", + "uri": "skipto.min.js", "attributes": { "defer": true } diff --git a/package-lock.json b/package-lock.json index c8b5fb64346cf..2bc4ee5cf5ced 100644 --- a/package-lock.json +++ b/package-lock.json @@ -10446,9 +10446,9 @@ } }, "skipto": { - "version": "2.1.1", - "resolved": "https://registry.npmjs.org/skipto/-/skipto-2.1.1.tgz", - "integrity": "sha512-fK4iFyQl3icXU9I7L5A26tU/8dVkCni4Df72L6C0kvzjYwP5nGXqq/3S/TuZM6vBqCtwqKQJabWn0R67oW2fww==" + "version": "4.0.1", + "resolved": "https://registry.npmjs.org/skipto/-/skipto-4.0.1.tgz", + "integrity": "sha512-Pq5pO62ku5Xt7d1dvygb5pkNgkrG9jKvmkn8oUUKiunQv5tvgnzCw3mcn/H4nCVSFw9QQMYef3IF3mMIeVB0Gg==" }, "slash": { "version": "3.0.0", diff --git a/package.json b/package.json index 0433715a5ca0f..0e88e1873e804 100644 --- a/package.json +++ b/package.json @@ -54,7 +54,7 @@ "qrcode-generator": "^1.4.4", "roboto-fontface": "^0.10.0", "short-and-sweet": "^1.0.2", - "skipto": "^2.1.1", + "skipto": "^4.0.0", "tinymce": "^5.6.1", "vue": "^2.6.12", "vue-focus-lock": "^1.3.2", diff --git a/plugins/system/skipto/skipto.php b/plugins/system/skipto/skipto.php index 160aeead8ad0d..16500800a2e59 100644 --- a/plugins/system/skipto/skipto.php +++ b/plugins/system/skipto/skipto.php @@ -3,7 +3,7 @@ * @package Joomla.Plugin * @subpackage System.skipto * - * @copyright (C) 2019 Open Source Matters, Inc. + * @copyright (C) 2020 Open Source Matters, Inc. * @license GNU General Public License version 2 or later; see LICENSE.txt */ @@ -29,7 +29,7 @@ class PlgSystemSkipto extends CMSPlugin protected $app; /** - * Add the CSS and JavaScript for the skipto navigation menu. + * Add the skipto navigation menu. * * @return void * @@ -52,24 +52,54 @@ public function onAfterDispatch() return; } + // Are we in a modal? + if ($this->app->input->get('tmpl', '', 'cmd') === 'component') + { + return; + } + // Load language file. $this->loadLanguage(); - // Add strings for translations in JavaScript. + // Add plugin settings and strings for translations in JavaScript. $document->addScriptOptions( 'skipto-settings', [ 'settings' => [ 'skipTo' => [ - 'buttonDivRole' => 'navigation', - 'buttonDivLabel' => Text::_('PLG_SYSTEM_SKIPTO_SKIP_TO_KEYBOARD'), - 'buttonLabel' => Text::_('PLG_SYSTEM_SKIPTO_SKIP_TO'), - 'buttonDivTitle' => '', - 'menuLabel' => Text::_('PLG_SYSTEM_SKIPTO_SKIP_TO_AND_PAGE_OUTLINE'), - 'landmarksLabel' => Text::_('PLG_SYSTEM_SKIPTO_SKIP_TO'), - 'headingsLabel' => Text::_('PLG_SYSTEM_SKIPTO_PAGE_OUTLINE'), - // The following string begins with a space - 'contentLabel' => ' ' . Text::_('PLG_SYSTEM_SKIPTO_CONTENT'), + // Feature switches + 'enableActions' => false, + 'enableHeadingLevelShortcuts' => false, + + // Customization of button and menu + 'accesskey' => '9', + 'displayOption' => 'popup', + + // Button labels and messages + 'accesskeyNotSupported' => Text::_('PLG_SYSTEM_SKIPTO_ACCESS_KEY_NOT_SUPPORTED'), + 'buttonTitle' => Text::_('PLG_SYSTEM_SKIPTO_TITLE'), + 'buttonTitleWithAccesskey' => Text::_('PLG_SYSTEM_SKIPTO_TITLE_WITH_ACCCESS_KEY'), + 'buttonLabel' => Text::_('PLG_SYSTEM_SKIPTO_SKIP_TO'), + + // Menu labels and messages + 'landmarkGroupLabel' => Text::_('PLG_SYSTEM_SKIPTO_LANDMARK'), + 'headingGroupLabel' => Text::_('PLG_SYSTEM_SKIPTO_HEADING'), + 'mofnGroupLabel' => Text::_('PLG_SYSTEM_SKIPTO_HEADING_MOFN'), + 'headingLevelLabel' => Text::_('PLG_SYSTEM_SKIPTO_HEADING_LEVEL'), + 'mainLabel' => Text::_('PLG_SYSTEM_SKIPTO_LANDMARK_MAIN'), + 'searchLabel' => Text::_('PLG_SYSTEM_SKIPTO_LANDMARK_SEARCH'), + 'navLabel' => Text::_('PLG_SYSTEM_SKIPTO_LANDMARK_NAV'), + 'regionLabel' => Text::_('PLG_SYSTEM_SKIPTO_LANDMARK_REGION'), + 'asideLabel' => Text::_('PLG_SYSTEM_SKIPTO_LANDMARK_ASIDE'), + 'footerLabel' => Text::_('PLG_SYSTEM_SKIPTO_LANDMARK_FOOTER'), + 'headerLabel' => Text::_('PLG_SYSTEM_SKIPTO_LANDMARK_HEADER'), + 'formLabel' => Text::_('PLG_SYSTEM_SKIPTO_LANDMARK_FORM'), + 'msgNoLandmarksFound' => Text::_('PLG_SYSTEM_SKIPTO_LANDMARK_NONE'), + 'msgNoHeadingsFound' => Text::_('PLG_SYSTEM_SKIPTO_HEADING_NONE'), + + // Selectors for landmark and headings sections + 'headings' => 'h1, h2, h3', + 'landmarks' => 'main, nav, search, aside, header, footer, form', ] ] ] @@ -77,16 +107,6 @@ public function onAfterDispatch() /** @var Joomla\CMS\WebAsset\WebAssetManager $wa */ $wa = $document->getWebAssetManager(); - $wa->useStyle('skipto') - ->useScript('skipto.dropmenu') - ->useScript('skipto') - ->addInlineScript( - 'document.addEventListener(\'DOMContentLoaded\', function() {' - . 'window.SkipToConfig = Joomla.getOptions(\'skipto-settings\');' - . 'window.skipToMenuInit();});', - [], - ['type' => 'module'], - ['skipto'] - ); + $wa->useScript('skipto'); } } diff --git a/plugins/system/skipto/skipto.xml b/plugins/system/skipto/skipto.xml index c85ce859a2239..a45b62deba12e 100644 --- a/plugins/system/skipto/skipto.xml +++ b/plugins/system/skipto/skipto.xml @@ -2,7 +2,7 @@ plg_system_skipto Joomla! Project - February 2019 + February 2020 (C) 2019 Open Source Matters, Inc. GNU General Public License version 2 or later; see LICENSE.txt admin@joomla.org @@ -13,8 +13,8 @@ skipto.php - language/en-GB/en-GB.plg_system_skipto.ini - language/en-GB/en-GB.plg_system_skipto.sys.ini + language/en-GB/plg_system_skipto.ini + language/en-GB/plg_system_skipto.sys.ini @@ -33,4 +33,4 @@ - \ No newline at end of file +