Modal dialog accessibility issue with scrolling

[mato-a]

Hi all,

I'd like to report accessibility bug in modal dialog related to scrolling behavior.

When modal dialog is opened and you scroll on it with mouse to bottom and keep scrolling, screen under modal window will scroll down. When you scroll with mouse to top of the window and keep scrolling, screen under modal window will scroll up. Same applies when you use up and down arrow keys.

It is also possible to scroll background content when modal dialog doesn't have any scrollbar of its own - both with mouse and up and down arrow keys.

According the specs the windows under a modal dialog are inert: https://www.w3.org/TR/wai-aria-practices/#dialog_modal

Sandbox: https://codesandbox.io/s/vanilla-js-scale-7vt842

[felix-ico]

Hi @mato-a, thank you for reporting this issue and the detailed explanation. I will have a look at this

[mato-a]

Hi @felix-ico, the issue can be reproduced also in the lastest version: 3.0.0-beta.103

[felix-ico]

hi @mato-a there is now an attribute allow-injecting-style-to-body that can be set to true to enable this. This is set to false by default, perhaps we should change this to follow the specs.

see: https://codesandbox.io/s/vanilla-js-scale-forked-noq9dk?file=/index.html:844-873

[mato-a]

Hi @felix-ico, Thanks, it works after adding the attribute allow-injecting-style-to-body. Yeah, I think that the default should be set to true.

[mato-a]

Hi @felix-ico

There is another issue related to this. The css rule overflow-y: auto is set to the body of the modal, which makes it scrollable. However there is an issue how to make this scrollable with the keyboard. Firefox automatically makes the scrollable div focusable by keyboard navigation, Chrome does not.

There is an official proposal provided by w3: https://www.w3.org/WAI/standards-guidelines/act/rules/0ssw9k/proposed/

[verdody]

Hi. The issue of the last comment from @mato-a is still persisting. Do you have a solution for this?