6cfa84: Change aria-hidden rule to focus on tabbable rather than focusable (#1820)

* Change rule to focus on tabbale vs focusable

* Move Fail 5 to Pass 5

* Update _rules/aria-hidden-no-focusable-content-6cfa84.md

Co-authored-by: Jean-Yves Moyen <jym@siteimprove.com>

* Update expecation / assumptions

* Fix description

* Reword background statement about item vs tab reading

* Fix definition

* Adjust sentence regarding tabbable but hidden

* Update _rules/aria-hidden-no-focusable-content-6cfa84.md

Co-authored-by: Trevor R. Bostic <32486143+tbostic32@users.noreply.github.com>

Co-authored-by: Jean-Yves Moyen <jym@siteimprove.com>
Co-authored-by: Trevor R. Bostic <32486143+tbostic32@users.noreply.github.com>
Co-authored-by: Wilco Fiers <WilcoFiers@users.noreply.github.com>

Author: 4 people

_rules/aria-hidden-no-focusable-content-6cfa84.md

@@ -1,9 +1,9 @@
 ---
 id: 6cfa84
-name: Element with aria-hidden has no focusable content
+name: Element with aria-hidden has no content in sequential focus navigation
 rule_type: atomic
 description: |
-  This rule checks that elements with an `aria-hidden` attribute do not contain focusable elements.
+  This rule checks that elements with an `aria-hidden` attribute do not contain elements that are part of the sequential focus navigation and focusable.
 accessibility_requirements:
   wcag20:4.1.2: # Name, Role, Value (A)
     forConformance: true
@@ -32,11 +32,11 @@ This rule applies to any element with an `aria-hidden` [attribute value][] of `t
 
 ## Expectation
 
-None of the target elements are [focusable][], nor do they have [descendants](https://dom.spec.whatwg.org/#concept-tree-descendant) in the [flat tree](https://drafts.csswg.org/css-scoping/#flat-tree) that are [focusable][].
+None of the target elements has an [inclusive descendant][] in the [flat tree][] that are [focusable][] and part of the [sequential focus navigation][].
 
 ## Assumptions
 
-Interacting with the page does not result in changing the `aria-hidden` [attribute value][] of target elements. An example of such a situation would be when closing a modal dialog makes previously hidden and not [focusable][] elements become [focusable][].
+Interacting with the page does not result in changing the `aria-hidden` [attribute value][] of target elements. An example of such a situation would be when closing a modal dialog makes previously hidden elements  that were not [focusable][] or part of the [sequential focus navigation][] become [focusable][] and part of the [sequential focus navigation][].
 
 ## Accessibility Support
 
@@ -48,7 +48,7 @@ Using `aria-hidden="false"` on a descendant of an element with `aria-hidden="tru
 
 By adding `aria-hidden="true"` to an element, content authors ensure that assistive technologies will ignore the element. This can be used to hide parts of a web page that are [pure decoration](https://www.w3.org/TR/WCAG21/#dfn-pure-decoration), such as icon fonts - that are not meant to be read by assistive technologies.
 
-A [focusable][] element with `aria-hidden="true"` is ignored as part of the reading order, but still part of the focus order, making its state of [visible](#visible) or hidden unclear.
+An element with an `aria-hidden` attribute set to `true` that is also part of the [sequential focus navigation][] may cause confusion for users of assistive technologies because the element can be reached via [sequential focus navigation][], but it should be hidden and not [included in the accessibility tree][].
 
 The 1 second time span introduced in the exception of the definition of [focusable][] is an arbitrary limit which is not included in WCAG. Given that scripts can manage the focus state of elements, testing the focused state of an element consistently would be impractical without a time limit.
 
@@ -71,15 +71,15 @@ The 1 second time span introduced in the exception of the definition of [focusab
 
 #### Passed Example 1
 
-This `p` element is not [focusable][].
+This `p` element is not part of the [sequential focus navigation][].
 
 ```html
 <p aria-hidden="true">Some text</p>
 ```
 
 #### Passed Example 2
 
-This `a` element is not [focusable][] because it is hidden through CSS.
+This `a` element is not part of the [sequential focus navigation][] because it is hidden through CSS.
 
 ```html
 <div aria-hidden="true">
@@ -89,15 +89,15 @@ This `a` element is not [focusable][] because it is hidden through CSS.
 
 #### Passed Example 3
 
-This `input` element is not [focusable][] because of the `disabled` attribute.
+This `input` element is not part of the [sequential focus navigation][] because of the `disabled` attribute.
 
 ```html
 <input disabled aria-hidden="true" />
 ```
 
 #### Passed Example 4
 
-This `a` element is not [focusable][] because it moves focus to the `input` element whenever it receives focus.
+This `a` element is part of the [sequential focus navigation][], but moves focus to the `input` element whenever it receives focus.
 
 ```html
 <div aria-hidden="true">
@@ -106,11 +106,21 @@ This `a` element is not [focusable][] because it moves focus to the `input` elem
 <input />
 ```
 
+#### Passed Example 5
+
+This `button` element is [focusable][], but not part of the [sequential focus navigation][] because of the `tabindex` attribute.
+
+```html
+<div aria-hidden="true">
+	<button tabindex="-1">Some button</button>
+</div>
+```
+
 ### Failed
 
 #### Failed Example 1
 
-This `a` element positioned off screen is [focusable][] using the keyboard.
+This `a` element positioned off screen is part of the [sequential focus navigation][] using the keyboard.
 
 ```html
 <div aria-hidden="true">
@@ -120,7 +130,7 @@ This `a` element positioned off screen is [focusable][] using the keyboard.
 
 #### Failed Example 2
 
-This `input` element is [focusable][] because it was incorrectly disabled.
+This `input` element is part of the [sequential focus navigation][] because it was incorrectly disabled.
 
 ```html
 <div aria-hidden="true">
@@ -130,7 +140,7 @@ This `input` element is [focusable][] because it was incorrectly disabled.
 
 #### Failed Example 3
 
-This `button` element is [focusable][] and a descendant of an element with an `aria-hidden` [attribute value][] of `true` because `aria-hidden` can't be reset once set to true on an ancestor.
+This `button` element is part of the [sequential focus navigation][] and a descendant of an element with an `aria-hidden` [attribute value][] of `true` because `aria-hidden` can't be reset once set to true on an ancestor.
 
 ```html
 <div aria-hidden="true">
@@ -142,25 +152,15 @@ This `button` element is [focusable][] and a descendant of an element with an `a
 
 #### Failed Example 4
 
-This `p` element is [focusable][] because of the `tabindex` attribute.
+This `p` element is part of the [sequential focus navigation][] because of the `tabindex` attribute.
 
 ```html
 <p tabindex="0" aria-hidden="true">Some text</p>
 ```
 
 #### Failed Example 5
 
-This `button` element is [focusable][] because of the `tabindex` attribute.
-
-```html
-<div aria-hidden="true">
-	<button tabindex="-1">Some button</button>
-</div>
-```
-
-#### Failed Example 6
-
-This `summary` element is [focusable][].
+This `summary` element is part of the [sequential focus navigation][].
 
 ```html
 <details aria-hidden="true">
@@ -198,4 +198,8 @@ This `aria-hidden` attribute has an incorrect value.
 ```
 
 [attribute value]: #attribute-value 'Definition of Attribute Value'
+[flat tree]: https://drafts.csswg.org/css-scoping/#flat-tree 'Definition of flat tree'
 [focusable]: #focusable 'Definition of focusable'
+[inclusive descendant]: https://dom.spec.whatwg.org/#concept-tree-inclusive-descendant 'DOM definition of Inclusive Descendant'
+[included in the accessibility tree]: #included-in-the-accessibility-tree 'Definition of Included in the Accessibility Tree'
+[sequential focus navigation]: https://html.spec.whatwg.org/multipage/interaction.html#sequential-focus-navigation