Button: does not show the arial-label correctly to nvda screen reader when icon is full-screen
See original GitHub issueDescribe the bug When Button is used with icon value set to full-screen, nvda screen reader two different texts: Enter Full Screen graphic clickable button Expand Onboarding Details Screen
Instead of Full Screen above it should be Expand Onboarding Details Screen as it is for other icon values.
Isolated Example
<Button
disabled={disableFullScreenBtn}
key={"fullScreen"}
data-testid="fullScreenIcon"
icon="full-screen"
design={ButtonDesign.Transparent}
onClick={throttle(onFullScreenClick, setDisableExitFullScreenBtn)}
tooltip={i18n.getText("ONBOARDING_DETAILS_EXPAND_SCREEN")}
arial-label={i18n.getText("ONBOARDING_DETAILS_EXPAND_SCREEN")}
/>
Screenshots
UI5 Web Components for React Information
@ui5/webcomponents
version:~0.31.9
@ui5/webcomponents-react
version: ^0.131.9
Operating System: Windows 10
Browser: Chrome
Additional context nvda screen reader is used
Issue Analytics
- State:
- Created 2 years ago
- Comments:18 (10 by maintainers)
Top Results From Across the Web
NVDA is reading button aria-label on click but not on hover
I was facing the issue where nvda did not read the aria-label assigned to Icon or IconButton on hover. I wrapped the icon...
Read more >Using aria-label to provide an invisible label - WCAG WG
Screen reader support varies depending on browser: System Access To Go (IE8) does not recognise aria-label; Using NVDA with Firefox (FF), aria-label is...
Read more >NVDA 2022.3.3 User Guide - NV Access
Welcome to NVDA! NonVisual Desktop Access (NVDA) is a free and open source screen reader for the Microsoft Windows operating system. Providing ...
Read more >Achieve Tips and Tricks for Screen-Reader Users
To do that, each region has a button above it, labeled with the type of resource. NVDA and JAWS users: press Space on...
Read more >Accessible Computer User Guide
reader or view videos—earbuds are available for use. Turn the screen reader ON: Press: (Ctrl) + (Alt) + (N). Or click the NVDA...
Read more >Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start FreeTop Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
Top GitHub Comments
Hello @Neeeko and @SAP/ui5-webcomponents-topic-p colleagues,
According to the specification the icon only button should have a tooltip and an aria-label and they both will get announced. In the described case they have the same texts and double announcement appears when NVDA is used. JAWS pronounces the aria-label text only as the tooltip has the same text.
A possible workaround for the ui5-flexible-column-layout component is to remove the aria-label attribute from the expand/collapse button:
aria-label="{{accStartArrowText}}"
andaria-label="{{accEndArrowText}}"
in FlexibleColumnLayout.hs. This is an icon only button with the same tooltip and aria-label so there should be no unwanted side effects from the change.Best Regards, Boyan
@gurkirpalgill it is released with 0.31.21