search

SAP / ui5-webcomponents

UI5 Web Components - the enterprise-flavored sugar on top of native APIs! Build SAP Fiori user interfaces with the technology of your choice.
https://sap.github.io/ui5-webcomponents/
Apache License 2.0
1.55k stars 266 forks source link

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

Closed lormanlau closed 3 years ago

lormanlau commented 3 years ago

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

Screen Shot 2021-02-26 at 9 51 14 AM

Context

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 commented 3 years ago

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 commented 3 years ago

Hi @ilhan007,

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

ilhan007 commented 3 years ago

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 commented 3 years ago

Yes that would be fine

ilhan007 commented 3 years ago

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 commented 3 years ago

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