Button: accessible name (defined by accessibleNameRef) is not up to date #13101
Description
Describe the bug
Button refers to a label by accessibleNameRef attribute.
When this label is modified, the screenreader does not always read the last text of the label.
In some cases, it reads the original text which is out of date.
Isolated Example
https://stackblitz.com/edit/github-ixy86sre?file=src%2FApp.tsx
Reproduction steps
1.The example manages a counter. It shows 3 elements: the counter in a label; an Increment button and a Reset button.
2.Click 3 times on the Increment button.
The title is now: "The current counter value is 3"
On the increment button, the screenreader reads:
"The current counter value is 3 Button <====== CORRECT
increment tt
To activate press Enter."
On the reset button, the screenreader reads:
"The current counter value is 0 Button <==== NOT CORRECT
reset tt
To activate press Enter."
Expected Behaviour
On both buttons, the screenreader should read the same label: "The current counter value is 3"
Screenshots or Videos
No response
UI5 Web Components for React Version
1.24 and V2 in demo
UI5 Web Components Version
1.24
Browser
Chrome
Operating System
No response
Additional Context
By observing the DOM, I can see that the accessibleNameRef is actually converted into a aria-label attribute in the shadow root. However, for the second button, this attribute is not updated when the label changes. It keeps the original value.
Relevant log output
Organization
SAP
Declaration
- I’m not disclosing any internal or sensitive information.