fix: browser validation for inputs doesn't work in safari and firefox

[thomas-kumo]

🐛 Bug Report

Browser validation is working in chrome but not in safari or firefox. Whenever you submit with a required field but no value in a form in chrome, you get a message from the browser telling your the field is required like the following:

However, we are not getting the same bahavior in safari and firefox.

💻 Repro or Code Sample

https://jsfiddle.net/thomasleclerckumo/s92vtLc3/9/

🤔 Expected Behavior

I would expect the same behavior as chrome but in safari and firefox too. A proper validation message appearing.

😯 Current Behavior

Currently, these are the inputs that has a problem displaying the browser validation message when they have required as an attribute (this is what i've tested so far, maybe more to check) :

• Radio
• Checkbox
• Select
• Combobox

Currently, when we try to submit, this is the error we are getting in safari:

An invalid form control with name='select' is not focusable.

This is the result I would expect:

💁 Possible Solution

I don't know the exact nature of the problem so it's hard for me to come up with a solution but if I find anything, I'll make sure to update the thread here on this issue.

Maybe in house validation from FAST.

🔦 Context

If you need more context, I'll be more than happy to disclose them with you.

🔦 EXTRA QUESTIONS

• Is there any specific reasons why the radio-group isn't form-associated, is there something planned for this component about this?

🌍 Your Environment

"@microsoft/fast-element": "^1.12.0", "@microsoft/fast-foundation": "^2.49.2", "@microsoft/fast-react-wrapper": "^0.3.18", "@microsoft/fast-web-utilities": "^6.0.0",

• OS & Device: MacOS
• Browser : Apple Safari, Mozilla FireFox
• Version Latest

[janechu]

Unfortunately @microsoft/fast-foundation is being deprecated, refer to #6955.