Repository navigation
A11Y issue with ui5-icon when role="presentation" or aria-hidden="true" provided #3039
Description
Describe the bug
We want to add role="presentation" or aria-hidden="true" so that icon should not read for screen reader.
Scenarios: With screen reader ON, when dialog window is opened focus is set on entire dialog box and is announced as 'Warning Warning dialog window'.
To reproduce
- Go to https://codesandbox.io/s/ui5-webcomponents-forked-fippv?file=/index.html
- Add role="presentation" or aria-hidden="true" on ui5-icon
- Open the screen reader like JAWS and hit the open dialog, when dialog window is opened focus is set on entire dialog box, the screen reader JAWS will announce "warning" twice.
Isolated example
https://codesandbox.io/s/ui5-webcomponents-forked-fippv?file=/index.html
Expected behavior
Once we add role="presentation" or aria-hidden="true" on , the screen reader don't announce anything for icon.
Screenshots
NA
Context
- UI5 Web Components version 0.29.6
- OS/Platform: Window
- Browser (if relevant): Chrome
- Other information: NA
Affected components (if known)
ui5-icon
Organization: (if applicable)
SuccessFactor
Priority: (optional) (Low, Medium, High or Very High)
High
Setting priority would indicate the importance of the issue
and would help the process of dispatching and processing.
To set the appropriate priority, you need to consider the impact
and if the issue:
- Is accessibility one (Screan Reader, Keyboard Handling) - High
Metadata
Metadata
Assignees
Type
Projects
- Status
Activity
ilhan007 commentedon Mar 29, 2021
Hello @mrmabo isn't this the same as
#2383
mrmabo commentedon Mar 29, 2021
@ilhan007
Thanks for your reply.
This isn't the same as #2383
unazko commentedon Mar 30, 2021
Hello @SAP/ui5-webcomponents-topic-p,
I've discussed this issue with our accessibility expert @ghristanov.
The current issue is similar with #2383 as in both use cases, the wanted behavior is that the screen reader wouldn't
announce the icon.
There are two possible solutions identified.
One as proposed will be to add both role="presentation" and aria-hidden="true"
to the icon (decorative mode).
The other would be to refer in "aria-labelledby" the header title only
and not the whole header part of the dialog element as it is currently.
Could you look into the issue further.
For more details please contact @ghristanov.
Best Regards,
Boyan
dobrinyonkov commentedon May 27, 2021
Hello @mrmabo,
I've tested your codesanbox example with aria-hidden="true" set to the ui5-icon and upon openning the dialog the text "Warrning" is only read out once from the h2.
Could you please test again on your side and if the issue is still reproducible provide more information on how to reproduce it ?
Kind Regards,
Dobrin