ui5-shellbar "Expanded" is being read on focus of the search button icon

[bonniegso]

Bug Description

"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.

Expected Behavior

The search button should not read "expanded" in its initial state. One suggestion 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. If this 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.

Steps to Reproduce

1. Go to 'https://sap.github.io/ui5-webcomponents/playground/components/ShellBar/'
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

Context

• UI5 Web Components version: 1.6.0
• OS/Platform: Windows 10 and MacOS Monterey
• Browser: Google Chrome
• Affected component: ui5-shellbar

Priority

• Low
• Medium
• High
• Very High

The priority indicates the severity of the issue. To set the appropriate priority consider the following criteria:

• Breaks entire application or system - High or Very High
• Accessibility issue - Medium or High
• Functional issue - Medium or High
• Visual issue - Low or Medium

Note: The priority might be re-evaluated by the issue processor.

Stakeholder Info (if applicable)

• Organization: SAP SuccessFactors
• Business impact: Accessibility

[unazko]

Hello @bonniegso,

I wasn't able to reproduce the issue via the provided sample nor on local environment by switching to 1.6 release branch.
At my side on Windows OS with JAWS 2021/2022 and NVDA I receive the following announcement:
"Search button collapsed"

At my side when I inspect the DOM the aria-expanded attribute has value false.
Is that the case at your side?

Could you provide a sample on which the issue could be reproduced or an isolated snipped like this one:
https://codesandbox.io/s/71r1x5o51q?fontsize=14&module=%2Findex.html

Best Regards,
Boyan

[bonniegso]

Hi @unazko ,

Here is a sample where you can reproduce the issue.https://stackblitz.com/edit/js-6v9yvk?file=index.js,index.html

Thanks,
Bonnie

[ilhan007]

Hello @SAP/ui5-webcomponents-topic-p could you take a look?

The dispatcher could not reproduce it, let's have a try with one more person.

Thanks,
ilhan

[dobrinyonkov]

Hi @bonniegso

From your latest example we see that you have set the private API show-search-field.

The accessibility spec and the component are not implemented considering initially expanded search fileds.
Please, if you need this functionality public, open a new feature request.

Thanks,
Dobrin