ui5-webcomponents-react icon indicating copy to clipboard operation
ui5-webcomponents-react copied to clipboard

[Form]: FormGroup `titleText` not announced by screenreader on entering that particular region

Open rama1990br opened this issue 1 year ago • 0 comments

Describe the bug

titleText is not read out by the screenreader when entering the Form Group region and focusing on the first FormItem element within the group (or the last FormItem element on re-entering the group). This is required to be read out so that the blind users get the required context while navigating through the form.

One way that this can be achieved is by enclosing the form group in a div and adding role and aria-label attributes on the div and setting the aria-label to the titleText.

Isolated Example

https://stackblitz.com/edit/github-m52y88?file=src%2FApp.tsx

Reproduction steps

  1. Open JAWS 2024 (or an earlier version) and have it running
  2. Open the above isolated example and tab to the first input 'Name' within 'Personal Data' form group. Observe that 'Personal Data' is not read out by the screenreader.
  3. Continue tabbing through till 'Company Name' within 'Company Data' form group, and then press shift+tab to re-enter the previous form group by focusing on 'Home address' checkbox. Observe that 'Personal Data' is not announced by the screenreader in this instance as well.

Expected Behaviour

The form group titleText should be read out by the screenreader on entering and re-entering the form group region.

Screenshots or Videos

No response

UI5 Web Components for React Version

1.28.4

UI5 Web Components Version

1.24.0

Browser

Chrome, Edge, Firefox, Safari

Operating System

No response

Additional Context

No response

Relevant log output

No response

Organization

SAP SuccessFactors

Declaration

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

rama1990br avatar Oct 10 '24 18:10 rama1990br