From 77a76117f6784e916d7f8464cfbdcec33278f89e Mon Sep 17 00:00:00 2001 From: Jean-Yves Moyen Date: Thu, 20 Feb 2025 15:33:04 +0100 Subject: [PATCH] Add 'inline' definition --- __tests__/spelling-ignore.yml | 1 + _rules/target-size-enhanced-gi8qkf.md | 56 ++++++++++++++++++------- pages/glossary/essential-target-size.md | 4 +- pages/glossary/in-a-block-of-text.md | 19 +++++++++ pages/glossary/rendered-on-a-line.md | 29 ------------- 5 files changed, 64 insertions(+), 45 deletions(-) create mode 100644 pages/glossary/in-a-block-of-text.md delete mode 100644 pages/glossary/rendered-on-a-line.md diff --git a/__tests__/spelling-ignore.yml b/__tests__/spelling-ignore.yml index cdd2e6d306..bc8caa654b 100644 --- a/__tests__/spelling-ignore.yml +++ b/__tests__/spelling-ignore.yml @@ -281,6 +281,7 @@ - 10px - 15px - 16px +- 17px - 18px - 20px - 24px diff --git a/_rules/target-size-enhanced-gi8qkf.md b/_rules/target-size-enhanced-gi8qkf.md index 6519add807..ee44ebc4db 100644 --- a/_rules/target-size-enhanced-gi8qkf.md +++ b/_rules/target-size-enhanced-gi8qkf.md @@ -26,7 +26,7 @@ acknowledgments: This rule applies to any [HTML element][namespaced element] which is [observed as a pointer events target][], except when one of the following is true: - the element has an [always empty clickable area][]; or -- the element is [rendered on a line]; or +- the element is [in a block of text][]; or - the element is [User Agent controlled][user agent controlled component]; or - the element has [essential size][]. @@ -469,6 +469,18 @@ The `#small` button has a [clickable area][] of only 35×35px. The `#large` butt #### Failed Example 6 +These links are have a [clickable area][] of approximately 184×17px and 267×17px. There ancestor [block box][] is created by the `li` elements which contain no other [text node][] (except for the `::marker` pseudo-element), hence they are not [in a block of text][]. + +```html +

Useful links for the ACT rules group:

+ +``` + +#### Failed Example 7 + This button only has a [clickable area][] of approximately 20×45px, because it is obscured by the `div` with a dashed red border. The solid green lines hint at how a 44×44px area would fit inside the button, but not inside the non-obscured part. ```html @@ -517,7 +529,7 @@ This button only has a [clickable area][] of approximately 20×45px, because it ``` -#### Failed Example 7 +#### Failed Example 8 This button only has a [clickable area][] of approximately 20×45px, because it is obscured by the `div` with a dashed red border. Even though the `div` is scrollable, it is not scrollable fully out of the way and always obscures the button. The solid green lines hint at how a 44×44px area would fit inside the button, but not inside the never obscured part. @@ -580,7 +592,7 @@ This button only has a [clickable area][] of approximately 20×45px, because it ``` -#### Failed Example 8 +#### Failed Example 9 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. @@ -598,7 +610,7 @@ These radio buttons have their size modified by the author and are therefore not ``` -#### Failed Example 9 +#### Failed Example 10 The zoom buttons do not have [essential size][]; they are too small. The pin (red square) on this map has [essential size][]. @@ -639,7 +651,7 @@ Location of ACT rules headquarters: /> ``` -#### Failed Example 10 +#### Failed Example 11 The [clickable area][] of this button does not contain a 44×44px [aligned rectangle][]. @@ -655,7 +667,7 @@ The [clickable area][] of this button does not contain a 44×44px [aligned recta ``` -#### Failed Example 11 +#### Failed Example 12 The [clickable area][] of this button does not contain a 44×44px [aligned rectangle][]. @@ -670,7 +682,7 @@ The [clickable area][] of this button does not contain a 44×44px [aligned recta ``` -#### Failed Example 12 +#### Failed Example 13 The [clickable area][] of this button only contains a 25×45px [aligned rectangle][]. @@ -753,7 +765,7 @@ This button has an [always empty clickable area][] because it is moved off-scree #### Inapplicable Example 4 -These links are [rendered on a line][]. +These links are [in a block of text][]. ```html

@@ -765,6 +777,21 @@ These links are [rendered on a line][]. #### Inapplicable Example 5 +These links are [in a block of text][] + +```html +

Useful links for the ACT rules group:

+ +``` + +#### Inapplicable Example 6 + This checkbox is an [User Agent controlled component][]. ```html @@ -774,7 +801,7 @@ This checkbox is an [User Agent controlled component][].

