Skip to content
Merged
Show file tree
Hide file tree
Changes from all commits
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
60 changes: 30 additions & 30 deletions _rules/focusable-no-keyboard-trap-standard-nav-a1b64e.md
Original file line number Diff line number Diff line change
Expand Up @@ -88,43 +88,43 @@ use [standard keyboard navigation](#standard-keyboard-navigation) using the Esca
```html
<div>Main page content with <a href="#">some link</a></div>
<div aria-hidden="true">
<a href="#" id="sentinelBefore" style="position:absolute; top:-999em"
>Upon receiving focus, this focus sentinel should wrap focus to the bottom of the modal</a
>
<a href="#" id="sentinelBefore" style="position:absolute; top:-999em"
>Upon receiving focus, this focus sentinel should wrap focus to the bottom of the modal</a
>
</div>
<div
id="sampleModal"
role="dialog"
aria-label="Sample Modal"
aria-modal="true"
style="border: solid black 1px; padding: 1rem;"
id="sampleModal"
role="dialog"
aria-label="Sample Modal"
aria-modal="true"
style="border: solid black 1px; padding: 1rem;"
>
<label>First and last name <input id="dialogFirst"/></label><br />
<button id="closeButton">Close button</button>
<label>First and last name <input id="dialogFirst"/></label><br />
<button id="closeButton">Close button</button>
</div>
<div aria-hidden="true">
<a href="#" id="sentinelAfter" style="position:absolute; top:-999em"
>Upon receiving focus, this focus sentinel should wrap focus to the top of the modal</a
>
<a href="#" id="sentinelAfter" style="position:absolute; top:-999em"
>Upon receiving focus, this focus sentinel should wrap focus to the top of the modal</a
>
</div>
<script>
window.addEventListener('load', () => {
document.getElementById('dialogFirst').focus()
})
document.getElementById('sentinelBefore').addEventListener('focus', () => {
document.getElementById('closeButton').focus()
})
document.getElementById('sentinelAfter').addEventListener('focus', () => {
document.getElementById('dialogFirst').focus()
})
document.getElementById('closeButton').addEventListener('click', () => {
document.getElementById('sampleModal').style.display = 'none'
})
document.getElementById('sampleModal').addEventListener('keydown', evt => {
if (evt.key === 'Escape') {
document.getElementById('sampleModal').style.display = 'none'
}
})
window.addEventListener('load', () => {
document.getElementById('dialogFirst').focus();
})
document.getElementById('sentinelBefore').addEventListener('focus', () => {
document.getElementById('closeButton').focus()
})
document.getElementById('sentinelAfter').addEventListener('focus', () => {
document.getElementById('dialogFirst').focus()
})
document.getElementById('closeButton').addEventListener('click', () => {
document.getElementById('sampleModal').style.display = 'none'
})
document.getElementById('sampleModal').addEventListener('keydown', (evt) => {
if (evt.key === "Escape") {
document.getElementById('sampleModal').style.display = 'none';
}
})
</script>
```

Expand Down
13 changes: 7 additions & 6 deletions _rules/presentational-children-no-focusable-content-307n5z.md
Original file line number Diff line number Diff line change
Expand Up @@ -43,7 +43,7 @@ This rule assumes that elements that are part of [sequential focus navigation][]

Several major browsers ignore the WAI-ARIA requirements on [presentational children][] for most or sometimes all roles, or in presence of focusable content. Since some browsers implement presentational children while others do not, pages failing this rule may only be problematic with some browsers.

This rule is often misunderstood as applying to elements with an _explicit_ role of `presentation`. In fact, this rule only applies to elements which have been given an _implicit_ role of `presentation` through the [presentational children][] mechanism. Similarly, this rule does not apply to elements with `aria-hidden="true"`.
This rule is often misunderstood as applying to elements with an _explicit_ role of `presentation`. In fact, this rule only applies to elements which have been given an _implicit_ role of `presentation` through the [presentational children][] mechanism. Similarly, this rule does not apply to elements with `aria-hidden="true"`.

### Related rules

Expand Down Expand Up @@ -97,12 +97,13 @@ This element with the `menuitemcheckbox` role has an `input` element as a descen

#### Passed Example 4

This `<button>` element has an `a` element as a [child][]. The `a` element has no `href` attribute, so it isn't included in [sequential focus navigation][]. So this `button` element passes the rule.
This `<button>` element has an `a` element as a [child][]. The `a` element has no `href` attribute, so it isn't included in [sequential focus navigation][]. So this `button` element passes the rule.

```html
<button><a>button/link</a></button>
```


### Failed

#### Failed Example 1
Expand Down Expand Up @@ -139,7 +140,7 @@ This element with the `menuitemcheckbox` role has a checkbox as a child. Because

#### Failed Example 4

This element with the `tab` role contains an `a` element. The `tab` role has [presentational children][]. The `a` element is included in [sequential focus navigation][]. So the element with the `tab` role fails the rule. (This tablist implementation is non-functional for users. It's not meant to function - it's only meant to show roles.)
This element with the `tab` role contains an `a` element. The `tab` role has [presentational children][]. The `a` element is included in [sequential focus navigation][]. So the element with the `tab` role fails the rule. (This tablist implementation is non-functional for users. It's not meant to function - it's only meant to show roles.)

```html
<ul role="tablist">
Expand All @@ -151,7 +152,7 @@ This element with the `tab` role contains an `a` element. The `tab` role has [pr

#### Failed Example 5

This element with the `img` role contains an `a` element. The `img` role has [presentational children][]. The `a` element is included in [sequential focus navigation][]. So the element with the `img` role fails the rule.
This element with the `img` role contains an `a` element. The `img` role has [presentational children][]. The `a` element is included in [sequential focus navigation][]. So the element with the `img` role fails the rule.

```html
<span role="img" aria-label="some ASCII art">****** This ASCII art ******* <a href="#">contains a link.</a></span>
Expand All @@ -161,7 +162,7 @@ This element with the `img` role contains an `a` element. The `img` role has [pr

#### Inapplicable Example 1

None of the roles that build this semantic table structure (`table` for `table`, `row` for `tr`, `columnheader` for `th`, and `cell` for `td`) have [presentational children][]. So this rule does not apply to them.
None of the roles that build this semantic table structure (`table` for `table`, `row` for `tr`, `columnheader` for `th`, and `cell` for `td`) have [presentational children][]. So this rule does not apply to them.

```html
<table>
Expand All @@ -180,7 +181,7 @@ None of the roles that build this semantic table structure (`table` for `table`,

#### Inapplicable Example 2

This `a` element has a `link` role, which does not have [presentational children][]. So this `a` element does not fail this rule, because it's inapplicable. To have a "focusable element within a focusable element" like this is a bad practice, but this rule doesn't directly check for it.
This `a` element has a `link` role, which does not have [presentational children][]. So this `a` element does not fail this rule, because it's inapplicable. To have a "focusable element within a focusable element" like this is a bad practice, but this rule doesn't directly check for it.

```html
<a href="https://w3.org"><span tabindex="0">W3C Website</span></a>
Expand Down
2 changes: 1 addition & 1 deletion _rules/role-attribute-valid-value-674b10.md
Original file line number Diff line number Diff line change
Expand Up @@ -167,7 +167,7 @@ This `role` attribute is empty ("").
This `role` attribute is only [ASCII whitespace][].

```html
<input type="text" role=" " aria-label="field name" />
<input type="text" role=" " aria-label="field name"/>
```

#### Inapplicable Example 5
Expand Down
4 changes: 2 additions & 2 deletions _rules/role-required-states-and-properties-4e8ab6.md
Original file line number Diff line number Diff line change
Expand Up @@ -121,7 +121,7 @@ This `combobox` has the required properties `aria-controls` and `aria-expanded`.

```html
<label for="tag_combo" id="tag_label">Tag</label>
<input type="text" id="tag_combo" role="combobox" aria-expanded="true" aria-controls="popup_listbox" />
<input type="text" id="tag_combo" role="combobox" aria-expanded="true" aria-controls="popup_listbox"/>
<ul role="listbox" id="popup_listbox" aria-labelledby="tag_label">
<li role="option">Zebra</li>
<li role="option" id="selected_option">Zoom</li>
Expand Down Expand Up @@ -197,7 +197,7 @@ This `div` does not have a [semantic role](#semantic-role).
This `checkbox` has an [implicit semantic role](#implicit-role) that is identical to the [explicit semantic role](#explicit-role). This allows native HTML `checked` attribute to apply.

```html
<input type="checkbox" role="checkbox" aria-label="Checkbox name" />
<input type="checkbox" role="checkbox" aria-label="Checkbox name"/>
```

#### Inapplicable Example 3
Expand Down
13 changes: 6 additions & 7 deletions _rules/scrollable-element-keyboard-accessible-0ssw9k.md
Original file line number Diff line number Diff line change
Expand Up @@ -40,9 +40,8 @@ This rule applies to any [HTML element][] that has [visible][] [children][] in t

## Expectation

For each target element, at least one of the following is true:

- the element is included in [sequential focus navigation][]; or
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][].

Expand Down Expand Up @@ -120,7 +119,7 @@ This [scrollable][] `section` element is [inert][] because of the modal dialog,
```html
<style>
dialog:-internal-dialog-in-top-layer::backdrop {
background: rgba(1, 1, 1, 0.8);
background: rgba(1, 1, 1, 0.8);
}
</style>
<section style="height: 100px; width: 500px; overflow: scroll;" tabindex="0">
Expand All @@ -145,11 +144,11 @@ This [scrollable][] `section` element is [inert][] because of the modal dialog,
</dialog>
<script>
const openDialog = () => {
ppDialog.showModal()
ppDialog.showModal();
myFrame.tabIndex = '-1'
}
ppDialog.addEventListener('close', () => (myFrame.tabIndex = 0))
window.addEventListener('DOMContentLoaded', openDialog)
ppDialog.addEventListener('close', () => myFrame.tabIndex = 0)
window.addEventListener('DOMContentLoaded', openDialog);
</script>
```

Expand Down