UI5 / UI5/webcomponents

[ToolbarButton]: a11y nvda screen reader does not announce label correctly

Open
#10,562 5 comments 0 reactions 1 assignee View on GitHub

@unazko is already working on this.

Since Jan 16, 2025.

ACC consulting Medium Prio TOPIC B
Dominant language
TypeScript
Stars
1.8k
Forks
285
Avg merge
3d 2h
Merged PRs (30d)
59

Description

Bug Description

https://sap.github.io/ui5-webcomponents/components/ToolbarButton/
upon pressing Enter on the icon, If accessibleName attribute is provided, nvda announces it twice. first, the value of accessibleName and then default value "Exit Full Screen" which is confusing to the user.

<ToolbarButton
  key="exitFullScreen"
  data-testid="exit-full-screen"
  icon={"exit-full-screen"}
  design={ButtonDesign.Transparent}
  onClick={handleExitFullscreenButtonClick}
  ref={exitFullscreenBtnRef}
  accessibleName="Exit Full Screen"
/>

Also if you tab to the icon it announces: "Exit Full Screen button"
When you press Enter it announces: "Exit Full Screen"

Affected Component

ToolbarButton

Expected Behaviour

When accessibleName attribute has value, nvda should not announce the default value e.g. "Exit Full Screen". Also when user presses Enter on the icon announce 'button' as well after the text.
Correct behavior is already observed in SAP UI5 here:
https://sapui5.hana.ondemand.com/#/entity/sap.f.FlexibleColumnLayout/sample/sap.f.sample.FlexibleColumnLayoutWithTwoColumnStart

Also if accessibleName is not used nvda should announce the default button name on tabbing. It could be the same it shows on pressing Enter

Isolated Example

No response

Steps to Reproduce

...

Log Output, Stack Trace or Screenshots

Image

Image

Priority

Medium

UI5 Web Components Version

2.x

Browser

Chrome

Operating System

No response

Additional Context

No response

Organization

No response

Declaration
  • I’m not disclosing any internal or sensitive information.

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.