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 ARIA state or property is permitted [5c01ea]: clarified global property is allowed except when prohibited and added examples #2192

Open
wants to merge 6 commits into
base: develop
Choose a base branch
from
Open
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
1 change: 1 addition & 0 deletions __tests__/spelling-ignore.yml
Original file line number Diff line number Diff line change
Expand Up @@ -239,6 +239,7 @@
- unitless
- luminance
- disambiguated
- superclass
- grey

# Parts of Unicode
Expand Down
35 changes: 33 additions & 2 deletions _rules/aria-state-or-property-permitted-5c01ea.md
Original file line number Diff line number Diff line change
Expand Up @@ -109,7 +109,7 @@ The `aria-busy` [state][] is a [global][] [state][] that is [supported][] by all

#### Passed Example 4

The `aria-label` [property][] is a [global][] [property][]. It is allowed on any [semantic role][].
The `aria-label` [property][] is a [global][] [property][]. It is allowed on any [semantic role][], except where specifically prohibited.

```html
<div role="button" aria-label="OK">✓</div>
Expand Down Expand Up @@ -149,7 +149,7 @@ The `aria-controls` [property][] is [required][] for the [semantic][semantic rol

#### Passed Example 9

The `aria-label` [property][] is [global][]. It is allowed on any [semantic role][], including roles from the [WAI-ARIA Graphics Module](https://www.w3.org/TR/graphics-aria-1.0). This rule is applicable to SVG elements.
The `aria-label` [property][] is [global][]. It is allowed on any [semantic role][], except where specifically prohibited, including roles from the [WAI-ARIA Graphics Module](https://www.w3.org/TR/graphics-aria-1.0). This rule is applicable to SVG elements.

```html
<svg xmlns="http://www.w3.org/2000/svg" role="graphics-object" width="100" height="100" aria-label="yellow circle">
Expand All @@ -173,6 +173,29 @@ This `input` element does not have an [explicit role][] of `textbox`, but the `a
<label>Password<input type="password" aria-required="true"/></label>
```

#### Passed Example 12

This `div` element has an [explicit role][] of `switch`; the `aria-required` [property][] is [inherited][] from the `checkbox` [superclass role](https://www.w3.org/TR/wai-aria-1.2/#superclassrole).

```html
<div role="switch" aria-checked="false" tabindex="0" aria-required="true">
<span class="label">Notifications</span>
<span class="switch" style="position: relative; display: inline-block; top: 6px; border: 2px solid black; border-radius: 12px; height: 20px; width: 40px;">
<span style="position: absolute; top: 2px; left: 2px; display: inline-block; border: 2px solid black; border-radius: 8px; height: 12px; width: 12px; background: black;"></span>
</span>
<span class="on" aria-hidden="true" style="display: none;">On</span>
<span class="off" aria-hidden="true">Off</span>
</div>
```

#### Passed Example 13

This `div` element has an [explicit role][] of `separator`. The `aria-valuemin`, `aria-valuemax` and `aria-valuenow` [properties][property] are [supported][] for the `separator` role when the element is [focusable][].

```html
<div role="separator" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" tabindex="0">My separator</div>
```

### Failed

#### Failed Example 1
Expand All @@ -199,6 +222,14 @@ The `aria-label` property is [prohibited][] for an element with a `generic` role
<div aria-label="Bananas"></div>
```

#### Failed Example 4

The `aria-label` property is [prohibited][] for an element with a `paragraph` role.

```html
<div role="paragraph" aria-label="Bananas"></div>
```

### Inapplicable

#### Inapplicable Example 1
Expand Down
Loading