search

SAP / ui5-webcomponents

UI5 Web Components - the enterprise-flavored sugar on top of native APIs! Build SAP Fiori user interfaces with the technology of your choice.
https://sap.github.io/ui5-webcomponents/
Apache License 2.0
1.56k stars 267 forks source link

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

Closed Hubery-Shen closed 3 years ago

Hubery-Shen commented 3 years ago

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

aaaaaa

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 commented 3 years ago

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 commented 3 years ago

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 commented 3 years ago

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 commented 3 years ago

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

Screen Shot 2021-02-04 at 4 08 08 PM

ilhan007 commented 3 years ago

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 commented 3 years ago

Hi, @ilhan007

Thanks you for you quick reply.

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

unazko commented 3 years ago

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 commented 3 years ago

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 ?