Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Merged
merged 22 commits into from Mar 26, 2019

Conversation

@brianteeman
Copy link
Contributor

commented Mar 9, 2019

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

skipto

Thanks to @wilsonge for getting me over the final hurdles

[4.0] [a11y] Add SkipTo Navigation plugin
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
Show resolved Hide resolved installation/sql/mysql/joomla.sql Outdated
$current_section = 0;
}
if (!($current_section & $section))

This comment has been minimized.

Copy link
@Quy

Quy Mar 9, 2019

Contributor
Suggested change
if (!($current_section & $section))
if (!($current_section && $section))

This comment has been minimized.

Copy link
@brianteeman

brianteeman Mar 9, 2019

Author Contributor

This code is a direct copy paste from the yubikey plugin

This comment has been minimized.

Copy link
@wilsonge

wilsonge Mar 15, 2019

Contributor

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

This comment has been minimized.

Copy link
@SharkyKZ

SharkyKZ Mar 15, 2019

Contributor

It does work. The suggestion above does not.

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

brianteeman and others added some commits Mar 9, 2019

Update plugins/system/skipto/skipto.php
Co-Authored-By: brianteeman <brian@teeman.net>
Update installation/sql/postgresql/joomla.sql
Co-Authored-By: brianteeman <brian@teeman.net>
@SharkyKZ

This comment has been minimized.

Copy link
Contributor

commented Mar 9, 2019

@brianteeman see brianteeman#78 for SQL fixes.

@astridx

This comment has been minimized.

Copy link
Contributor

commented Mar 10, 2019

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

  1. After discovering I saw two new plugins. I ignored API Authentication - Basic Auth. I installed System - Skip-To Navigation.
    Extensions  Discover   Test   Administration(1)
  2. After click on one entry in the SkipTo menu , I get this error.
    Bildschirmfoto von 2019-03-10 13-35-51
  3. 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.
    Home(2)
@brianteeman

This comment has been minimized.

Copy link
Contributor Author

commented Mar 10, 2019

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

@SharkyKZ
Copy link
Contributor

left a comment

SQL please.

@brianteeman

This comment has been minimized.

Copy link
Contributor Author

commented Mar 10, 2019

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

@SharkyKZ

This comment has been minimized.

Copy link
Contributor

commented Mar 10, 2019

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

@SharkyKZ
Copy link
Contributor

left a comment

SQL still not fixed.

Update administrator/components/com_admin/sql/updates/postgresql/4.0.…
…0-2019-03-09.sql

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

This comment has been minimized.

Copy link
Contributor Author

commented Mar 11, 2019

Thanks @SharkyKZ should be fixed now

@SharkyKZ

This comment has been minimized.

Copy link
Contributor

commented Mar 11, 2019

Thanks, now the review starts 😁.

@brianteeman

This comment has been minimized.

Copy link
Contributor Author

commented Mar 18, 2019

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.

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

This comment has been minimized.

Copy link
@Quy

Quy Mar 18, 2019

Contributor

Remove one more tab.

@brianteeman

This comment has been minimized.

Copy link
Contributor Author

commented Mar 18, 2019

appveyor failed with

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

try
{
$app = $this->app;

This comment has been minimized.

Copy link
@SharkyKZ

SharkyKZ Mar 19, 2019

Contributor

Remove this line.

This comment has been minimized.

Copy link
@brianteeman

brianteeman Mar 19, 2019

Author Contributor

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

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

This comment has been minimized.

Copy link
@SharkyKZ

SharkyKZ Mar 19, 2019

Contributor

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.

brianteeman added some commits Mar 19, 2019

@dgrammatiko

This comment has been minimized.

Copy link
Contributor

commented Mar 21, 2019

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

@brianteeman

This comment has been minimized.

Copy link
Contributor Author

commented Mar 21, 2019

are you going to say why?

@dgrammatiko

This comment has been minimized.

Copy link
Contributor

commented Mar 21, 2019

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

This comment has been minimized.

Copy link
Contributor Author

commented Mar 21, 2019

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

This comment has been minimized.

Copy link
Contributor

commented Mar 21, 2019

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

This comment has been minimized.

Copy link
Contributor Author

commented Mar 22, 2019

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

This comment has been minimized.

Copy link
Contributor

commented Mar 22, 2019

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 added some commits Mar 22, 2019

@wilsonge

This comment has been minimized.

Copy link
Contributor

commented Mar 25, 2019

@zwiastunsw Can you retest this please

@zwiastunsw

This comment has been minimized.

Copy link
Contributor

commented Mar 26, 2019

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

This comment has been minimized.

Copy link
Contributor

commented Mar 26, 2019

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 wilsonge merged commit f6c4e45 into joomla:4.0-dev Mar 26, 2019

3 checks passed

continuous-integration/appveyor/pr AppVeyor build succeeded
Details
continuous-integration/drone/pr the build was successful
Details
continuous-integration/travis-ci/pr The Travis CI build passed
Details
@wilsonge

This comment has been minimized.

Copy link
Contributor

commented Mar 26, 2019

Thanks guys!

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

@brianteeman

This comment has been minimized.

Copy link
Contributor Author

commented Mar 26, 2019

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

@brianteeman brianteeman deleted the brianteeman:skipto2 branch Mar 26, 2019

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.