ui5-shellbar-item text not being added into the item

[lormanlau]

Describe the bug
ui5-shellbar-item text property is not added into the ui5-button-text span. I am trying to add text so that screen readers can read out loud what the button is.

To reproduce
Steps to reproduce the behavior:

1. Create a ui5-shellbar
2. added a ui5-shellber-item with a text property
3. observe that the ui5-button-text is empty

Isolated example
https://codesandbox.io/s/gracious-sinoussi-zngoi?file=/src/App.js

Expected behavior
Screenreaders to read the ui5-shellbar-item button text or ability to add aira-label

Screenshots

Context

• UI5 Web Components version 1.0.0-rc.12
• OS/Platform: MacOS 11.2.1
• Browser (if relevant): Chrome Version 88.0.4324.192 (Official Build) (x86_64)
• Other information: None

Affected components (if known)
ui5-shellbar
ui5-shellbar-item

Log output / Any errors in the console
None

Organization: (if applicable)
SAP SuccessFactors

Priority: (optional) (Low, Medium, High or Very High)
Medium

Business impact: (mandatory for "Very High")

[ilhan007]

Hello @lormanlau

The "text" is displayed when the respective item overflows. e.g the text is visible only in the overflow popover
and this is by design. Shrink the browser to make the items overflow and you will be able to see the text.
You can also see that the openui5 equivalent behaves in the same way: https://sapui5untested.int.sap.eu2.hana.ondemand.com/uilib-sample/test-resources/testsuite/testframe.html#/uilib-sample/test-resources/sap/f/ShellBar.html

If you still need to display the text even when the item is part of the bar (not overflowed), we will need a design approval, you will need to file a request to the Fiori 3 Visual Designers. I can provide the details offline.

[lormanlau]

Hi @ilhan007,

displaying the text is not necessary, but I do need a way to add screen reader support to ui5-shellbar-item.

[ilhan007]

Would it be fine if we use the value of the "text" property to set it as aria-label? Or you need an API to define different texts?

[lormanlau]

Yes that would be fine

[ilhan007]

Hello @SAP/ui5-webcomponents-topic-p
the ShellBarItem does not display its text when it is not part of the overflow and it's fine as it has to be icon only.
The thing is that we don't provide any aria-label. One option is to reuse the value of the ShellBarItem's "text" property and set it as aria-label (this is fine to the author). But as far as I can see in openui5 we rather use the built-in accessible name of the used icon. Here, in the ShellBarItem web component we use buttons, not icons (as in openui5), and that might be difficult. So, please assess the options and at the end make the ShellBarItem accessible for the assistive technologies.

[dobrinyonkov]

Hello @lormanlau,

the correct way to make the ui5-shellbar-item (icon only button) accessible is to set the title attribute. This way you will have a visual tooltip, and the screen readers will read its value.

https://codesandbox.io/s/admiring-stallman-0elji

Kind Regards,
Dobrin