[BUG][A11Y][Popover] When ui5-popover ( modal mode ) is opened, background page elements are still accessible by screen reader and can still be focused

[Hubery-Shen]

Dear colleagues,
I am from SuccessFactors Web Experience Shanghai team.

Bug Description
Version: Both in 1.0.0-rc.11 & 0.27.3
When ui5-popover ( modal mode ) is opened, background page elements are still accessible by screen reader and can still be focused

You can reproduce this issue in this example: https://github.com/Hubery-Shen/UI5-WebComponent-Examples

Expected Result
Screen reader should only be able to read the contents of the modal dialog when its open and everything in the background should be hidden from screen readers and can not be focused.

[nnaydenow]

Hello @Hubery-Shen,

Could you please take a look on this sample to check if the issue reproducible because I'm not able to reproduce the it:
https://codesandbox.io/s/ui5-webcomponents-forked-w3tyl

I can't reproduce even in the React app that you provide.

Regards,
Nayden

[Hubery-Shen]

Hi @nnaydenow
Thanks you for your reply, is it convenient for you to have a call with me, i will show you the operation

Regards,
Hubery

[Martotko]

Hi @Hubery-Shen,

Thanks for the option. It's not convenient to have a call due to the time difference. Please just describe step by step what you are pressing so as to reproduce the issue.

Best regards,
Martin

[Hubery-Shen]

Hi @Martotko @nnaydenow @unazko

I have prepared another demo to reproduce this problem
The version of ui5-webcomponent inside this demo is 0.29.1

link is: https://github.wdf.sap.corp/pages/xweb/goalmanagementx/app.html?mock#/goal-list?targetUserId=undefined&templateId=22&templateType=tgm

Reproduce step:

1. Click the start tour button
2. After click the start tour button, you will see the ui-popover ( text: "Choose the tabs to switch between your performance and development goal plans" included in this ui5-popover )
3. Click the area outside the ui5-popover
4. Press the tab key
5. Then you will find i still can focus to the elements below the ui5-popover, although i have already set modal=true attribute to ui5-popover

[ilhan007]

Hi, @Hubery-Shen
@nnaydenow and @Martotko are no longer dispatchers, @unazko is the one who is dispatching the issues this week,
so he will try to reproduce the issue whenever he can.

[Hubery-Shen]

Hi, @ilhan007

Thanks you for you quick reply.

Thanks for your support, looking forward to your good news @unazko

[unazko]

Hello @Hubery-Shen and @SAP/ui5-webcomponents-topic-rd,

Apologies for the delay in my response.

The issue is easily reproducible in the given application:
https://github.wdf.sap.corp/pages/xweb/goalmanagementx/app.html?mock#/goal-list?targetUserId=undefined&templateId=22&templateType=tgm

Steps to reproduce as described by @Hubery-Shen.

You could reproduce the issue in the snipped as well:
https://codesandbox.io/s/ui5-webcomponents-forked-w3tyl

Steps to reproduce:

1. Press over the "Open popover" button
2. Press over " Newsletter subscription" or "popover-content" section
3. Press out of the popover area, which is greyed
4. Press tab keyboard key

Observe that the focus is moved to the first "Test" button.
This should not be possible and the screen reader will announce the button text, which is not a proper behavior.

Analysis:
There is an overlay over the rest of the elements in the page, managed via proper z-index.
When users press over the overlay:
<div class="ui5-block-layer" tabindex="1" style="z-index: 101;"></div>
it set as an active element.
After that when pressing the tab keyboard key, then the next focusable element in the page is set as an active element.

Possible solution would be to make the overlay not a focusable element or fire "focusin" event for the modal popover component, in order to return the focus back.

Could you please take over.

Best Regards,
Boyan

[Hubery-Shen]

Hello @Hubery-Shen and @SAP/ui5-webcomponents-topic-rd,

Apologies for the delay in my response.

The issue is easily reproducible in the given application:
https://github.wdf.sap.corp/pages/xweb/goalmanagementx/app.html?mock#/goal-list?targetUserId=undefined&templateId=22&templateType=tgm

Steps to reproduce as described by @Hubery-Shen.

You could reproduce the issue in the snipped as well:
https://codesandbox.io/s/ui5-webcomponents-forked-w3tyl

Steps to reproduce:

1. Press over the "Open popover" button
2. Press over " Newsletter subscription" or "popover-content" section
3. Press out of the popover area, which is greyed
4. Press tab keyboard key

Observe that the focus is moved to the first "Test" button.
This should not be possible and the screen reader will announce the button text, which is not a proper behavior.

Analysis:
There is an overlay over the rest of the elements in the page, managed via proper z-index.
When users press over the overlay:
<div class="ui5-block-layer" tabindex="1" style="z-index: 101;"></div>
it set as an active element.
After that when pressing the tab keyboard key, then the next focusable element in the page is set as an active element.

Possible solution would be to make the overlay not a focusable element or fire "focusin" event for the modal popover component, in order to return the focus back.

Could you please take over.

Best Regards,
Boyan

Hi @unazko

Thanks for your analyze
Apologies for the delay in my response.

This issue is still available in 0.29.4
Does this bug fix be released ?