Improve feedback for accessibility when moving items in nav menu #210
Conversation
Improve feedback for accessibility when moving items in nav menu
Adds new localized strings to `nav-menus.php` to make them available in `nav-menu.js`
|
New commit overcomes the localization limitation by adding strings to the |
Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>
Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>
|
This looks like a good change, I've just pushed some tidy up to the JavaScript as per the implemented coding standards. |
|
Thanks, @mattyrob. I've taken note of what you've done so as to follow similar practices in future. |
Basically just use ES5 syntax, so Also, I think the norm is to declare or scope variables at the top of blocks of code. That's essentailly all I did structurally, and then added some white space or readability - the JavaScript files are all minified in the build steps so we can make them as human readable as possible with no impact on file sizes when used on production sites using the minified versions. |
Removes CSS that's no longer needed because of previous commits, and adds new CSS to make the nav menu page more accessible.
|
Working on getting feedback. |
Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>
Changes `focus-within` to use `outline` instead of `border`
|
Just tested this with NVDA on my own website and it works in speech and Braille, so not sure why it isn't passing checks, but it works for all menu items including moving items in and out of child menus and or parent menus. |
After some testing, I have found that merely adding `setTimeout` in itself creates enough of a delay to enable the correct message to be generated. There is no need to set a value greater than 0.
In PHPUnit 10.3.5, 9.6.13 and 8.5.34, the child processes used for process isolation now use temporary files to communicate their result to the parent process. This caused a failure in some tests that set the `open_basedir` PHP directive to a value that did not include `sys_get_temp_dir()`. This adds `sys_get_temp_dir()` to the `open_basedir` value set by the tests to ensure that permission is still granted for the temporary directory. PHPUnit uses `sys_get_temp_dir()`. To ensure the result is the same, Core's `get_temp_dir()` function is not used. References: - sebastianbergmann/phpunit#5356 WP:Props desrosj, mukesh27, SergeyBiryukov, costdev. Fixes https://core.trac.wordpress.org/ticket/59394. --- Merges https://core.trac.wordpress.org/changeset/56622 / WordPress/wordpress-develop@7d96189ba1 to ClassicPress. Co-authored-by: Colin Stewart <[email protected]>
Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>
Improve feedback for accessibility when moving items in nav menu
Adds new localized strings to `nav-menus.php` to make them available in `nav-menu.js`
Removes CSS that's no longer needed because of previous commits, and adds new CSS to make the nav menu page more accessible.
Changes `focus-within` to use `outline` instead of `border`
After some testing, I have found that merely adding `setTimeout` in itself creates enough of a delay to enable the correct message to be generated. There is no need to set a value greater than 0.
Improve feedback for accessibility when moving items in nav menu, addressing Issue #181
This adds new
politefeedback for screenreader users when they move an item within anav-menu.Description
The message re-uses the
aria-labels already present in the DOM to provide the message. I have taken this approach to reduce confusion and to avoid internationalization/localization problems. This does mean, however, that the word "child", which was mentioned in Issue #181 is not used here, and the word "sub" is used instead because that's what CP currently uses.It would be worth asking the person who originally asked for this whether that approach is acceptable. If not, I think we need to consider whether that means we should change "Sub item" to "Child item" throughout the
nav-menuso as to avoid fragmentation of terminology and resultant confusion.Motivation and context
Fixes Issue #181 .
How has this been tested?
Tested on my localhost test site.
To replicate, you need to open the browser inspector and scroll down to the bottom of the DOM to find
<div id="a11y-speak-polite". Then drag and drop an element within the nav menu. You should see new text content added to thediv. (You might need to expand thedivto see it.)Note that I have had to use a timeout of one second to get this to work because otherwise the new position in the menu is not recognized. I presume this is because the code waits to see if the move is completed first. So the message will not appear immediately.
Screenshots