• 
      

    Fix the focus indicator on Ink buttons.

    Review Request #14206 — Created Oct. 17, 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)