[SF][RadioButton]: [A11y]Required property is not read by Screen Reader JAWS

[VidhiNPatel]

Describe the bug

Setting the "required=true" attribute on the RadioButton component does not convey the required status to screen reader users.

Isolated Example

No response

Reproduction steps

1. Go to https://sap.github.io/ui5-webcomponents-react/v2/?path=/docs/inputs-radiobutton--docs
2. Run the JAWS
3. Check that the RadioButton component does not convey the required status to screen reader users

Expected Behaviour

All "Required" fields must be announced as "required" by screen readers

Screenshots or Videos

No response

UI5 Web Components for React Version

2.11.1

UI5 Web Components Version

2.11.0

Browser

Chrome

Operating System

No response

Additional Context

No response

Relevant log output

Organization

No response

Declaration

• [x] I’m not disclosing any internal or sensitive information.

[Lukas742]

Thanks for reporting! I'll forward this issue to our UI5 Web Components Colleagues as the affected component is developed in their repository.

[didip1000]

Hey @SAP/ui5-webcomponents-topic-rd,

Can you please take a look at this issue?

Best, Diana

[GerganaKremenska]

@SAP/ui5-webcomponents-topic-rd Did some investigation and shared my findings with the team.

[TeodorTaushanov]

Hello,

To ensure proper screen reader accessibility, ui5-radio-button elements should be enclosed within a

that has the attribute role="radiogroup".

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

Additionally, you can set aria-required="true" on this parent element. Here’s how your code should look:

<div aria-labelledby="radioGroupTitle1" aria-required="true">
	<ui5-title id="radioGroupTitle1">Select:</ui5-title>
	<ui5-radio-button value="optionA" name="myGroup" text="Option A"></ui5-radio-button>
	<ui5-radio-button value="optionB" name="myGroup" text="Option B"></ui5-radio-button>
	<ui5-radio-button value="optionC" name="myGroup" text="Option C"></ui5-radio-button>
</div>

If the radio buttons are part of a form, you can add a required attribute to any element in the radio group to ensure the form is validated before it is submitted:

<form>
  <div aria-labelledby="radioGroupTitle1" aria-required="true">
  	<ui5-title id="radioGroupTitle1">Select:</ui5-title>
  	<ui5-radio-button value="optionA" name="myGroup" text="Option A" required></ui5-radio-button>
  	<ui5-radio-button value="optionB" name="myGroup" text="Option B"></ui5-radio-button>
  	<ui5-radio-button value="optionC" name="myGroup" text="Option C"></ui5-radio-button>
  </div>
 <input type="submit">
</form>

Although it might seem unusual to include this parent element, it is necessary because this is how screen readers have been designed to work, despite it being different from form validation behavior.

Best, Teodor

[github-actions[bot]]

This issue has been closed. To reopen, just leave a comment!