fix(menu): Switch from aria-selected to aria-checked for selected men…

…u item. (#4779) aria-checked is advised in ARIA spec for selectable menu items: * w3.org/TR/wai-aria-1.1/#menuitemcheckbox * w3.org/TR/wai-aria-1.1/#menuitemradio
material-components · Jun 3, 2019 · f4b0bf5 · f4b0bf5
1 parent f8c561c
commit f4b0bf5
Show file tree

Hide file tree

Showing 3 changed files with 7 additions and 7 deletions.
diff --git a/packages/mdc-menu/constants.ts b/packages/mdc-menu/constants.ts
@@ -28,7 +28,7 @@ const cssClasses = {
 };
 
 const strings = {
-  ARIA_SELECTED_ATTR: 'aria-selected',
+  ARIA_CHECKED_ATTR: 'aria-checked',
   CHECKBOX_SELECTOR: 'input[type="checkbox"]',
   LIST_SELECTOR: '.mdc-list',
   SELECTED_EVENT: 'MDCMenu:selected',

diff --git a/packages/mdc-menu/foundation.ts b/packages/mdc-menu/foundation.ts
@@ -142,12 +142,12 @@ export class MDCMenuFoundation extends MDCFoundation<MDCMenuAdapter> {
 
     const prevSelectedIndex = this.adapter_.getSelectedSiblingOfItemAtIndex(index);
     if (prevSelectedIndex >= 0) {
-      this.adapter_.removeAttributeFromElementAtIndex(prevSelectedIndex, strings.ARIA_SELECTED_ATTR);
+      this.adapter_.removeAttributeFromElementAtIndex(prevSelectedIndex, strings.ARIA_CHECKED_ATTR);
       this.adapter_.removeClassFromElementAtIndex(prevSelectedIndex, cssClasses.MENU_SELECTED_LIST_ITEM);
     }
 
     this.adapter_.addClassToElementAtIndex(index, cssClasses.MENU_SELECTED_LIST_ITEM);
-    this.adapter_.addAttributeToElementAtIndex(index, strings.ARIA_SELECTED_ATTR, 'true');
+    this.adapter_.addAttributeToElementAtIndex(index, strings.ARIA_CHECKED_ATTR, 'true');
   }
 
   private validatedIndex_(index: number): void {

diff --git a/test/unit/mdc-menu/menu.foundation.test.js b/test/unit/mdc-menu/menu.foundation.test.js
@@ -279,9 +279,9 @@ test('setSelectedIndex calls addClass and addAttribute only', () => {
   td.verify(mockAdapter.removeClassFromElementAtIndex(
     td.matchers.isA(Number), cssClasses.MENU_SELECTED_LIST_ITEM), {times: 0});
   td.verify(mockAdapter.removeAttributeFromElementAtIndex(td.matchers.isA(Number),
-    strings.ARIA_SELECTED_ATTR), {times: 0});
+    strings.ARIA_CHECKED_ATTR), {times: 0});
   td.verify(mockAdapter.addClassToElementAtIndex(0, cssClasses.MENU_SELECTED_LIST_ITEM), {times: 1});
-  td.verify(mockAdapter.addAttributeToElementAtIndex(0, strings.ARIA_SELECTED_ATTR, 'true'), {times: 1});
+  td.verify(mockAdapter.addAttributeToElementAtIndex(0, strings.ARIA_CHECKED_ATTR, 'true'), {times: 1});
 });
 
 test('setSelectedIndex remove class and attribute, and adds class and attribute to newly selected item', () => {
@@ -295,9 +295,9 @@ test('setSelectedIndex remove class and attribute, and adds class and attribute
   foundation.setSelectedIndex(0);
   td.verify(mockAdapter.removeClassFromElementAtIndex(1, cssClasses.MENU_SELECTED_LIST_ITEM), {times: 1});
   td.verify(
-    mockAdapter.removeAttributeFromElementAtIndex(1, strings.ARIA_SELECTED_ATTR), {times: 1});
+    mockAdapter.removeAttributeFromElementAtIndex(1, strings.ARIA_CHECKED_ATTR), {times: 1});
   td.verify(mockAdapter.addClassToElementAtIndex(0, cssClasses.MENU_SELECTED_LIST_ITEM), {times: 1});
-  td.verify(mockAdapter.addAttributeToElementAtIndex(0, strings.ARIA_SELECTED_ATTR, 'true'), {times: 1});
+  td.verify(mockAdapter.addAttributeToElementAtIndex(0, strings.ARIA_CHECKED_ATTR, 'true'), {times: 1});
 });
 
 test('setSelectedIndex throws error if index is not in range', () => {