SF_ACC ui5-shellbar Option for default expanded state of search

[bonniegso]

Feature Request Description

The current search field in the ui5-shellbar is collapsed by default. We are requesting for the option to have the search expanded on initial load. We are currently achieving this for our use case by setting the show-search-field attribute in the shellbar, however, because show-search-field is a private API and not built for this use case, it does not fulfill accessibility requirements.

This is the original issue that was filed for the accessibility requirement to be fulfilled #5674.

The issue is that "Search button expanded" is read upon focus of the search button in the shell bar. When the search input is visible by default, this causes confusion because the user did not take any action to expand the search input.

Proposed Solution

Ideally, the solution would be to implement the search button as a toggle button https://sap.github.io/ui5-webcomponents/playground/components/ToggleButton/ so that "pressed" and "unpressed" states are read instead of "expanded" and "collapsed" since it is usually expected that expanded content has some sort of text or menu.

Proposed Alternatives

If the above is not possible, then a way to customize or set the aria-expanded value or customize the aria label for the search button would also suffice.

Additional Context

Steps to reproduction:

1. Go to https://stackblitz.com/edit/js-6v9yvk?file=index.js,index.html.
2. Turn on JAWS screen reader
3. Navigate to the search button on the first example of the shell bar using your keyboard
4. Observe that "Search button expanded" is read

Priority

• Low
• Medium
• High
• Very High

A clear and concise description of the impact/urgency of the required feature.

Stakeholder Info (if applicable)

• Organization: SAP SuccessFactors
• Business impact: Accessibility

[ilhan007]

Hello @SAP/ui5-webcomponents-topic-p this is a feature request in your direction

[dobrinyonkov]

Internal reference: BGSOFUIPIRIN-5940

[bonniegso]

Hi @dobrinyonkov ,

Thanks for adding showSearchField available for consumption. However, the original accessibility issue is still not resolved since "expanded" is still read when the search button is focused. Are either of the proposed solutions in the description possible? At the very least, a way to set the aria-expanded value by default on page load would be sufficient. Or even exposing a property to add an aria-label to the search button.

Bonnie