Bug: Inner circle of radio not visible in firefox

[saad-mo]

Detailed description

Describe in detail the issue you're having.

Inner Circler of radio button is not visible in firefox

Is this issue related to a specific component?

Radio buttons

What did you expect to happen? What happened instead? What would you like to see changed?

show inner circle

What browser are you working in?

Firefox on macos

What version of the Fundamental UI are you using?

Latest, live doumentation site

If BUG, steps to reproduce the issue

1. go to http://localhost:4000/components/form.html#radio-buttons
2. click on radio buttons
3. notice the inner circle is not visible eventhouh the radio is selected.

[ianquigley-sap]

I'm not sure this one can be resolved based on the current implementation of the library.

Currently we apply the pseudo ::after content to the input[type=radio] element to achieve the desired look and feel.

Whilst this works well in Chrome, it's only because Chrome is not following the official W3C specification for pseudo elements.

The specification states that ::before and ::after pseudo classes can only be applied to elements that can have a document tree (i.e. have closing tags and can have child elements). See https://www.w3.org/TR/CSS2/generate.html#before-after-content and https://stackoverflow.com/questions/2587669/can-i-use-a-before-or-after-pseudo-element-on-an-input-field for details. Input fields should not have the ability to use these pseudo classes, but Chrome doesn't adhere to this, hence it is working in Chrome.

I've created a branch where I've added an element after the input tag, and applied the styling to this appended element. This acts as the pseudo ::after element in firefox and works.

Please see https://github.com/SAP/fundamental/tree/bug/778-radio-firefox for the branch, and see http://localhost:3030/radio for the updated radio.

However, if any styling is applied to the input field (such as a margin), the inner radio dot is out of alignment and we can't control this. Therefore, the fix is too brittle in my opinion.

The only way I can see this working cross browser is to create a webcomponent for the radio, and apply the styling to this element.

BTW the same issue applies to the checkbox.

[xak]

Is it possible to fallback to browser defaults for Firefox and IE? Get hacky with CSS exclusion rules.

@-moz-document url-prefix() {
  h1 {
    color: red;
  }
}

[ianquigley-sap]

@xak, if we put the following into the forms.scss, then the default checkbox and radio appears in FF, whilst still keeping the correct styling in Chrome:

@-moz-document url-prefix() {
    #{$fd-elements-inputs--check},
    .#{$fd-namespace}-checkbox {
        -moz-appearance: checkbox;
    }
    #{$fd-elements-inputs--radio},
    .#{$fd-namespace}-radio {
        -moz-appearance: radio;
    }    
}

I've a PR with this change: #1043

Is it sufficient to revert to the default styling for FF in these cases?