-
Notifications
You must be signed in to change notification settings - Fork 75
Updated "Scrollable content can be reached with sequential focus navigation" [0ssw9k]: scrollable regions pass when there is an open modal #2219
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Changes from 1 commit
6d3bcdb
ed00c15
6938463
10c9c33
File filter
Filter by extension
Conversations
Jump to
Diff view
Diff view
There are no files selected for viewing
Original file line number | Diff line number | Diff line change |
---|---|---|
|
@@ -39,7 +39,7 @@ This rule applies to any [HTML element][] that has [visible][] [children][] in t | |
|
||
## Expectation | ||
|
||
Each test target is either included in [sequential focus navigation][] or has a [descendant][] in the [flat tree][] that is included in [sequential focus navigation][]. | ||
Each test target is either included in [sequential focus navigation][] or has a [descendant][] in the [flat tree][] that is included in [sequential focus navigation][], unless the test target is [inert][]. | ||
giacomo-petri marked this conversation as resolved.
Show resolved
Hide resolved
|
||
|
||
## Assumptions | ||
|
||
|
@@ -108,6 +108,46 @@ This [scrollable][] `section` element contains a link that is included in [seque | |
</section> | ||
``` | ||
|
||
#### Passed Example 3 | ||
|
||
This [scrollable][] `section` element is [inert][] because of the modal dialog, so neither the `section` nor its [descendant][] elements are included in [sequential focus navigation][]. | ||
|
||
```html | ||
<style> | ||
dialog:-internal-dialog-in-top-layer::backdrop { | ||
background: rgba(1, 1, 1, 0.8); | ||
} | ||
</style> | ||
<section style="height: 100px; width: 500px; overflow: scroll;" tabindex="0"> | ||
<h1>WCAG 2.1 Abstract</h1> | ||
<p> | ||
Web Content Accessibility Guidelines (WCAG) 2.1 covers a wide range of recommendations for making Web content more | ||
accessible. Following these guidelines will make content more accessible to a wider range of people with | ||
disabilities, including accommodations for blindness and low vision, deafness and hearing loss, limited movement, | ||
speech disabilities, photosensitivity, and combinations of these, and some accommodation for learning disabilities | ||
and cognitive limitations; but will not address every user need for people with these disabilities. These guidelines | ||
address accessibility of web content on desktops, laptops, tablets, and mobile devices. Following these guidelines | ||
will also often make Web content more usable to users in general. | ||
<button id="ppButton" onclick="openDialog()">Read more about WCAG 2.2</button> | ||
</p> | ||
</section> | ||
<dialog id="ppDialog" aria-labelledby="dialogLabel"> | ||
<h2 id="dialogLabel">WCAG 2.2</h2> | ||
<p> | ||
<a href="https://www.w3.org/TR/WCAG22/">WCAG 2.2</a> | ||
</p> | ||
<button id="cancel" onclick="ppDialog.close()">Cancel</button> | ||
</dialog> | ||
<script> | ||
carlosapaduarte marked this conversation as resolved.
Show resolved
Hide resolved
|
||
const openDialog = () => { | ||
ppDialog.showModal(); | ||
myFrame.tabIndex = '-1' | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Do we need this line (and line 149)? There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. The intention was to create a real case scenario, but I’m fine with removing them if we believe they could cloud the outcome. |
||
} | ||
ppDialog.addEventListener('close', () => myFrame.tabIndex = 0) | ||
window.addEventListener('DOMContentLoaded', openDialog); | ||
</script> | ||
``` | ||
|
||
### Failed | ||
|
||
#### Failed Example 1 | ||
|
Uh oh!
There was an error while loading. Please reload this page.