SAP/ui5-webcomponents-ngx

Shellbar items cannot be given accessible names

bpan4 opened this issue · 2 comments

bpan4 commented

Bug Description

When a ui5-shellbar-item element is used to create a button inside ui5-shellbar, there is no way to set an accessible name for the button that is generated.

Expected Behavior

There should be a way to set an accessible name for ui5-shellbar-item elements.

Steps to Reproduce

  1. Create a ui5-shellbar with at least one ui5-shellbar-item item.
  2. Use either a screen reader or generate a Lighthouse report
  3. Notice that the ui5-shellbar-item item is reported only as a button without an accessible name that would provide more details on the functionality of the button

Isolated Example

<ui5-shellbar primary-title="Airlines" [show-notifications]="true" notifications-count="2">
    <ui5-shellbar-item icon="palette" aria-label="Change themes"></ui5-shellbar-item>
</ui5-shellbar>

Context

  • UI5 Web Components version: 1.11.0
  • UI5 Web Components for Angular version: 0.1.0-rc.0
  • Angular Version: 15
  • OS/Platform: MacOS
  • Browser: Chrome
  • Affected component: ui5-shellbar, ui5-shellbar-item

Log Output / Stack Trace / Screenshots

image
Part of the report generated by Lighthouse. The palette icon is a ui5-shellbar-item in the shellbar.

Priority

  • Low
  • Medium
  • High
  • Very High
g-cheishvili commented

This can not be solved on our end, created ticket on ui5 webcomponents repository

g-cheishvili commented

use ui5-shellbar-item[title] to specify a title for the button. Problem disappears