Icon buttons in Firefox

[simonziegler]

#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

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]

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.