[Accessibility][Screen Reader - Dialog]: In scan mode, Narrator focus moves out from the dialog and lands on background elements when navigate back by "Up" key on "Blocking Dialog".

[TestAccessibilityGIT]

Test environment: ​
Platform: Windows 10​
OS Build : Build 18334.19h1_release.190205-1505
Browser: Microsoft Edge 44.18334.1.0
Screen reader: Narrator​
​
Repro steps:​

1. Open URL.
2. Navigate to "Surfaces" button in left navigation pane and activate it.
3. Navigate to "Dialog" button and activate it.
4. Navigate to "Open Dialog" button under "Blocking Dialog".
5. Navigate the dialog with scan mode
6. Observe that Narrator focus in scan mode moves out of the dialog when navigating back with "Up" key of keyboard.

Actual result: ​
Narrator focus in scan mode moves out of the "All Emails Together" dialog when navigating back with "Up" key of keyboard.

Expected result:​
Narrator focus in scan mode should reside inside the "All Emails Together" dialog when navigating back with "Up" key of keyboard.

Observation:
Same issue repro with NVDA+Chrome

Attachment:
Bug_8134_1; Bug_8134_2.
@micahgodbolt

Tags:
HCL-MSTeams; Shifts; HCL-Fabric; A11yMAS; MAS4.2.10; Web-Chrome; Web-Edge

[leddie24]

@micahgodbolt or @JasonGore , do you have any insight on this issue? I did some digging around and I'm not sure if this is an Narrator issue, or a Fabric issue. Dialog uses FocusTrapZone with a isClickableOutsideFocusTrap={false} if it's a blocking dialog, however even testing a simple FocusTrapZone with that prop set to false allows the Narrator scan mode to visit outside elements.

I found a stackoverflow issue mentioning the usage of aria-modal but it doesn't seem widely supported at the moment. A workaround solution that some users suggested is to add aria-hidden on elements that are supposed to be blocked while the Dialog is active (in our scenario, it would probably be the <Fabric> component wrapper, since the Modal is appended to the end of the DOM.

https://stackoverflow.com/questions/54288847/aria-modal-not-supported-in-jaws-18

Any suggestions here?

[TestAccessibilityGIT]

+Amit From: Eddie Liu <notifications@github.com> Sent: Friday, March 8, 2019 3:42 PM To: OfficeDev/office-ui-fabric-react <office-ui-fabric-react@noreply.github.com> Cc: Arvind Prakash (HCL America Inc) <v-arvpra@microsoft.com>; Author <author@noreply.github.com> Subject: Re: [OfficeDev/office-ui-fabric-react] [Accessibility][Screen Reader - Dialog]: In scan mode, Narrator focus moves out from the dialog and lands on background elements when navigate back by "Up" key on "Blocking Dialog". (#8134) @micahgodbolt<https://nam06.safelinks.protection.outlook.com/?url=https%3A%2F%2Fgithub.com%2Fmicahgodbolt&data=02%7C01%7Cv-arvpra%40microsoft.com%7C555f98d719844806029c08d6a41fab10%7C72f988bf86f141af91ab2d7cd011db47%7C1%7C0%7C636876853257631695&sdata=2LVQSVQv0qUy4asvnzbMtTFmg1PomZrX3qjgWF1dC3c%3D&reserved=0> or @JasonGore<https://nam06.safelinks.protection.outlook.com/?url=https%3A%2F%2Fgithub.com%2FJasonGore&data=02%7C01%7Cv-arvpra%40microsoft.com%7C555f98d719844806029c08d6a41fab10%7C72f988bf86f141af91ab2d7cd011db47%7C1%7C0%7C636876853257641703&sdata=zxRGyl5Y1c4HbLel3sCmDU%2FIuuxjVu4PP8RD9w1su%2Bo%3D&reserved=0> , do you have any insight on this issue? I did some digging around and I'm not sure if this is an Narrator issue, or a Fabric issue. Dialog uses FocusTrapZone with a isClickableOutsideFocusTrap={false} if it's a blocking dialog, however even testing a simple FocusTrapZone with that prop set to false allows the Narrator scan mode to visit outside elements. I found a stackoverflow issue mentioning the usage of aria-modal but it doesn't seem widely supported at the moment. A workaround solution that some users suggested is to add aria-hidden on elements that are supposed to be blocked while the Dialog is active (in our scenario, it would probably be the <Fabric> component wrapper, since the Modal is appended to the end of the DOM. https://stackoverflow.com/questions/54288847/aria-modal-not-supported-in-jaws-18<https://nam06.safelinks.protection.outlook.com/?url=https%3A%2F%2Fstackoverflow.com%2Fquestions%2F54288847%2Faria-modal-not-supported-in-jaws-18&data=02%7C01%7Cv-arvpra%40microsoft.com%7C555f98d719844806029c08d6a41fab10%7C72f988bf86f141af91ab2d7cd011db47%7C1%7C0%7C636876853257641703&sdata=l08cxfXBSbmJA7%2F0pc6HZYlOxgnx74KwzIVEKpUTZbQ%3D&reserved=0> Any suggestions here? — You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub<https://nam06.safelinks.protection.outlook.com/?url=https%3A%2F%2Fgithub.com%2FOfficeDev%2Foffice-ui-fabric-react%2Fissues%2F8134%23issuecomment-471115456&data=02%7C01%7Cv-arvpra%40microsoft.com%7C555f98d719844806029c08d6a41fab10%7C72f988bf86f141af91ab2d7cd011db47%7C1%7C0%7C636876853257651712&sdata=%2BZKmAzlKMvNgOVCVbidcvMcvmfLnRrVg30JKzo9nPGg%3D&reserved=0>, or mute the thread<https://nam06.safelinks.protection.outlook.com/?url=https%3A%2F%2Fgithub.com%2Fnotifications%2Funsubscribe-auth%2FAUUZoD2aDPlaIwNNHdwOh847EcGN2RhBks5vUvVLgaJpZM4bT3y6&data=02%7C01%7Cv-arvpra%40microsoft.com%7C555f98d719844806029c08d6a41fab10%7C72f988bf86f141af91ab2d7cd011db47%7C1%7C0%7C636876853257661724&sdata=ApVUxijFSTD9PVUixfXWGbUno6wfVUmDUCOXTUigCy8%3D&reserved=0>.

[JasonGore]

Does aria-modal properly trap even in scan mode? It might be worth testing against #8216 as well to see if behavior is the same or different with the FTZ refactor.

Either way, scan mode functions to some extent by ignoring intended behavior and not all browsers support aria-modal. This may be something we have to check with the MS Edge/Narrator teams about as we're probably not the first to have encountered this issue.

[leddie24]

It looks like aria-modal is already in place on the Popup component (see line 167 in Modal.base.tsx), and it doesn't properly trap in scan mode. I tried testing against your link you provided earlier (http://fabricweb.z5.web.core.windows.net/pr-deploy-site/refs/pull/8216/merge/fabric-website-resources/dist/index.html#/examples/datepicker) and it doesn't trap the focus in the Dialog either.

[JasonGore]

If aria-modal does not trap this is likely an MS Edge or Narrator bug. May be worth going through their issue repos to see if they've already captured this and enter a bug if not.

[leddie24]

Closing this issue. This is a dupe of #6422 and #6535. We already have the correct aria in place (aria-modal=true). There isn't much we can do aside from wait for a fix from the Narrator team to respect the aria-modal attribute.