[4.0] [a11y] Add SkipTo Navigation plugin #24142

brianteeman · 2019-03-09T20:11:10Z

Integration of the great accessibility plugin by PayPal Accessibility Team and University of Illinois

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 the important places on a given web page. Once installed and configured, 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.

How it works

The SkipTo menu becomes visible the first time the user tabs into the page.
Once the keyboard focus is on the menu, pressing the ENTER or the SPACEBAR key will pull down the list of high-level headings and landmarks on the current page.
Use arrow keys to select your choice and press ENTER to skip to it.
If you decide to reach the menu again, simply press the built-in access key (0 by default).

Joomla options

Obviously added the ability for the strings to be translated
In the plugin you have the option to enable this navigation aid on Site/Administrator/Both - The default is admin

SkipTo options

By default, SkipTo menu will include the following places on the page:

Heading (e.g h1, h2, h3 and h4 elements).
ARIA landmarks (e.g. banner, navigation, main and search).
HTML5 Section Elements (e.g. main, section[aria-label], section[aria-labelledby]
The “access key” is set to 0.
The menu is set not to wrap.
The menu is visible on keyboard focus only

The above are configurable but I have not exposed the configuration to Joomla - but can do. I just think the complicate things and the defaults are fine

Testing

Testing will require a full npm install

Thanks to @wilsonge for getting me over the final hurdles

Integration of the great accessibility plugin by PayPal Accessibility Team and University of Illinois 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 the important places on a given web page. Once installed and configured, 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. ### How it works The SkipTo menu becomes visible the first time the user tabs into the page. Once the keyboard focus is on the menu, pressing the ENTER or the SPACEBAR key will pull down the list of high-level headings and landmarks on the current page. Use arrow keys to select your choice and press ENTER to skip to it. If you decide to reach the menu again, simply press the built-in access key (0 by default). ### Joomla options Obviously added the ability for the strings to be translated In the plugin you have the option to enable this navigation aid on Site/Administrator/Both - The default is admin ### SkipTo options By default, SkipTo menu will include the following places on the page: Heading (e.g h1, h2, h3 and h4 elements). ARIA landmarks (e.g. banner, navigation, main and search). HTML5 Section Elements (e.g. main, section[aria-label], section[aria-labelledby] The “access key” is set to 0. The menu is set not to wrap. The menu is visible on keyboard focus only The above are configurable but I have not exposed the configuration to Joomla - but can do. I just think the complicate things and the defaults are fine

installation/sql/mysql/joomla.sql

installation/sql/postgresql/joomla.sql

Quy · 2019-03-09T20:23:11Z

plugins/system/skipto/skipto.php

+			$current_section = 0;
+		}
+
+		if (!($current_section & $section))


Suggested change

if (!($current_section & $section))

if (!($current_section && $section))

This code is a direct copy paste from the yubikey plugin

Pretty sure we don't mean to do this http://www.php.net/manual/en/language.operators.bitwise.php - even if it does work. I'd change yubikey to match what @Quy is suggesting

It does work. The suggestion above does not.

plugins/system/skipto/skipto.php

Co-Authored-By: brianteeman <brian@teeman.net>

administrator/components/com_admin/sql/updates/mysql/4.0.0-2019-03-09.sql

administrator/components/com_admin/sql/updates/postgresql/4.0.0-2019-03-09.sql

installation/sql/postgresql/joomla.sql

Co-Authored-By: brianteeman <brian@teeman.net>

SharkyKZ · 2019-03-09T21:13:22Z

@brianteeman see brianteeman#78 for SQL fixes.

administrator/components/com_admin/sql/updates/postgresql/4.0.0-2019-03-09.sql

astridx · 2019-03-10T12:40:31Z

Thank you for this plugin. I just tested it. I noticed the following:

After discovering I saw two new plugins. I ignored API Authentication - Basic Auth. I installed System - Skip-To Navigation.
After click on one entry in the SkipTo menu , I get this error.
I do not understand, which links are included in the SkipTo menu . Here I find, that h4 should be included. But Most read Posts are not included in the next picture.

