Theme preview/details: change non-links to buttons and remove disabled buttons from tabindex

[walbo]

The next/prev theme navigation gets the classname .disabled but is still available in the tabindex. Also the navigation is non-links <a href="#"> that should be <button>.

If you previewing a installed theme, there is a non-link thats says installed. The link should not be a link.

[afercia]

Thanks @walbo yes the theme browser needs some accessibility improvements and many of the points you outlined are perfectly valid. Many things have changed in the last months, see for example [38084] that added a disabled attribute on the next/prev navigation to take them out from the tab order when they're... disabled :)

Other things need to be fixed yet, for example some buttons miss a type="button" attribute and the JS part could be probably simplified. Also, some links (with a few exceptions for the ones that still work when JS is off) need to be buttons.

I'd suggest to keep things separated though and open a separate ticket for the theme installer. Keeping the issues related to the theme browser in this ticket and addressing the theme installer issues in a separate ticket would help to make things more clear for other contributors and reviewers.

[afercia]

Just checked again this and seems to me a few things have changed and there's only one point to address:

in the theme installer, the buttons that look "disabled" are still focusable and it is possibel to Tab to them. They should use a disabled attribute. See screenshot below.

[afercia]

This button looks disabled but is still focusable

[walbo]

@afercia Updated the patch so to add disabled attribute to the buttons when disabled.

[afercia]

36627.diff​ avoids a focus loss when navigation is at the first or last theme, and improves the buttons accessibility text.

[afercia]

In 43020:

Accessibility: Improve the Themes Installer navigation buttons accessibility.

• really disables buttons when they look disabled (when navigation is at the first or last theme)
• when navigation is at the first or last theme, moves focus to the other navigation button, to avoid a focus loss
• improves the buttons visually hidden accessibility text

Props walbo, afercia.
Fixes #36627.