a11y issue with ui5-panel when screen reader(NVDA) is on

[lateefsofi]

Describe the bug

1. When using ui5-panel with custom header and screen reader(NVDA) turned on, Expand/Collapse button is not getting triggered with the keyboard. If screen reader is turned off, then it is working as expected.
2. Title of the panel is not announced by screen reader.

To reproduce
Steps to reproduce the behavior:

1. Go to https://codesandbox.io/s/ui5-webcomponents-forked-4btpb?file=/index.html:0-1023
2. Turn on screen reader and Navigate to ui5-panel Expand/Collapse button
3. Try to press enter or space but event is not getting fired.
4. Title of the panel is not announced.

Isolated example
https://codesandbox.io/s/ui5-webcomponents-forked-4btpb?file=/index.html:0-1023

Expected behavior

1. Expand/Collapse button should be triggered even when screen reader is turned on.
2. Title of the panel should be announced by screen reader.

Context

• UI5 Web Components version: 0.29.6
• OS/Platform: NA
• Browser (if relevant): NA
• Other information: NA

Affected components (if known)
ui5-panel

Organization: (if applicable)
Success Factors

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

[d3xter666]

Hi colleagues,

Indeed, when JAWS is running, the expand button does not work.

Regarding, the header, there are no indications that it should be read. There are no aria attributes at all.

[elenastoyanovaa]

Hello @langered ,

Regarding the issue in NVDA: nvaccess/nvda#7898
This is a known issue regarding NVDA, the screen reader would swallow space/enter keys, it has nothing to do with ui5 web components. I would suggest you to manually switch to NVDA focus mode.

Regarding the issue that the title is not read out. Since you are using a header slot, we do not have the information if the header slot has a title and which is the element representing the title. For this case, we created the accessibleName property - with it you could provide an accessible name to the root element (the one with the accessible role). By providing the accessible name, the panel will be read out on focus. You can check and test it here https://sap.github.io/ui5-webcomponents/master/playground/components/Panel/

[lateefsofi]

@elenastoyanovaa accessible name can be used to announce title but activating Expand/Collapse button is not only issue with NVDA but JAWS as well

[elenastoyanovaa]

@lateefsofi In order to activate buttons in JAWS you should be in application mode, not with virtual cursor on. Are you sure that you are testing in application mode? You should press Ins+Z and should hear "Virtual cursor off". If the button is not activated even with application mode, please give us some recording, or information regarding jaws version, browser versions and steps to reproduce and reopen the issue.

[lateefsofi]

Thanks @elenastoyanovaa with "Virtual cursor off" it works in JAWS.