Easy-digital-downloads: 3.0 - Vertical Sections tabs have accessibility issues

[robincornett]

Bug Report

Expected behavior

Custom navigation elements, such as the vertical sections tabs, should have distinct visual focus styles and appropriate aria attributes.

Actual behavior

I've been looking at the Customer Details screen but this may be a general EDD\Admin\Sections behavior issue (I do not know what other screens use the vertical tabs). This is about the vertical navigation tabs for Profile, Notes, Tools, and Delete.

• When using the keyboard to navigate the screen, there are no focus styles on the navigation tabs
• When the page loads, aria-selected="true" is added to the <li> corresponding to the current active section, but looking at the source code for the page, JS has added the same attribute to the <a> and <i> elements of the active tab and the inactive tabs as well. (Loading the page without JS leaves just the initial <li> marked this way.)

Steps to reproduce the behavior

1) in EDD 3.0, visit a Customer Details screen
2) using the keyboard, tab to the main content, and then keep hitting tab. Your first several presses are going through the <li> elements but there is no corresponding visual indicator that you are doing so
3) open dev tools and inspect the <li> elements and see all of the incorrect aria-selected="true"

Information (if a specific version is affected):

PHP Version: 7.3.5
EDD Version (or branch): release/3.0
WordPress Version: 5.4

Any other relevant information:
The relevant JS is in assets\js\admin\components\vertical-sections\index.js.

[robincornett]

It looks like the JS can be fixed by changing this one line (removing the space before the :first-child selector):

$( '.edd-vertical-sections.use-js .section-nav:first-child' ).attr( 'aria-selected', 'true' );

[spencerfinnell]

Also the tabs either need to be updated to be able to load from a hash in the URL or convert the tabs to <buttons> since they are not providing a link to anywhere specific. Ideally we'd add support for linking directly to a tab, as that can be helpful for support.

[robincornett]

The CSS could be updated to look something like this on :focus (something similar for :hover would also be good as the link changes color but it's very difficult to see):

#edd-item-tab-wrapper li a:focus,
.edd-vertical-sections .section-nav li a:focus {
    background-color: #eee;
    outline: 2px solid #0073aa;
    outline-offset: -2px;
}

Assume that the outline color would have to update for the admin color scheme as well.

[spencerfinnell]

@robincornett I like that direction. I just did something similar for the upcoming version of WP Simple Pay:

[robincornett]

Yes, I do like that!

[spencerfinnell]

@robincornett I'm not sure we need the background color and outline on hover as well. For the hover state, what about adding a similar style as active, with a transition:

There is also a change that will eventually get in to release/3.0 that you may want to bring in here: https://github.com/easydigitaldownloads/easy-digital-downloads/pull/7537/commits/b6b60916436eabe4e4435518d6b55c4e6084021c

https://github.com/easydigitaldownloads/easy-digital-downloads/issues/7526

[robincornett]

Thanks, @spencerfinnell, the box-shadow is a lot less queasy-making on active/hover.

Question: with the style variations, would there be any consideration given to using CSS variables for the color assignments?

[spencerfinnell]

@robincornett We don't do any processing on the CSS, unfortunately we can't use true CSS variables (IE 11), or preprocessor variables at this time.

[spencerfinnell]

@robincornett Can we also add a bottom margin to the last item? This prevents the following without needing to define the height of the content:

to