New issue
Advanced search Search tips
Note: Color blocks (like or ) mean that a user may not be available. Tooltip shows the reason.

Issue 716592 link

Starred by 4 users

Issue metadata

Status: Assigned
Owner:
Cc:
Components:
EstimatedDays: ----
NextAction: ----
OS: Mac
Pri: 2
Type: Bug
Team-Accessibility



Sign in to add a comment

aria-modal only works if aria-label is present

Reported by m...@muanchiou.com, Apr 28 2017

Issue description

UserAgent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_12_4) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/58.0.3029.81 Safari/537.36

Steps to reproduce the problem:
1. Open modal with `aria-labelledby` or with no labels
2. Try navigate out of the modal with VoiceOver
3. See that you can still navigate out of the modal despite `aria-modal="true"`

What is the expected behavior?
Should not be able to navigate outside of the modal with VoiceOver if `aria-modal="true"` regardless of `aria-label`

What went wrong?
`aria-modal="true"` only works if `aria-label` is present. Using `aria-labelledby` doesn't help.

Did this work before? N/A 

Does this work in other browsers? Yes

Chrome version: 58.0.3029.81  Channel: stable
OS Version: OS X 10.12.4
Flash Version: Shockwave Flash 25.0 r0

The aria-modal feature in all 3 modals in the test case work in Safari 10.1 with VoiceOver on Mac.
--
Blink>Accessibility option isn't available in the "Which component does this fall under?" dropdown.
 
ariamodal.html
1.8 KB View Download

Comment 1 by shrike@chromium.org, Apr 28 2017

Components: Blink>Accessibility UI>Accessibility
Filed issue monorail:2635 for the bug wizard missing Blink>Accessibility.  Thanks!
Cc: krajshree@chromium.org
Labels: Needs-Feedback
Tested the issue on Mac 10.12.4 using chrome latest stable version #58.0.3029.110.

Following are the steps followed to reproduce the issue.
------------
1. Added chromevox extension to chrome.
2. Opened the attached ariamodel.html file.
3. Clicked all the 3 buttons and also navigated out of the modal.
4. Observed that the chromevox spelled sentences as in the dialog box.

Attaching screen cast for reference.

Reporter@ - Could you please verify the screencast and please let us know if anything missed from our side. If possible please provide an expected behaviour screen cast explaining about the issue.

Thanks...!!
716592.mp4
3.6 MB View Download

Comment 4 by m...@muanchiou.com, May 11 2017

According to the spec:

> The aria-modal attribute is used to indicate that the presence of a "modal" element precludes usage of other content on the page.

When a modal is open, user *should not* be able to interact with content outside of the modal using assistive softwares.

From your screencast it looks like aria-modal is not supported at all with ChromeVox. 

As mentioned, I tested with VoiceOver on Mac. See the attached screencast.

- I navigated solely with VoiceOver keys.

- Expected behavior: when I open the first modal, I was not able to navigate out of the modal to focus on the buttons. When I attempted to navigate out, my focus stayed on "aria-modal works here" and "Close button", and there's an error sound effect.

- Unexpected behavior: when I open the second and third modal, I was able to navigate out of the modal, onto the buttons before modal and the text box after the modal.

---

I also attached another screencast to show that all 3 modals work in Safari.
ariamodal.mov
12.8 MB Download
ariamodal-safari.mov
7.8 MB Download
Project Member

Comment 5 by sheriffbot@chromium.org, May 11 2017

Labels: -Needs-Feedback
Thank you for providing more feedback. Adding requester "krajshree@chromium.org" to the cc list and removing "Needs-Feedback" label.

For more details visit https://www.chromium.org/issue-tracking/autotriage - Your friendly Sheriffbot
Labels: Needs-Feedback
Tested this issue using latest chrome #58.0.3029.110 on Mac as per the steps mentioned in comment #0

@muanchiou: Could you please find the attached screen cast and let us know that's the you're facing?

It would help us for further triaging of the issue.

Thanks,
May 12 2017 12-09 PM.webm
1.2 MB View Download

Comment 7 by m...@muanchiou.com, May 12 2017

> @muanchiou: Could you please find the attached screen cast and let us know that's the you're facing?

Unfortunately no. From the screencast it looks like you might be navigating with tab keys? It is not supposed to work. 

To reproduce the issue, navigate using solely with VoiceOver keys — control + option + left arrow/right arrow.
Project Member

Comment 8 by sheriffbot@chromium.org, May 12 2017

Cc: sandeepkumars@chromium.org
Labels: -Needs-Feedback
Thank you for providing more feedback. Adding requester "sandeepkumars@chromium.org" to the cc list and removing "Needs-Feedback" label.

For more details visit https://www.chromium.org/issue-tracking/autotriage - Your friendly Sheriffbot
Labels: Needs-Feedback
Please find the below attached screen cast and let us know the behavior, is the same issue you're facing?

If possible please share a expected screen cast and try upgrading your Chrome to the latest version and check if you still face the issue?

Thanks,
May 29 2017 4-55 PM.webm
2.5 MB View Download
Components: -UI>Accessibility UI>Accessibility>Compatibility
Labels: -Needs-Feedback
Status: Available (was: Unconfirmed)
Thanks @sandeepkumars, yes that screen cast shows that Chrome is not working correctly. As mentioned in the original bug report, if you try the same page in Safari it behaves correctly, so this is definitely our bug.

No more information is needed here. Thanks me@muanchiou.com for the bug report.

Labels: triage-alice
Labels: -triage-alice
The label actually has little bearing on this; it's actually just it ensures the dialog is treated as a group by VO. We need to implement aria-modal properly on Mac as specced (and as previously discussed on https://codereview.chromium.org/2684543002).

Comment 13 by lauriat@google.com, May 18 2018

Any ETA for this? Looks like no movement in quite a while.
I just tried out the attached file in the latest stable version of Safari with VoiceOver and Safari/VoiceOver seems pretty broken to me. By pressing "Stop interacting with" I can land on the dialog itself and then use linear navigation to reach the rest of the page. Visually it shows me highlighting other content in the page, but VoiceOver doesn't actually read it.

I also tried this example, same issue:

https://www.w3.org/TR/2017/NOTE-wai-aria-practices-1.1-20171214/examples/dialog-modal/dialog.html

Can anyone else confirm this behavior?

If so, it seems like Safari/VoiceOver has pretty poor support for aria-modal and I'm not sure if we want to try to copy Safari's support.


Comment 15 by lauriat@google.com, May 18 2018

+1 to just making aria-modal work and ignoring how Safari works (or doesn't).

Interestingly, Safari keeps my VoiceOver focus from navigating outside at all in the attached HTML file, but not in the example you linked to, so it definitely has something broken there.
alertdialog-modal.html
5.0 KB View Download

Comment 16 Deleted

Any other information I can provide to help move this along?
Any other information I can provide to help move this along?
Owner: dmazz...@chromium.org
Status: Assigned (was: Available)
Chrome: 69.0.3497.81 (Official build) (64-bit)
Chrome: 71.0.3548.0 (Official build) Canary (64-bit)
MacOS:  10.13.3

I can stop interacting with the modal and activate another modal while the first modal is still open.

In Safari, I am restricted to the first modal until closed.
We should check in Mojave and see if there are updates to Safari+VoiceOver's support of aria-modal.

Sign in to add a comment