Description

Discovered while working on #62267

Buttons can be made aria-disabled to still be focusable and this pattern has been recently made more solid in #62080

When aria-disabled buttons receive focus, their focus style should be consistent and this should be managed in the Button component itself. Instead, I observed that sometimes some aria-disabled buttons use a custom focus style.

An important note for accessibility is that:

• Disabled controls don't have to meet the color contrast requirement.
• However, the entire purpose of making aria-disabled buttons still focusable is to make them discoverable and perceivable when they receive focus. This should apply also to the focus style so that I'd argue the focus style should meet the contrast requirement. Feedback and thoughts welcome Cc @joedolson

The current situation of the focus style for aria-disabled buttons is pretty inconsistent and should be improved.

1
The Default button uses some opacity so that both the text and the focus outline are lighter:

2
The Primary button only makes the text lighter. The outline (a box-shadow actually) is different:

3
The Secondary button only makes the text color lighter. Anyways, the text color is different from the one of the Default button (which uses opacity):

4
Same for the Tertiary button:

Step-by-step reproduction instructions

• Go to the Storybook https://wordpress.github.io/gutenberg/?path=/docs/components-button--docs
• Test the 4 Button variants: Default, Primary, Secondary, and Tertiary.
• Set both the __experimentalIsFocusable and disabled props to true.
• Move focus to the Button preview at the top of the page.
• Observe the focus style inconsistencies.

Screenshots, screen recording, code snippet

No response

Environment info

No response

Please confirm that you have searched existing issues in the repo.

Yes

Please confirm that you have tested with all plugins deactivated except Gutenberg.

Yes