Secondary and tertiary buttons have no focus ring when not fully disabled

[andrewhayward]

What problem does this address?

Buttons support the ability to retain focus while being disabled, via the __experimentalIsFocusable prop. However, when this is enabled on secondary and tertiary buttons, they do not have a focus ring. For example, the "Reset filters" button here is focused and only mostly disabled, but that is not visibly evident.

This is caused by an issue of specificity in the CSS, with .is-secondary and .is-tertiary overriding previously established focus styling for buttons using box-shadow and outline:

gutenberg/packages/components/src/button/style.scss

Lines 125 to 134 in 1bf654b

	&:disabled,
	&[aria-disabled="true"],
	&[aria-disabled="true"]:hover {
	color: $gray-600;
	background: transparent;
	transform: none;
	opacity: 1;
	box-shadow: none;
	outline: none;
	}

gutenberg/packages/components/src/button/style.scss

Lines 38 to 43 in 1bf654b

	&:focus:not(:disabled) {
	box-shadow: 0 0 0 var(--wp-admin-border-width-focus) $components-color-accent;
	// Windows High Contrast mode will show this outline, but not the box-shadow.
	outline: 3px solid transparent;
	}

What is your proposed solution?

The fix could be as straightforward as changing the scope or specificity of one of the other rules, to allow for the focus styling to propagate. This is probably most easily achieved by moving the box-shadow and outline declarations into a sub-block:

diff --git a/packages/components/src/button/style.scss b/packages/components/src/button/style.scss
index 03273056cf..4b11d9169a 100644
--- a/packages/components/src/button/style.scss
+++ b/packages/components/src/button/style.scss
@@ -129,8 +129,11 @@
                        background: transparent;
                        transform: none;
                        opacity: 1;
-                       box-shadow: none;
-                       outline: none;
+
+                       &:not(:focus) {
+                               box-shadow: none;
+                               outline: none;
+                       }
                }
        }

This will at least allow mostly-disabled buttons to pick up the focus styling applied to other controls:

[Mamaduka]

This came up in #54722. cc @jameskoster, @jasmussen

[jasmussen]

Seems like a bug, yes.

[joedolson]

I feel like a disabled control should have a different focus outline, to provide visual affordance that even though you can focus the control, it's not available to use.

This is a fairly ambiguous situation, accessibility-wise; combining the needs of focus visibility with the affordance of a disabled control. I think we should de-saturate the focus ring when disabled controls have focus; possibly even add an additional icon indicator on the control to help indicate that it's disabled. Setting focus on a control usually implies that you can use the control, so we need to provide strong signals visually that this is disabled.