Skip to content

Commit 392e15b

Browse files
Jym77Jym77
committed
Extract UA controlled rule
1 parent 25aa483 commit 392e15b

File tree

5 files changed

+228
-1
lines changed

5 files changed

+228
-1
lines changed

‎__tests__/spelling-ignore.yml

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -135,7 +135,7 @@
135135
- ozplayer
136136
- GitHub
137137

138-
# Test case anamolies
138+
# Test case anomalies
139139
- brewitt-taylor
140140
- level2-frame1
141141
- level1-frame2
@@ -237,6 +237,7 @@
237237
- focusability
238238
- unitless
239239
- luminance
240+
- checkboxes # this seems to be the correct plural
240241
- disambiguated
241242

242243
# Parts of Unicode

‎_rules/target-size-ua-control-vcup8d.md

Lines changed: 136 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,136 @@
1+
---
2+
id: vcup8d
3+
name: Interactive component has size controlled by User Agent
4+
rule_type: atomic
5+
description: |
6+
This rule checks that elements that can receive pointer events have a size controlled by the user agent.
7+
accessibility_requirements:
8+
wcag21:2.5.5: # Target size (enhanced) (AAA)
9+
secondary: 'This success criterion is **less strict** than this rule. This is because the rule does not consider the size of the elements. Some of the failed examples may satisfy this success criterion.'
10+
wcag22:2.5.8: # Target Size (Minimum) (AA)
11+
secondary: 'This success criterion is **less strict** than this rule. This is because this criterion has a lower size requirement. Some of the failed examples may satisfy this success criterion.'
12+
input_aspects:
13+
- DOM Tree
14+
- CSS Styling
15+
acknowledgments:
16+
authors:
17+
- Jean-Yves Moyen
18+
---
19+
20+
## Applicability
21+
22+
This rule applies to any [HTML element][namespaced element] which [can be targeted by a pointer event][].
23+
24+
## Expectation
25+
26+
Each test target is a [User Agent controlled component][].
27+
28+
## Assumptions
29+
30+
- This rule assumes that [focusable][] `widget` are effectively clickable. If a widget is [focusable][] without being clickable, it may fail this rule while [Success Criterion 2.5.5 Target Size (enhanced)][sc255] and [Success Criterion 2.5.8 Target Size (minimum)][sc258] are satisfied.
31+
32+
## Accessibility Support
33+
34+
Hit testing isn't properly defined, and this has been an [issue in the CSS specification](https://github.com/w3c/csswg-drafts/issues/2325) for years. Therefore, different User Agents may perform it differently, resulting in different [clickable areas][clickable area] for the same element. As of February 2024, the ACT rules Community Group is not aware of actual cases resulting in significantly different [clickable areas][clickable area].
35+
36+
## Background
37+
38+
### Bibliography
39+
40+
- [Understanding Success Criterion 2.5.5: Target Size (enhanced)](https://www.w3.org/WAI/WCAG22/Understanding/target-size-enhanced.html)
41+
- [Understanding Success Criterion 2.5.8: Target Size (Minimum)](https://www.w3.org/WAI/WCAG22/Understanding/target-size-minimum.html)
42+
43+
## Test Cases
44+
45+
### Passed
46+
47+
#### Passed Example 1
48+
49+
This checkbox is an [User Agent controlled component][].
50+
51+
```html
52+
<p id="accept">
53+
<input aria-labelledby="accept" type="checkbox" />
54+
I agree with the terms and conditions.
55+
</p>
56+
```
57+
58+
### Failed
59+
60+
#### Failed Example 1
61+
62+
These radio buttons have their size modified by the author and are therefore not [User Agent controlled components][user agent controlled component]. Their [clickable area][] is too small.
63+
64+
```html
65+
<style>
66+
input[type='radio'] {
67+
width: 1em;
68+
height: 1em;
69+
}
70+
</style>
71+
<fieldset>
72+
<legend>Pick a color (required)</legend>
73+
<label><input type="radio" name="color" value="blue" />Blue</label>
74+
<label><input type="radio" name="color" value="yellow" />Yellow</label>
75+
</fieldset>
76+
```
77+
78+
#### Failed Example 2
79+
80+
This `button` is not a [User Agent controlled component][].
81+
82+
```html
83+
<style>
84+
#target {
85+
width: 35px;
86+
height: 35px;
87+
border-radius: 0;
88+
}
89+
</style>
90+
<button id="target" onclick="alert('hello')">Hi</button>
91+
```
92+
93+
### Inapplicable
94+
95+
#### Inapplicable Example 1
96+
97+
These `input` elements and `button` are `disabled` and therefore not [focusable][].
98+
99+
```html
100+
<fieldset disabled>
101+
<label>First name <input /></label><br />
102+
<label>Last name <input /></label><br />
103+
<button>submit</button>
104+
</fieldset>
105+
```
106+
107+
#### Inapplicable Example 2
108+
109+
This button cannot be [targeted by a pointer event][] because it is entirely covered by the `div` element with a dashed red border.
110+
111+
```html
112+
<head>
113+
<title>Inapplicable Example</title>
114+
<link rel="stylesheet" href="/test-assets/target-size/shared-styles.css" />
115+
<style>
116+
.cover {
117+
top: 0;
118+
height: 50px;
119+
width: 500px;
120+
}
121+
</style>
122+
</head>
123+
<body>
124+
<button onclick="alert('hello')">Say Hello</button>
125+
126+
<div class="cover bad highlight"></div>
127+
</body>
128+
```
129+
130+
[can be targeted by a pointer event]: #can-be-targeted-by-pointer-event 'Definition of Can be Targeted by a Pointer Event'
131+
[focusable]: #focusable 'Definition of Focusable'
132+
[namespaced element]: #namespaced-element 'Definition of Namespaced Element'
133+
[sc255]: https://www.w3.org/TR/WCAG22/#target-size-enhanced 'Success Criterion 2.5.5 Target Size (enhanced)'
134+
[sc258]: https://www.w3.org/TR/WCAG22/#target-size-minimum 'Success Criterion 2.5.8 Target Size (minimum)'
135+
[targeted by a pointer event]: #can-be-targeted-by-pointer-event 'Definition of Can be Targeted by a Pointer Event'
136+
[user agent controlled component]: #user-agent-controlled-component 'Definition of UI Controlled Component'

‎pages/glossary/can-be-targeted-by-pointer-event.md

Lines changed: 36 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,36 @@
1+
---
2+
title: Can be target by a pointer event
3+
key: can-be-targeted-by-pointer-event
4+
unambiguous: true
5+
objective: true
6+
input_aspects:
7+
- CSS styling
8+
- DOM tree
9+
---
10+
11+
An element _can be targeted by pointer events_ when all the following conditions are true:
12+
13+
- the element is a [semantic `widget`][semantic role]; and
14+
- the element is [focusable][]; and
15+
- the element [computed value][] of the `pointer-events` CSS property is `auto`; and
16+
- through scrolling, it is possible to have parts of the element's [border box][] which intersect the viewport and are not entirely covered by the [border boxes][] of elements with greater [computed][computed value] `z-index` and a [computed][computed value] `pointer-events` of `auto`.
17+
18+
#### Background
19+
20+
This definition tries to capture which HTML elements can actually react to pointer events. It is not possible to have an exact definition of these for two main reasons:
21+
22+
- Sometimes, the element that handles the event is not the element that appear to react to it, but an ancestor (or descendant) capturing the event during propagation or bubbling. In the most extreme case, the `body` element of a page could be the only one with an event handler, acting differently depending on where the event actually occurred. In such a case, a button would be perceived by users as something that can be targeted by a pointer event, while technically it is the `body` element which is targeted.
23+
- It is not possible to query the list of event listeners on a given elements. Some User Agents offer way to monitor events fired at a given element, but none offer a way to query for event listeners. Additionally, an event listener might ultimately do nothing and thus, for users, the corresponding element wouldn't look like it can be targeted by pointer events (since it effectively wouldn't react to them).
24+
25+
As a consequence, this definition has these two known limitations:
26+
27+
- Not all HTML elements that can actually be targeted by a pointer event match this definition. For example, an author may build custom buttons without giving them an appropriate role or making them [focusable][]; or content overflowing the [border box][] of an element is clickable, but that element might not match the definition if the [border box][] is off-screen. Elements that can actually be targeted by pointer events but do not match this definition likely fail either [Success Criterion 4.1.2 Name, Role, Value][sc412] or [Success Criterion 2.1.1 Keyboard][sc211].
28+
- Not all HTML elements that match this definition can actually be targeted by a pointer event. For example, when the actual clickable area does not cover the full [border box][] and is entirely covered by other elements, or when the element has an event handler that does nothing. Elements that match this definition but cannot actually be targeted by pointer events likely fail [Success Criterion 2.5.6 Concurrent Input Mechanisms][sc256].
29+
30+
[border box]: https://www.w3.org/TR/css-box-3/#border-box 'CSS definition of Border Box'
31+
[computed value]: https://www.w3.org/TR/css-cascade-3/#computed 'CSS definition of Computed Value'
32+
[focusable]: #focusable 'Definition of Focusable'
33+
[sc211]: https://www.w3.org/TR/WCAG22/#keyboard 'Success Criterion 2.1.1 Keyboard'
34+
[sc256]: https://www.w3.org/TR/WCAG22/#concurrent-input-mechanisms 'Success Criterion 2.5.6 Concurrent Input Mechanisms'
35+
[sc412]: https://www.w3.org/TR/WCAG22/#name-role-value 'Success Criterion 4.1.2 Name, Role, Value'
36+
[semantic role]: #semantic-role 'Definition of Semantic Role'

‎pages/glossary/user-agent-controlled.md

Lines changed: 31 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
1+
---
2+
title: User-Agent Controlled Component
3+
key: user-agent-controlled-component
4+
unambiguous: true
5+
objective: true
6+
input_aspects:
7+
- CSS styling
8+
- DOM tree
9+
---
10+
11+
A _User-Agent Controlled Component_ is an [HTML element][namespace element] for which all the following are true:
12+
13+
- the element has an [implicit role][] which is a [semantic `widget`][semantic role]; and
14+
- the [computed values][] of the element's `height` and `width` CSS properties do not depend on content provided by the author; and
15+
- the [computed values][] of the element's `height` and `width` CSS properties do not depend on any CSS property with a [cascaded value][] with "Author" [origin][].
16+
17+
#### Examples
18+
19+
Typically, radio buttons or checkboxes are User-Agent controlled, until an author does change their dimensions.
20+
21+
Links and buttons usually aren't, because their (text) content is provided by the author and the width depends on it.
22+
23+
Days in a calendar widget build with an `<input type="date">` element are also User-Agent controlled since their content isn't provided by the author and their dimension do not depend on values provided by the author.
24+
25+
Directly setting the `height` or `width` CSS properties makes an element not User-Agent controlled. Changing the `max-height` or `min-width` properties can make it not User-Agent controlled, if the added constraint impacts the [computed][computed values] `height` or `width` properties (i.e., if the `height` would be larger than `max-height` and is restricted by it; or if the `width` would be smaller than `min-width` and is changed by it).
26+
27+
[cascaded value]: https://www.w3.org/TR/css-cascade-5/#cascade-value 'CSS definition of computed value'
28+
[computed values]: https://www.w3.org/TR/css-cascade-3/#computed 'CSS definition of Computed Value'
29+
[implicit role]: #implicit-role 'Definition of Implicit Role'
30+
[origin]: https://drafts.csswg.org/css-cascade-5/#cascading-origins 'CSS definition of Cascading Origin'
31+
[semantic role]: #semantic-role 'Definition of Semantic Role'

‎test-assets/target-size/shared-styles.css

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
.highlight {
2+
position: absolute;
3+
z-index: 0;
4+
}
5+
6+
.good {
7+
border: green solid 1px;
8+
}
9+
.bad {
10+
border: red dashed 1px;
11+
}
12+
13+
.highlightable {
14+
position: relative;
15+
z-index: 5;
16+
}
17+
18+
.placeholder {
19+
background-color: transparent;
20+
border: dashed 2px black;
21+
padding: 0;
22+
position: absolute;
23+
}

0 commit comments

Comments
 (0)