Button component: aria-disabled focusable button should use consistent focus style

[afercia]

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

[jasmussen]

What design feedback are you looking for? I'd echo this seems like a bug as far as the appearance of the focus style on the disabled button.

[afercia]

From a design perspective I would like to know what is the desired focus style for aria-disabled buttons.

This one, where the blue outline is dimmed:

or this one where the blue outline is the standard one?

In this case, when the 'Show button text labels' preference is enabled, the button shows text and also becomes tertiary thus surfacing the focus style inconsistency.

From an accessibility perspective, I'm not sure there is a standard for this case. However, I'd tend to think the focus style should be clearly visible for aria-disabled controls. Cc @joedolson any thoughts?

[joedolson]

The focus needs to be fully visible. While it is acceptable to have disabled components below color contrast, per WCAG 1.4.3, that only refers to the component itself. The focus outline is a positional marker to allow a user to identify their current position in the page, and that needs to meet contrast guidelines. The user's need to know where they are in the interface doesn't go away just because the control is disabled.

[afercia]

One more case to adjust: when hovered, the text of the is-destructive button becomes gray. Is thould stay light red.