Make WordPress Core

Opened 7 hours ago

Last modified 76 minutes ago

#66038 new defect (bug)

Theme install: Disabled buttons are only visually disabled and still focusable

Reported by: afercia Owned by:
Priority: normal Milestone: 7.2
Component: Themes Version:
Severity: normal Keywords: has-patch
Cc: Focuses: accessibility

Description (last modified by afercia)

In the theme-install.php page, a few button elements look visually disabled by the means of a CSS class disabled applied to them.

However, there's no semantics to convey their disabled state. No disabled or aria-disabled attributes are present.

As a consequence, these buttons are still focusable even though the disabled CSS class resets any focus indication styling. When tabbing through the UI, there is an invisible tab stop.

An example of these buttons is the 'Activated' button in the card of the currently active theme. See attached screenshot.

There are more buttons with the same issue. Just search for the disabled class on all buttons in the theme-install.php file and observe they don't have any disabled semantics.

Discovered while testing the experimental PR for #66015 / https://github.com/WordPress/wordpress-develop/pull/13348. Axe-core reports a color contrast violation for these buttons. It thinks they are regular buttons and flags the button text light gray color as a violation for insufficient color contrast ratio.

All these buttons should get a disabled attribute.

Focus style uses the same color of the background color.

One more problem occurs for the 'Customize' button of the active theme.

The focus style uses the same color of the background. As such, the focus style is not visible. Generally, using the same color for background and focus style doesn't seem to be a great idea.

Even when changing the admin color scheme (under the Profile settings), any color scheme applies the same color for the focus style and the background of the H3 at the bottom of the active theme card. This needs to be changed so that the focus style is visible.

Attachments (1)

01 only visually disabled.png (191.8 KB ) - added by afercia 7 hours ago.

Download all attachments as: .zip

Change History (3)

#1 @afercia
7 hours ago

  • Description modified (diff)

This ticket was mentioned in PR #13390 on WordPress/wordpress-develop by @sainathpoojary.


76 minutes ago
#2

  • Keywords has-patch added

This PR fixes two accessibility issues in the Theme Installer related to disabled buttons and focus visibility:

  1. Disabled semantics: Replaces the visual-only .disabled CSS class with proper semantic attributes (disabled for <button> elements, and aria-disabled="true" tabindex="-1" for <a> elements). This removes them from the tab order.
  2. Invisible focus ring: Updates the focus ring color to #fff for secondary buttons on the active theme card. Previously, the default focus ring color blended exactly with the theme name background, making it invisible when reached via keyboard.

Trac ticket: https://core.trac.wordpress.org/ticket/66038

## Use of AI Tools

AI assistance: Yes
Tool(s): Github Copilot
Model(s): Claude Sonnet 4.6
Used for: Edge-case checks, and assistance with the PR description; implementation and testing were reviewed and verified by me.

Note: See TracTickets for help on using tickets.