brianteeman · 2019-03-10T13:05:45Z

Sorry my original post is incorrect - the default settings are h1, h2, h3
We can add h4 if we want to

SharkyKZ

SQL please.

administrator/components/com_admin/sql/updates/mysql/4.0.0-2019-03-09.sql

administrator/components/com_admin/sql/updates/postgresql/4.0.0-2019-03-09.sql

installation/sql/mysql/joomla.sql

installation/sql/postgresql/joomla.sql

brianteeman · 2019-03-10T13:50:18Z

@SharkyKZ Why. I thought we were supposed to set the default values in the sql

SharkyKZ · 2019-03-10T13:56:11Z

Based on #20563 (comment), no. As long as you set them in the plugin code.

SharkyKZ

SQL still not fixed.

administrator/components/com_admin/sql/updates/postgresql/4.0.0-2019-03-09.sql

…0-2019-03-09.sql Co-Authored-By: brianteeman <brian@teeman.net>

brianteeman · 2019-03-11T13:54:11Z

Thanks @SharkyKZ should be fixed now

SharkyKZ · 2019-03-11T13:57:36Z

Thanks, now the review starts 😁.

brianteeman · 2019-03-18T17:34:05Z

I can't decide if we should expose the ability to allow the user to edit the following

Heading (e.g h1, h2, h3 and h4 elements).
ARIA landmarks (e.g. banner, navigation, main and search).
HTML5 Section Elements (e.g. main, section[aria-label], section[aria-labelledby]
The “access key” is set to 0.

Quy · 2019-03-18T17:36:51Z

plugins/system/skipto/skipto.php

+
+		// TODO remove this line when bug is fixed
+		$this->loadLanguage();
+


Remove one more tab.

brianteeman · 2019-03-18T19:17:05Z

appveyor failed with

fatal: unable to access 'https://github.com/joomla/joomla-cms.git/': Could not resolve host: github.com

SharkyKZ · 2019-03-19T09:12:23Z

plugins/system/skipto/skipto.php

+
+		try
+		{
+			$app = $this->app;


Remove this line.

You told me to put it in #24142 (comment)

plugins/system/skipto/skipto.php

SharkyKZ · 2019-03-19T09:15:32Z

plugins/system/skipto/skipto.php

+		}
+
+		// TODO remove this line when bug is fixed
+		$this->loadLanguage();


Personally, I would keep this and remove $autoloadLanguage instead. There's no need to load language files in backend if the plugin runs only in frontend, and vice versa.

dgrammatiko · 2019-03-21T19:59:02Z

@wilsonge fwiw if was still the JS leader I wouldnt accept this skipto script to enter the project's dependencies

brianteeman · 2019-03-21T22:47:04Z

are you going to say why?

dgrammatiko · 2019-03-21T23:19:46Z

are you going to say why?

Search for //IE8 fix:
The dropdown is totally useless and complete bloated code as we already have our own implementation, @C-Lodder mentioned that already.
The very obvious ones but there are more about that code. Not everything that works is also fit for the job...

brianteeman · 2019-03-21T23:25:26Z

I was told NOT to change the code
The dropdown is separate code and if someone wants to integrate a different dropdown script then great. You know my skill set.

dgrammatiko · 2019-03-21T23:38:49Z

I was told NOT to change the code

That's then the reason you're looking for. You're simply adding technical debt here which is totally unneeded. We don't care for IE < 11 we shouldn't drag scripts that patch things for dead browsers...
Also, the fact that almost all functions have a patch for IE8 indicates clearly that this script is not up to date or maintained or what is my point of view that it will be maintained for the next 4-5 years that Joomla 4 will be out there...

All and all I am not against a skipto but let's do it properly, at the end of the day all there is here are some DOM manipulations nothing that even a JS noobie can't do...

brianteeman · 2019-03-22T00:10:39Z

I would rather use working code (that can always be improved later) than wait for someone with JavaScript skills write a working solution.

You might find JavaScript easy to write. I certainly don't or I would have fixed the password strength and switcher js which are totally not accessible.

dgrammatiko · 2019-03-22T00:17:38Z

I would rather use working code

That's why Joomla is a mess, everything is important and needs to be implemented right now, no matter what the technical debt that it introduces. Sorry I totally disagree here...

I would have fixed the password strength

Well, I had a PR standing there for 3 months and finally, @wilsonge said "no new custom elements". I'm not a magician, I do my best but I can't fix something if people don't merge my stupid code...

wilsonge · 2019-03-25T10:49:16Z

@zwiastunsw Can you retest this please

zwiastunsw · 2019-03-26T09:23:48Z

I have tested this item ✅ successfully on 44775ee

_{This comment was created with the J!Tracker Application at issues.joomla.org/tracker/joomla-cms/24142.}

zwiastunsw · 2019-03-26T09:37:26Z

I can't decide if we should expose the ability to allow the user to edit the following ....

In my opinion it is not necessary. Theplugin has to do exactly what it does. Adding configuration options will only make the system operation more complicated.

wilsonge · 2019-03-26T10:34:17Z

Thanks guys!

brianteeman · 2019-03-26T21:06:36Z

Thanks for testing and merging. If we ever get a new admin template this will be essential for testing it

joomla-cms-bot added Language Change This is for Translators NPM Resource Changed This Pull Request can't be tested by Patchtester PR-4.0-dev labels Mar 9, 2019

brianteeman mentioned this pull request Mar 9, 2019

[4.0] Skipto #24042

Closed

Quy reviewed Mar 9, 2019

View reviewed changes

installation/sql/mysql/joomla.sql Outdated Show resolved Hide resolved

Quy reviewed Mar 9, 2019

View reviewed changes

installation/sql/postgresql/joomla.sql Outdated Show resolved Hide resolved

Quy reviewed Mar 9, 2019

View reviewed changes

plugins/system/skipto/skipto.php Outdated Show resolved Hide resolved

brianteeman and others added 2 commits March 9, 2019 20:23

tabs

b9da8b3

Update plugins/system/skipto/skipto.php

1231267

Co-Authored-By: brianteeman <brian@teeman.net>

SharkyKZ reviewed Mar 9, 2019

View reviewed changes

administrator/components/com_admin/sql/updates/mysql/4.0.0-2019-03-09.sql Outdated Show resolved Hide resolved

SharkyKZ reviewed Mar 9, 2019

View reviewed changes

administrator/components/com_admin/sql/updates/postgresql/4.0.0-2019-03-09.sql Outdated Show resolved Hide resolved

SharkyKZ reviewed Mar 9, 2019

View reviewed changes

installation/sql/postgresql/joomla.sql Outdated Show resolved Hide resolved

Update installation/sql/postgresql/joomla.sql

a998bd7

Co-Authored-By: brianteeman <brian@teeman.net>

thanks @SharkyKZ

6376480

Quy reviewed Mar 9, 2019

View reviewed changes

administrator/components/com_admin/sql/updates/postgresql/4.0.0-2019-03-09.sql Outdated Show resolved Hide resolved

less haste more speed

0268f3f

SharkyKZ suggested changes Mar 10, 2019

View reviewed changes

remove sql defaults

60c0294

SharkyKZ suggested changes Mar 11, 2019

View reviewed changes

administrator/components/com_admin/sql/updates/postgresql/4.0.0-2019-03-09.sql Outdated Show resolved Hide resolved

Update administrator/components/com_admin/sql/updates/postgresql/4.0.…

0fce2ea

…0-2019-03-09.sql Co-Authored-By: brianteeman <brian@teeman.net>

Merge branch '4.0-dev' into skipto2

eb1e656

Quy reviewed Mar 18, 2019

View reviewed changes

plugins/system/skipto/skipto.php Outdated

// TODO remove this line when bug is fixed

$this->loadLanguage();

Copy link

Contributor

Quy Mar 18, 2019

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Remove one more tab.

SharkyKZ reviewed Mar 19, 2019

View reviewed changes

plugins/system/skipto/skipto.php Show resolved Hide resolved

SharkyKZ reviewed Mar 19, 2019

View reviewed changes

brianteeman added 3 commits March 19, 2019 12:51

Update skipto.php

2f52b52

Merge branch '4.0-dev' into skipto2

02f8e45

Merge branch '4.0-dev' into skipto2

5574492

Merge branch '4.0-dev' into skipto2

0f993b9

wilsonge added 2 commits March 22, 2019 11:15

Merge branch '4.0-dev' into skipto2

38cb29e

Merge branch '4.0-dev' into skipto2

44775ee

Merge branch '4.0-dev' into skipto2

d1d1054

wilsonge merged commit f6c4e45 into joomla:4.0-dev Mar 26, 2019

wilsonge added this to the Joomla 4.0 milestone Mar 26, 2019

brianteeman deleted the skipto2 branch March 26, 2019 21:06

SharkyKZ mentioned this pull request Mar 28, 2019

[4.0] Section setting not respected, misc fixes #24368

Merged

zwiastunsw mentioned this pull request Apr 8, 2020

Unsolved A11y issues joomla/accessibility#54

Open

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[4.0] [a11y] Add SkipTo Navigation plugin #24142

[4.0] [a11y] Add SkipTo Navigation plugin #24142

brianteeman commented Mar 9, 2019

Quy Mar 9, 2019

brianteeman Mar 9, 2019

wilsonge Mar 15, 2019

SharkyKZ Mar 15, 2019

SharkyKZ commented Mar 9, 2019

astridx commented Mar 10, 2019

brianteeman commented Mar 10, 2019

SharkyKZ left a comment

brianteeman commented Mar 10, 2019

SharkyKZ commented Mar 10, 2019

SharkyKZ left a comment

brianteeman commented Mar 11, 2019

SharkyKZ commented Mar 11, 2019

brianteeman commented Mar 18, 2019

Quy Mar 18, 2019

brianteeman commented Mar 18, 2019

SharkyKZ Mar 19, 2019

brianteeman Mar 19, 2019

SharkyKZ Mar 19, 2019

dgrammatiko commented Mar 21, 2019

brianteeman commented Mar 21, 2019

dgrammatiko commented Mar 21, 2019

brianteeman commented Mar 21, 2019

dgrammatiko commented Mar 21, 2019

brianteeman commented Mar 22, 2019

dgrammatiko commented Mar 22, 2019

wilsonge commented Mar 25, 2019

zwiastunsw commented Mar 26, 2019

zwiastunsw commented Mar 26, 2019

wilsonge commented Mar 26, 2019

brianteeman commented Mar 26, 2019

	if (!($current_section & $section))
	if (!($current_section && $section))


		// TODO remove this line when bug is fixed
		$this->loadLanguage();

[4.0] [a11y] Add SkipTo Navigation plugin #24142

[4.0] [a11y] Add SkipTo Navigation plugin #24142

Conversation

brianteeman commented Mar 9, 2019

How it works

Joomla options

SkipTo options

Testing

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

SharkyKZ commented Mar 9, 2019

astridx commented Mar 10, 2019

brianteeman commented Mar 10, 2019

SharkyKZ left a comment

Choose a reason for hiding this comment

brianteeman commented Mar 10, 2019

SharkyKZ commented Mar 10, 2019

SharkyKZ left a comment

Choose a reason for hiding this comment

brianteeman commented Mar 11, 2019

SharkyKZ commented Mar 11, 2019

brianteeman commented Mar 18, 2019

Choose a reason for hiding this comment

brianteeman commented Mar 18, 2019

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

dgrammatiko commented Mar 21, 2019

brianteeman commented Mar 21, 2019

dgrammatiko commented Mar 21, 2019

brianteeman commented Mar 21, 2019

dgrammatiko commented Mar 21, 2019

brianteeman commented Mar 22, 2019

dgrammatiko commented Mar 22, 2019

wilsonge commented Mar 25, 2019

zwiastunsw commented Mar 26, 2019

zwiastunsw commented Mar 26, 2019

wilsonge commented Mar 26, 2019

brianteeman commented Mar 26, 2019