ui5-webcomponents: Button: does not show the arial-label correctly to nvda screen reader when icon is full-screen

Describe 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 Screen Shot 2021-08-18 at 5 01 26 PM

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

About this issue

Original URL
State: closed
Created 3 years ago
Comments: 18 (10 by maintainers)

Commits related to this issue

fix(ui5-flexible-column-layout): speech output on layout arrows (#4034) Fixes: #3699 — committed to SAP/ui5-webcomponents by nnaydenow 3 years ago
fix(ui5-flexible-column-layout): speech output on layout arrows (#4034) Fixes: #3699 — committed to SAP/ui5-webcomponents by nnaydenow 3 years ago

Most upvoted 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}}" and aria-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

unazko on Sep 27, 2021