Fix the focus indicator on Ink buttons.

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

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.

Summary ID
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

david
  1. Ship It!
  2. 
      
maubin
  1. Ship It!
  2. 
      
chipx86
Review request changed
Status:
Completed
Change Summary:
Pushed to master (8c85e9b)