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

[gurkirpalgill]

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

[MarcusNotheis]

Hey @gurkirpalgill,
I just saw that you are using arial-label in the sample and not aria-label. Is this a typo only here in the example or is it in your implementation as well?

[gurkirpalgill]

Hey @gurkirpalgill,
I just saw that you are using arial-label in the sample and not aria-label. Is this a typo only here in the example or is it in your implementation as well?

It's not a typo, I tried to use accessibleName instead of aria-label, but then typescript gives this error:

[Lukas742]

Hi @gurkirpalgill

what Marcus meant is that you wrote arial-label with an "l" instead of aria-label, but since it seems like you are using typescript, I guess this is a typo just in the example. Also the accessibleName is only available with rc.15 of the @ui5/webcomponents, so if you want to use this prop instead, they would need to downport it to the respective sf branch.

For the issue itself, I'll forward it to the UI5 Web Components repo, since the affected component is developed by our colleagues there.

[gurkirpalgill]

my mistake, that's a typo. issue still exists when using nvda screen reader. screen reader is reading the same text twice.

another example, when the focus is on ">" icon of flexible column layout and Enter key is pressed

Please downport "accessibleName" as additional non breaking option to be consistent with the documentation.

[unazko]

Hello @gurkirpalgill,

Could you please edit the following snipped:
https://codesandbox.io/s/strange-davinci-boc66?file=/src/index.js
so the described issue is reproducible.
The mentioned @ui5/webcomponents and @ui5/webcomponents-react are already chosen.
Also have you tried reproducing the issue via jaws 2019 or jaws 2021 screen reader?

Best Regards,
Boyan

[gurkirpalgill]

@unazko
Edited your snipped and saved as:

https://codesandbox.io/s/adoring-faraday-5zlkp
of full screen:
https://5zlkp.csb.app/

As you can see in the screenshot below, the issue is reproducible.

[georgimkv]

Hi @SAP/ui5-webcomponents-topic-b
Can you have a look at this?

Kind regards,
Georgi

[gurkirpalgill]

any updates on this?

[Neeeko]

hi, our release is due October 1st, do you have any updates on this issue? Thanks!

[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

[nnaydenow]

Hi @gurkirpalgill,

Could you check if the issue persist in newer version where accessible-name property is introduced?

Regards,
Nayden

[unazko]

Hello @nnaydenow,

I forgot to mention that this issue isn't reproducible in the newer versions of the project.
The reason is that in the ui5-button ariaLabel property is renamed to accessibleName.
ui5-flexible-column-layout though in the FlexibleColumnLayout.hs is still suppling to its ui5-button element an aria-label attribute instead of the new accessible-name attribute.
The final result is if the aria-label isn't given as argument at all.
So unfortunately the issue isn't fixed in the master branch as this is the way the ui5-button works, but gets hidden instead.

Best Regards,
Boyan

[nnaydenow]

Hi @unazko ,

Even if I change the attribute (will link PR soon) the tooltip is read too when I test the issue with NVDA.

You can check this snippix:
https://jsbin.com/zaketakufa/1/edit?html,output

Seems like screen reader specific issue.

@dobrinyonkov could you check this?

Regards,
Nayden

[unazko]

Hi @nnaydenow,

Yes, this is expected. That is why the suggested workaround from our team accessibility expert is to remove the aria-label attribute.

Best Regards,
Boyan

[dobrinyonkov]

Hi all,

I would say that the suggested solution is the right thing to do. There shouldn't be title and aria-label attributes with the same value as it will get announced twice. Some screen readers might be smart enough to detect this and read the value once, some might not.
Especially necessary for icon-only buttons is the tooltip (title attribute). So we should be OK to remove the redundant aria-label attrtibute.

Regards,
Dobrin

[ilhan007]

We have recently merged a fix.
We will close the issue once the fix is released.

[gurkirpalgill]

@ilhan007 when will it be released in successfactors versions?

[ilhan007]

@gurkirpalgill it is released with 0.31.21