Fix the focus indicator on Ink buttons.

Review Request #14206 — Created Oct. 16, 2024 and submitted — Latest diff uploaded

Information

Ink
master

Reviewers

At one point, I made an attempt to fix the focus indicator outline on
buttons, but my fix was incomplete. I had specified an outline color and
offset, but not the style, and this prevented browsers from displaying
anything for the outline.

We're now just removing our outline definition entirely, using the
browser's native style instead. There's on exception in that we're
keeping a 2px gap between the outline and the button, preventing it from
overlapping borders.

There's also a fix for focus indicators in button groups. We now set a
z-index: 1, which should let it sit just above siblings in the same
container, helping the foucs indicator stand out.

Tested focus indicators in Safari, Chrome, and Firefox.

Diff Revision 1 (Latest)

Commits

First Last Summary ID Author
Fix the focus indicator on Ink buttons.
At one point, I made an attempt to fix the focus indicator outline on buttons, but my fix was incomplete. I had specified an outline color and offset, but not the style, and this prevented browsers from displaying anything for the outline. We're now just removing our `outline` definition entirely, using the browser's native style instead. There's on exception in that we're keeping a 2px gap between the outline and the button, preventing it from overlapping borders. There's also a fix for focus indicators in button groups. We now set a `z-index: 1`, which should let it sit just above siblings in the same container, helping the foucs indicator stand out.
7b2bca0549f1ebc66fbacf2a45615e8a98fcbe02 Christian Hammond
src/ink/less/themes/default/components/button.theme.less
Loading...