"Element with presentational children has no focusable content" (rule 307n5z) - adding examples

_rules/presentational-children-no-focusable-content-307n5z.md

@@ -42,16 +42,17 @@ This rule applies to elements with a [semantic role][] that defines its [childre
 
 Elements with a [semantic role][] that has [presentational children][] will not have any descendants in the accessibility tree. If any of those descendants are included in [sequential focus navigation][], this causes the focus to land on an element that has no corresponding node in the [accessibility tree][]. The result is that there is no programmatic name or role available for assistive technologies. There are other problems that can come from [presentational children][] too. These must be tested separately.
 
+This rule is often misunderstood as applying to elements with an <i>explicit</i> role of `presentation`.  In fact, this rule only applies to elements which have been given an <i>implicit</i> role of `presentation` through the [presentational children][] mechanism.  Similarly, this rule does not apply to elements with `aria-hidden="true"`.
+
 ### Related rules
 
-- [Element with aria-hidden has no focusable content](https://www.w3.org/WAI/standards-guidelines/act/rules/6cfa84/)
+- [Element with aria-hidden has no content in sequential focus navigation](https://www.w3.org/WAI/standards-guidelines/act/rules/6cfa84/)
 
 ### Bibliography
 
 - [Understanding Success Criterion 1.3.1: Info and Relationships](https://www.w3.org/WAI/WCAG22/Understanding/info-and-relationships)
 - [Understanding Success Criterion 4.1.2: Name, Role, Value](https://www.w3.org/WAI/WCAG22/Understanding/name-role-value)
 - [WAI-ARIA 1.2 Presentational Children][presentational children]
-- [Element with aria-hidden has no focusable content](aria-hidden-no-focusable-content-6cfa84.md)
 
 ## Test Cases
 
@@ -67,7 +68,7 @@ None of these `button` elements has [descendants][] that are included in [sequen
 
 #### Passed Example 2
 
-This element with `checkbox` role has no [descendants][] that are included in [sequential focus navigation][]. Instead the link to the terms of service is adjacent, and `aria-labelledby` is used to provide its [accessible name][].
+This element with the `checkbox` role has no [descendants][] that are included in [sequential focus navigation][]. Instead the link to the terms of service is adjacent, and `aria-labelledby` is used to provide its [accessible name][].
 
 ```html
 <p id="terms">
@@ -80,7 +81,7 @@ This element with `checkbox` role has no [descendants][] that are included in [s
 
 #### Passed Example 3
 
-This element with `menuitemcheckbox` role has an `input` element as a descendant. Because the `input` is disabled it is not included in [sequential focus navigation][].
+This element with the `menuitemcheckbox` role has an `input` element as a descendant. Because the `input` is disabled it is not included in [sequential focus navigation][].
 
 **Note**: The `input` checkbox has a `role` [attribute value][] of `none` to ensure it is ignored by browsers that do not support [presentational children][].
 
@@ -93,6 +94,15 @@ This element with `menuitemcheckbox` role has an `input` element as a descendant
 </ul>
 ```
 
+#### 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.
+
+```html
+<button><a>button/link</a></button>
+```
+
+
 ### Failed
 
 #### Failed Example 1
@@ -108,15 +118,15 @@ This `button` element has a [child][] `span` element. Because the `span` element
 
 #### Failed Example 2
 
-This element with `checkbox` role has an `a` element as a [child][]. Because the `a` element has an `href` attribute, it is included in [sequential focus navigation][].
+This element with the `checkbox` role has an `a` element as a [child][]. Because the `a` element has an `href` attribute, it is included in [sequential focus navigation][].
 
 ```html
 <p role="checkbox" aria-checked="false" tabindex="0">I agree to the <a href="/terms">terms of service</a></p>
 ```
 
 #### Failed Example 3
 
-This element with `menuitemcheckbox` role has a checkbox as a child. Because the checkbox is not disabled, it is included in [sequential focus navigation][].
+This element with the `menuitemcheckbox` role has a checkbox as a child. Because the checkbox is not disabled, it is included in [sequential focus navigation][].
 
 ```html
 <ul role="menu">
@@ -127,14 +137,54 @@ This element with `menuitemcheckbox` role has a checkbox as a child. Because the
 </ul>
 ```
 
+#### 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.)
+
+```html
+<ul role="tablist">
+	<li role="tab">
+		<a href="#">Tab 1</a>
+	</li>
+</ul>
+```
+
+#### 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.
+
+```html
+<span role="img" aria-label="some ASCII art">****** This ASCII art ******* <a href="#">contains a link.</a></span>
+```
+
 ### Inapplicable
 
 #### Inapplicable Example 1
 
-This element has a `link` role which does not have [presentational children][].
+The roles that build this semantic table structure (`table` for `<table>`, `row` for `<tr>`, and `cell` for `<td>`) do not have [presentational children][].  So this rule does not apply to them.  (This rule does apply to the `<button>` element within the table.  The `<button>` element passes the rule.)
+
+```html
+<table>
+		<thead>
+				<tr>
+						<th colspan="2">semantic table header</th>
+				</tr>
+		</thead>
+		<tbody>
+				<tr>
+						<td><button>button in semantic table - no problem</button></td>
+						<td><a href="#">anchor in semantic table - no problem</a></td>
+				</tr>
+		</tbody>
+</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.
 
 ```html
-<a href="https://w3.org">W3C Website</a>
+<a href="https://w3.org"><span tabindex="0">W3C Website</span></a>
 ```
 
 [accessible name]: #accessible-name 'Definition of Accessible name'