Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

ui5-dialog: Accessibility: using header slot causes broken aria-labelledby reference

See original GitHub issue

Describe the bug The outermost <section> element in the ui5-dialog’s shadow DOM has aria-labelledby="ui5-popup-header". When using the ui5-dialog’s header slot instead of header-text, any elements could be placed inside ui5-popup-header. Simply referring to the header container in this scenario would render aria-labelledby as useless.

To reproduce Steps to reproduce the behavior:

Add ui5-dialog to the DOM
Use header slot with ui5-button and ui5-title
Note that ui5-popup-header in the ui5-dialog’s shadow DOM refers to the header container, not the actual element containing the header text.

Isolated example https://codesandbox.io/s/ui5-webcomponents-forked-rosol?file=/index.html

Expected behavior Not sure if this is the most elegant solution, but it might be good to expose an aria-label value as a parameter so that the developer can pass in a string as the screenreader label.

Screenshots