[EuiButton] [A11y] :focus-visible outline for Primary filled buttons barely visible

[Zacqary]

Describe the bug
When tabbing through EuiButtons, the :focus-visible outline is always blue, even if the button is also blue. This makes it very difficult to tell whether a button is actually in focus or not.

EDIT: The blue outline is only happening on Firefox. Chrome displays a black outline, but it looks like a less visible outline than intended. Manually triggering :focus-visible in the dev tools displays a far more visible black and white outline, but you can't get this outline to display using the Tab key. See screenshots.

Impact and severity

Very high for low-vision users. Honestly even pretty high for non-visually impaired users that happen to be using the keyboard.

Environment and versions

• EUI version: 106.2.0
• Browser: Firefox Developer Edition 142.0b3
• Operating System: macOS

Minimum reproducible sandbox

This can be seen on the EUI Button demo page

To Reproduce

1. Find an EUI button with color: primary, fill: true
2. Use Tab to focus the button

Expected behavior
Button should be outlined in something like black, white, or another highly visible color. Manually setting :focus-visible in Chrome seems to display what was intended, but you can't actually trigger this state using the Tab key.

Screenshots

Firefox

Note in the video the contrast ratio also isn't great on Success buttons, but it's at least a bit easier to see

Screen.Recording.2025-08-07.at.12.52.10.PM.mov

Chrome

Here, the outline is at least black, but still difficult to see

chromefocus.mov

When I manually go into the inspector and select :focus-visible on the button element, it displays this instead:

[weronikaolejniczak]

EuiButton is unique in that for the filled primary variant it sets the outline to be black, as you recommend.

Chrome (Version 139.0.7258.67), MacOS:

Safari, MacOS:

That being said, I fired up Firefox in Windows (pun intended):

:focus-visible is supported by Firefox. EUI uses outline CSS which can vary greatly across browsers especially when outline-style: auto; is set. Firefox doesn't respect it:

eui/packages/eui/src/global_styling/mixins/_states.ts

Lines 54 to 78 in 934c434

	export const euiFocusRing = (
	euiThemeContext: UseEuiTheme,
	offset: _EuiFocusRingOffset = 'center',
	options?: { color?: CSSProperties['outlineColor'] }
	) => {
	// This function utilizes `focus-visible` to turn on focus outlines.
	// But this is browser-dependent:
	// 👉 Safari and Firefox innately respect only showing the outline with keyboard only
	// 💔 But they don't allow coloring of the 'auto'/default outline, so contrast is no good in dark mode.
	// 👉 For these browsers we use the solid type in order to match with `currentColor`.
	// 😦 Which does means the outline will be square
	return `
	${euiOutline(euiThemeContext, offset, options?.color).trim()}
	// 👀 Chrome respects :focus-visible and allows coloring the \`auto\` style
	&:focus-visible {
	outline-style: auto;
	}
	// 🙅‍♀️ But Chrome also needs to have the outline forcefully removed from regular \`:focus\` state
	&:not(:focus-visible) {
	outline: none;
	}
	`;
	};

So this is a browser limitation more than a bug on our side but I might be missing something.

cc @elastic/eui-team

[Zacqary]

It looks like Safari is the only browser which is setting the outline-offset consistently with keyboard focus and manually forcing :focus-visible in the inspector.

That wider outline-offset is probably the most accessible for a low-vision user. The contrast ratio between the dark blue and the black still isn't great, so the offset gets around that problem nicely.

I was able to get Firefox to display the correct offset by manually setting outline-offset: 1px instead of -1px on the button, and tabbing back and forth around it. There's definitely some possible combination of stuff to do that'll get visual consistency here.

[weronikaolejniczak]

@Zacqary I'm sure that we can play around with the values. Thank you for the additional details!