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

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

[unazko]

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

[ilhan007]

@gurkirpalgill it is released with 0.31.21