Skip to content
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

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

Merged
merged 4 commits into from
Nov 21, 2024
Merged
Changes from 1 commit
Commits
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
42 changes: 41 additions & 1 deletion _rules/scrollable-element-keyboard-accessible-0ssw9k.md
Original file line number Diff line number Diff line change
Expand Up @@ -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
giacomo-petri marked this conversation as resolved.
Show resolved Hide resolved

## Assumptions

Expand Down Expand Up @@ -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'
Copy link
Member

@carlosapaduarte carlosapaduarte Oct 24, 2024

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
Loading