``` -#### Inapplicable Example 6 +#### Inapplicable Example 7 The pin (red square) on this map has [essential size][] because it is important to pinpoint the exact location. @@ -802,18 +829,19 @@ Location of ACT rules headquarters: > ``` +[aligned rectangle]: #aligned-rectangle 'Definition of Aligned Rectangle' +[always empty clickable area]: #clickable-area:empty 'Definition of Always Empty Clickable Area' +[block box]: https://drafts.csswg.org/css-display/#block-box 'CSS definition of a Block Box' [border box]: https://www.w3.org/TR/css-box-3/#border-box 'CSS definition of Border Box' -[observed as a pointer events target]: #observed-as-pointer-events-target 'Definition of Observed as a Pointer Events Target' [clickable area]: #clickable-area 'Definition of Clickable Area' [essential size]: #essential-target-size 'Definition of Essential Target Size' [explicit label]: #programmatic-label:explicit 'Definition of Explicit Label' [focusable]: #focusable 'Definition of Focusable' -[aligned rectangle]: #aligned-rectangle 'Definition of Aligned Rectangle' [implicit label]: #programmatic-label:implicit 'Definition of Implicit Label' +[in a block of text]: #in-a-block-of-text 'Definition of In a Block of Text' [instrument]: #instrument-to-achieve-an-objective 'Definition of Instrument to Achieve an Objective' [namespaced element]: #namespaced-element 'Definition of Namespaced Element' -[rendered on a line]: #rendered-on-a-line 'Definition of Rendered on a Line' +[observed as a pointer events target]: #observed-as-pointer-events-target 'Definition of Observed as a Pointer Events Target' [sc255]: https://www.w3.org/TR/WCAG22/#target-size-enhanced 'Success Criterion 2.5.5 Target Size (enhanced)' -[targeted by a pointer event]: #can-be-targeted-by-pointer-event 'Definition of Can be Targeted by a Pointer Event' -[always empty clickable area]: #clickable-area:empty 'Definition of Always Empty Clickable Area' +[text node]: https://dom.spec.whatwg.org/#text 'DOM Definition of Text Node' [user agent controlled component]: #user-agent-controlled-component 'Definition of UI Controlled Component' diff --git a/pages/glossary/essential-target-size.md b/pages/glossary/essential-target-size.md index 49eaa86504..95fa6da256 100644 --- a/pages/glossary/essential-target-size.md +++ b/pages/glossary/essential-target-size.md @@ -5,9 +5,9 @@ unambiguous: true objective: false --- -An element which [can be targeted by a pointer event][] has _essential target size_ if at least one of the following is true: +An element which is [observed as a pointer events target][] has _essential target size_ if at least one of the following is true: - the element is a pin on a map, indicating a precise position, and larger size would create confusion regarding this position; or - the element is part of a graphical representation of data (e.g., a graph), indicating a precise value, and larger size would create confusion regarding this value. -[can be targeted by a pointer event]: #can-be-targeted-by-pointer-event 'Definition of Can be Targeted by a Pointer Event' +[observed as a pointer events target]: #observed-as-pointer-events-target 'Definition of Observed as a Pointer Events Target' diff --git a/pages/glossary/in-a-block-of-text.md b/pages/glossary/in-a-block-of-text.md new file mode 100644 index 0000000000..864ffd7322 --- /dev/null +++ b/pages/glossary/in-a-block-of-text.md @@ -0,0 +1,19 @@ +--- +title: In a Block of Text +key: in-a-block-of-text +unambiguous: true +objective: true +input_aspects: + - CSS styling + - DOM tree +--- + +An element E is _in a block of text_ if its closest [inclusive ancestor][] which creates a [block box][] contains at least one non-whitespace [text node][] descendant (other than a `::marker` pseudo-element) that is not also a descendant of E. + +[block box]: https://drafts.csswg.org/css-display/#block-box 'CSS definition of a Block Box' +[inclusive ancestor]: https://dom.spec.whatwg.org/#concept-tree-inclusive-ancestor 'DOM Definition of Inclusive Ancestor' +[text node]: https://dom.spec.whatwg.org/#text 'DOM Definition of Text Node' + +``` + +``` diff --git a/pages/glossary/rendered-on-a-line.md b/pages/glossary/rendered-on-a-line.md deleted file mode 100644 index a5b60a551c..0000000000 --- a/pages/glossary/rendered-on-a-line.md +++ /dev/null @@ -1,29 +0,0 @@ ---- -title: Rendered on a line -key: rendered-on-a-line -unambiguous: true -objective: true -input_aspects: - - CSS styling - - DOM tree ---- - -> Comment: I do not believe this definition correctly captures the "inline" exception of 2.5.5/2.5.8 currently. Please disregard this for now and review the global structure. - -All nodes that generate an [inline box][] that are part of a [line box][] are considered _rendered on a line_. These are _line rendering nodes_. - -Any [flat tree][] [descendant][] of line rendering nodes is also considered part of a line if one of its [clientRects][] overlaps with the position of the [line box][], and if all the following is true for each [ancestor][] in the [flat tree][] up to the line rendering node: - -- the ancestor is an [inline box][]; and -- the ancestor is not [floating][]; and -- the ancestor does not have an [absolute][] or [fixed][] `position`. - -[absolute]: https://drafts.csswg.org/css-position-3/#valdef-position-absolute 'Definition of absolute' -[ancestor]: https://dom.spec.whatwg.org/#concept-tree-ancestor 'Definition of ancestor' -[clientrects]: https://drafts.csswg.org/cssom-view/#dom-element-getclientrects 'Definition of getClientRects' -[descendant]: https://dom.spec.whatwg.org/#concept-tree-descendant 'Definition of descendant' -[fixed]: https://drafts.csswg.org/css-position-3/#valdef-position-fixed 'Definition of fixed' -[flat tree]: https://drafts.csswg.org/css-scoping/#flat-tree 'Definition of flat tree' -[floating]: https://www.w3.org/TR/CSS2/visuren.html#floats 'Definition of float' -[inline box]: https://drafts.csswg.org/css-display/#inline-box 'Definition of inline box' -[line box]: https://drafts.csswg.org/css2/visuren.html#line-box 'Definition of line box'