ui5-button: aria-labels not working for screen readers

[ee92]

Describe the bug
ui5-buttons with aria-label or aria-labelledby are being read out by their text content instead of the aria labels.

To reproduce
Steps to reproduce the behavior:

1. Go to https://sap.github.io/ui5-webcomponents/playground/components/Button/
2. While using any screen reader (mac VoiceOver, JAWS, NVDA), tab over the icon buttons that have aria-labelledby.
3. Notice they just read out 'button' or 'Positive Action button' or 'Negative Action button' and ignore the aria labels.

Expected behavior
Adding aria-label or aria-labelledby attributes should conform to the w3c web content accessibility guidelines.

Screenshots

[fifoosid]

Hi @ee92

In the example you have provided the reason for the texts not to be read is because they have inline style display:none. If you remove it then the aria-labelledby attribute is read.

If you wish to achieve this in your app and hide the texts as well you could add the following styles to your texts(or hide them from the viewport by any other way instead of display: none):

position: absolute;
left: -99999px;
visibility: hidden;

Best rergards,
Filip

[ee92]

@fifoosid visible texts are not read either. You can try removing the display:none and it doesn't fix the problem.

[ee92]

@fifoosid I tried the fix you made for this but get an error. Check this comment I added to the PR: #1446 (comment)

[fifoosid]

Both aria-label & aria-labelledby are supported now