WordPress.org

Make WordPress Core

Opened 2 years ago

Closed 3 months ago

#36627 closed defect (bug) (fixed)

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

Reported by: walbo Owned by: afercia
Milestone: 5.0 Priority: normal
Severity: normal Version:
Component: Themes Keywords: has-patch semantic-buttons
Focuses: accessibility, javascript Cc:

Description

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.

Attachments (5)

36627.patch (5.5 KB) - added by walbo 2 years ago.
36627.02.patch (5.5 KB) - added by walbo 2 years ago.
disabled Screen Shot 2018-03-12 at 20.27.44.png (24.4 KB) - added by afercia 4 months ago.
This button looks disabled but is still focusable
36627.03.patch (834 bytes) - added by walbo 4 months ago.
36627.diff (2.3 KB) - added by afercia 3 months ago.

Download all attachments as: .zip

Change History (13)

@walbo
2 years ago

#1 @walbo
2 years ago

  • Keywords has-patch added

@walbo
2 years ago

#2 @afercia
2 years ago

  • Focuses javascript added
  • Keywords needs-refresh added
  • Milestone changed from Awaiting Review to Future Release

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.

#3 @afercia
14 months ago

  • Keywords semantic-buttons added

This ticket was mentioned in Slack in #accessibility by afercia. View the logs.


4 months ago

#5 @afercia
4 months ago

  • Milestone changed from Future Release to 5.0

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
4 months ago

This button looks disabled but is still focusable

@walbo
4 months ago

#6 @walbo
4 months ago

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

@afercia
3 months ago

#7 @afercia
3 months ago

  • Keywords needs-refresh removed

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

#8 @afercia
3 months ago

  • Owner set to afercia
  • Resolution set to fixed
  • Status changed from new to closed

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.

Note: See TracTickets for help on using tickets.