Focus outline issue on radio buttons and checkboxes in Firefox browser

[ajanickiv]

Describe the bug

The focus outline for radio buttons and checkboxes extends left about 2 rems past the radio button and checkbox display area

Steps to reproduce the bug

1. Open Firefox browser
2. Go to https://designsystem.digital.gov/components/form-controls/#radio-buttons or https://designsystem.digital.gov/components/form-controls/#checkbox
3. Focus on radiobutton/checkbox

Expected behavior

Focus outlines the radio button and checkbox like it does in other browsers

Screenshots

Firefox

Chrome

System setup

• V2.10.0
• Laptop
• Windows 10
• Firefox 84.0.1 (64-bit)

Additional context

Custom CSS that fixes the problem

@-moz-document url-prefix() {
    .checkbox-radio-focus {
        display: flex;
        text-indent: 0;
        padding-left: 0;
    }
    .checkbox-radio-focus-tile {
        text-indent: 0;
        padding-left: 0.5rem !important;
    }
    .checkbox-radio-focus-tile-hint {
        text-indent: 2rem;
    }
}

[mejiaj]

Good find @ajanickiv! I found removing text-indent from the ::before worked as well.

I have a PR open for this in: #3918.