Issue Summary

The radio buttons & checkboxes created using ProForma forms are not accessible to keyboard & screen reader users.

Steps to Reproduce

1. Start JAWS or NVDA Screen reader
2. Open a Jira form developed by ProForma that includes radio buttons & checkboxes.
3. Press the "TAB" key until focus lands on a radio button
4. The radio buttons & checkboxes don’t receive keyboard focus.
5. Also they are not grouped together with label.

Actual Results

On JSM portal, the radio buttons & checkboxes created using ProForma forms are not accessible to keyboard & screen reader users. 

They don’t receive focus while navigating with tab key.

Also, screen readers do not announce the question or "legend" of a radio button & checkbox group when you tab into a the group.

Screenshot

Expected Results

All the interactive elements on the page must be accessible to keyboard & screen reader users.

Ensure that radio buttons & checkboxes receive tab key focus while navigating.

Screen readers announce the question or "legend" of a radio button group when you tab into a radio button group, and how many radio button options there are relevant to that specific question.

Use <fieldset> & <legend> elements to group the radio buttons.

Alternatively provide role="radiogroup" & aria-labelledby attributes to group radio buttons using ARIA techniques.

Refer to following links for more understanding:

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/fieldset 

https://www.w3.org/WAI/ARIA/apg/patterns/radio/ 

https://www.w3.org/WAI/ARIA/apg/patterns/checkbox/examples/checkbox/ 

Workaround

Currently there is no known workaround for this behavior. A workaround will be added here when available