search

material-components / material-components-web

Modular and customizable Material Design UI components for the web
https://material.io/develop/web
MIT License
17.14k stars 2.15k forks source link

Icon buttons in Firefox #5940

Open simonziegler opened 4 years ago

simonziegler commented 4 years ago

5329 Bug report

After being pressed, icon buttons in Firefox retain a residual outline around their icon

Steps to reproduce

  1. Open Firefox (I am using the current Windows 10 version: 76.0.1 (64-bit))
  2. Go to https://material-components.github.io/material-components-web-catalog/#/component/icon-button
  3. Click on the icon button in the grey panel at the top of the page
  4. See the residual, maybe dotted outline around the icon per the screenshot

Actual behavior

Outline is left around the icon after a click.

Expected behavior

There should be no outline.

Screenshots

image

Your Environment:

Software Version(s)
MDC Web I believe version 6.0.0 is being used on material.io, however I experience this behaviour on my website which does use v6.0.0
Browser Firefox 76.0.1 (64 bit)
Operating System Windows 10

Additional context

Pages on material.io underneath https://material.io/develop/web/components briefly show a lack of CSS as you navigate the menu from one component to another when using Firefox.

Possible solution

n/a

asyncLiz commented 4 years ago

Thanks for the bug! Looks like this is due to a border being set on <button> with the ::-moz-focus-inner selector.

Since we use a ripple to indicate focus for a11y, we should be able to safely remove this border.

It looks like we're already doing this in other components like mdc-button. We should do a quick check and see if there are any other buttons outside of mdc-icon-button that would need this.