new rule: Menuitem has non-empty accessible name (#1509)

* new rule: Menuitem has non-empty accessible name * Apply suggestions from code review Co-authored-by: Jean-Yves Moyen <[email protected]> * Remove icon font in favor of img with svg * update examples to use div > button Co-authored-by: Jean-Yves Moyen <[email protected]>
act-rules · Jan 4, 2021 · 74e90fa · 74e90fa
1 parent 3c5ed05
commit 74e90fa
Show file tree

Hide file tree

Showing 3 changed files with 169 additions and 0 deletions.
diff --git a/__tests__/spelling-ignore.yml b/__tests__/spelling-ignore.yml
@@ -208,6 +208,8 @@
 - cornsilk
 - subtree
 - unicity
+- Menuitem
+- menuitems
 
 # Parts of Unicode
 - 000A

diff --git a/_rules/menuitem-non-empty-name-m6b1q3.md b/_rules/menuitem-non-empty-name-m6b1q3.md
@@ -0,0 +1,163 @@
+---
+id: m6b1q3
+name: Menuitem has non-empty accessible name
+rule_type: atomic
+description: |
+  This rule checks that each element with a `menuitem` role has a non-empty accessible name.
+accessibility_requirements:
+  wcag20:4.1.2: # Name, Role, Value (A)
+    forConformance: true
+    failed: not satisfied
+    passed: further testing needed
+    inapplicable: further testing needed
+input_aspects:
+  - Accessibility Tree
+  - CSS Styling
+  - DOM Tree
+acknowledgments:
+  authors:
+    - Wilco Fiers
+  assets:
+    - The "file.svg" icon is part of the Feather Icons package, which uses the [MIT license](https://github.com/feathericons/feather/blob/master/LICENSE).
+---
+
+## Applicability
+
+This rule applies to HTML elements with a `menuitem` [semantic role][] that are [included in the accessibility tree][].
+
+## Expectation
+
+Each target element has an [accessible name][] that is not empty (`""`).
+
+## Assumptions
+
+This rule assumes that all menuitems are [user interface components as defined by WCAG 2](https://www.w3.org/TR/WCAG21/#dfn-user-interface-components). If an element has a role of `menuitem` that would not be perceived as a single control by users, [4.1.2 Name, Role, Value](https://www.w3.org/TR/WCAG21/#name-role-value) would not apply and so failing this rule would not result in a conformance issue.
+
+## Accessibility Support
+
+In some assistive technologies, the `menuitem` role will only be announced in browsing mode. When they receive focus this role is not announced. Additionally, the `title` attribute is not in all circumstance a reliable way to provide an accessible name. Use `aria-label` instead.
+
+Implementation of [Presentational Roles Conflict Resolution][] varies from one browser or assistive technology to another. Depending on this, some elements can have a [semantic role][] of `button` and fail this rule with some technology but users of other technologies would not experience any accessibility issue.
+
+## Background
+
+- [Understanding Success Criterion 4.1.2: Name, Role, Value](https://www.w3.org/WAI/WCAG21/Understanding/name-role-value)
+- [ARIA14: Using aria-label to provide an invisible label where a visible label cannot be used](https://www.w3.org/WAI/WCAG21/Techniques/aria/ARIA14)
+- [ARIA16: Using aria-labelledby to provide a name for user interface controls](https://www.w3.org/WAI/WCAG21/Techniques/aria/ARIA16)
+
+## Test Cases
+
+### Passed
+
+#### Passed Example 1
+
+This element with the `menuitem` role has an [accessible name][] because of its text content.
+
+```html
+<div role="menu">
+	<button role="menuitem">New file</button>
+</div>
+```
+
+#### Passed Example 2
+
+This element with the `menuitem` role has an [accessible name][] because of its `aria-label` attribute.
+
+```html
+<div role="menu">
+	<button role="menuitem" aria-label="New file">
+		<img src="/test-assets/shared/file.svg" alt="" />
+	</button>
+</div>
+```
+
+#### Passed Example 3
+
+This element with the `menuitem` role has an [accessible name][] because its `aria-labelledby` attribute references an element with text content.
+
+```html
+<div role="menu">
+	<button role="menuitem" aria-labelledby="newfile">
+		<img src="/test-assets/shared/file.svg" alt="" />
+		<span id="newfile" hidden>New file</span>
+	</button>
+</div>
+```
+
+#### Passed Example 4
+
+This element with the `menuitem` role has an [accessible name][] because of its `title` attribute.
+
+```html
+<div role="menu">
+	<button role="menuitem" title="New file">
+		<img src="/test-assets/shared/file.svg" alt="" />
+	</button>
+</div>
+```
+
+### Failed
+
+#### Failed Example 1
+
+This element with the `menuitem` role has no [accessible name][] because it has no content or attribute that can provide it.
+
+```html
+<div role="menu">
+	<button role="menuitem">
+		<img src="/test-assets/shared/file.svg" alt="" />
+	</button>
+</div>
+```
+
+#### Failed Example 2
+
+This element with the `menuitem` role has no [accessible name][] because it has no content or attribute that can provide it.
+
+```html
+<html lang="en">
+	<style>
+		.offscreen {
+			position: absolute;
+			left: -9999px;
+			top: -9999px;
+		}
+	</style>
+	<div role="menu" class="offscreen">
+		<button role="menuitem">
+			<img src="/test-assets/shared/file.svg" alt="" />
+		</button>
+	</div>
+</html>
+```
+
+### Inapplicable
+
+#### Inapplicable Example 1
+
+The `li` element has a `listitem` [semantic role][], even as a child of a `menu` element.
+
+```html
+<menu>
+	<li>
+		<a href="#">New file</a>
+	</li>
+</menu>
+```
+
+#### Inapplicable Example 2
+
+This element with the `menuitem` role does not need an [accessible name][] because it is not [included in the accessibility tree][].
+
+```html
+<div role="menu" hidden>
+	<button role="menuitem">
+		<img src="/test-assets/shared/file.svg" alt="" />
+	</button>
+</div>
+```
+
+[accessible name]: #accessible-name 'Definition of accessible name'
+[included in the accessibility tree]: #included-in-the-accessibility-tree 'Definition of included in the accessibility tree'
+[presentational roles conflict resolution]: https://www.w3.org/TR/wai-aria-1.1/#conflict_resolution_presentation_none 'Presentational Roles Conflict Resolution'
+[semantic role]: #semantic-role 'Definition of Semantic Role'
diff --git a/test-assets/shared/file.svg b/test-assets/shared/file.svg