Skip to content

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.

Sign up for GitHub

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

Merged
merged 4 commits into from
Nov 21, 2024
Merged

Updated "Scrollable content can be reached with sequential focus navigation" [0ssw9k]: scrollable regions pass when there is an open modal #2219

Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
6d3bcdb
scrollable regions should pass when there is an open modal
giacomo-petri Oct 24, 2024
ed00c15
Update _rules/scrollable-element-keyboard-accessible-0ssw9k.md
giacomo-petri Oct 24, 2024
6938463
Update scrollable-element-keyboard-accessible-0ssw9k.md
giacomo-petri Oct 24, 2024
10c9c33
Merge branch 'develop' into giacomo-petri-scrollable-regions-modal
WilcoFiers Nov 21, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
46 changes: 45 additions & 1 deletion _rules/scrollable-element-keyboard-accessible-0ssw9k.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -39,7 +39,10 @@ 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][].
For each target element, at least one of the following is true:
- the element is included in [sequential focus navigation][]; or
- the element has a [descendant][] in the [flat tree][] that is included in [sequential focus navigation][]; or
- the element is [inert][].

## Assumptions

Expand Down Expand Up @@ -108,6 +111,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>
const openDialog = () => {
ppDialog.showModal();
myFrame.tabIndex = '-1'
Copy link
Member

@carlosapaduarte carlosapaduarte Oct 24, 2024 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Do we need this line (and line 149)?
I don't think so, but just wanting to make sure.

Copy link
Collaborator Author

Choose a reason for hiding this comment

The 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
Expand Down Expand Up @@ -262,6 +305,7 @@ This `iframe` element is not a scrollable element, but instead contains a nested
[sequential focus navigation]: https://html.spec.whatwg.org/multipage/interaction.html#sequential-focus-navigation 'HTML sequential focus navigation, 2020/04/03'
[flat tree]: https://drafts.csswg.org/css-scoping/#flat-tree 'CSS draft, flat tree, 2020/04/03'
[computed]: https://www.w3.org/TR/css-cascade-3/#computed-value
[inert]: #inert 'Definition of Inert'
[overflow]: https://www.w3.org/TR/CSS22/visufx.html#overflow
[padding]: https://www.w3.org/TR/CSS22/box.html#propdef-padding
[padding-left]: https://www.w3.org/TR/CSS22/box.html#propdef-padding-left
Expand Down
Loading