Setting id attribute on db-ux custom elements breaks screenreaders #5462
Description
Which generators are affected?
- All
- HTML
- React
- Angular
- Vue
- Web components
- Power Apps
Reproduction case
Screenreaders, like the one built into Windows 11, are not able to read certain text from db-ux custom elements if the id attribute is present on the element.
For example in this case, the screenreader is unable to read the "Label of username" text from the label attribute if the id attribute is present:
<db-input id="username" label="Label of username"></db-input>
And in this example the screenreader is also not able to read the text "My Switch" out loud:
<db-switch id="my-switch">My Switch</db-switch>
If the id attribute is removed, the screenreader works as expected.
Interestingly, attributes like placeholder are not affected by the id attribute and always work as expected.
Expected Behaviour
Screenreaders should be able to read all accessibility related text from a db-ux element regardless whether the id attribute is set or not.
Screenshots
No response
Browser version
Chrome
Add any other context about the problem here.
No response
Which DB business unit do you work for?
DB Systel GmbH (please name your customer below)
”DB Systel” please enter your customer / ”other” please enter your area or business unit.
DB InfraGO AG
What project are you working on?
EBuLa Rückfallebene (IRE)