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 )
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)
Change History (3)
This ticket was mentioned in PR #13390 on WordPress/wordpress-develop by @sainathpoojary.
76 minutes ago
#2
- Keywords has-patch added
![(please configure the [header_logo] section in trac.ini)](/chrome/site/your_project_logo.png)
This PR fixes two accessibility issues in the Theme Installer related to disabled buttons and focus visibility:
.disabledCSS class with proper semantic attributes (disabledfor<button>elements, andaria-disabled="true" tabindex="-1"for<a>elements). This removes them from the tab order.#ffffor 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.