feat(chips): Add setAttr adapter method (#4736)

Add MDCChipAdapter#setAttr method. Update screenshot tests with appropriate roles. BREAKING CHANGE: Add the setAttr method to the chip adapter.
material-components · Jun 3, 2019 · 1e21acf · 1e21acf
1 parent d8fe135
commit 1e21acf
Show file tree

Hide file tree

Showing 9 changed files with 51 additions and 27 deletions.
diff --git a/packages/mdc-chips/README.md b/packages/mdc-chips/README.md
@@ -337,6 +337,7 @@ Method Signature | Description
 `hasLeadingIcon() => boolean` | Returns whether the chip has a leading icon
 `getRootBoundingClientRect() => ClientRect` | Returns the bounding client rect of the root element
 `getCheckmarkBoundingClientRect() => ClientRect \| null` | Returns the bounding client rect of the checkmark element or null if it doesn't exist
+`setAttr(attr: string, value: string) => void` | Sets the value of the attribute on the root element.
 
 > \*_NOTE_: `notifyInteraction` and `notifyTrailingIconInteraction` must pass along the target chip's ID, and must be observable by the parent `mdc-chip-set` element (e.g. via DOM event bubbling).
 

diff --git a/packages/mdc-chips/chip/adapter.ts b/packages/mdc-chips/chip/adapter.ts
@@ -105,4 +105,9 @@ export interface MDCChipAdapter {
    * @return The bounding client rect of the checkmark element or null if it doesn't exist.
    */
   getCheckmarkBoundingClientRect(): ClientRect | null;
+
+  /**
+   * Sets the value of the attribute on the root element.
+   */
+  setAttr(attr: string, value: string): void;
 }
diff --git a/packages/mdc-chips/chip/component.ts b/packages/mdc-chips/chip/component.ts
@@ -177,6 +177,7 @@ export class MDCChip extends MDCComponent<MDCChipFoundation> implements MDCRippl
           this.leadingIcon_.classList.remove(className);
         }
       },
+      setAttr: (attr, value) => this.root_.setAttribute(attr, value),
       setStyleProperty: (propertyName, value) => this.root_.style.setProperty(propertyName, value),
     };
     return new MDCChipFoundation(adapter);

diff --git a/packages/mdc-chips/chip/constants.ts b/packages/mdc-chips/chip/constants.ts
@@ -22,6 +22,7 @@
  */
 
 export const strings = {
+  ARIA_CHECKED: 'aria-checked',
   CHECKMARK_SELECTOR: '.mdc-chip__checkmark',
   ENTRY_ANIMATION_NAME: 'mdc-chip-entry',
   INTERACTION_EVENT: 'MDCChip:interaction',

diff --git a/packages/mdc-chips/chip/foundation.ts b/packages/mdc-chips/chip/foundation.ts
@@ -59,6 +59,7 @@ export class MDCChipFoundation extends MDCFoundation<MDCChipAdapter> {
       notifyTrailingIconInteraction: () => undefined,
       removeClass: () => undefined,
       removeClassFromLeadingIcon: () => undefined,
+      setAttr: () => undefined,
       setStyleProperty: () => undefined,
     };
   }
@@ -79,8 +80,10 @@ export class MDCChipFoundation extends MDCFoundation<MDCChipAdapter> {
   setSelected(selected: boolean) {
     if (selected) {
       this.adapter_.addClass(cssClasses.SELECTED);
+      this.adapter_.setAttr(strings.ARIA_CHECKED, 'true');
     } else {
       this.adapter_.removeClass(cssClasses.SELECTED);
+      this.adapter_.setAttr(strings.ARIA_CHECKED, 'false');
     }
     this.adapter_.notifySelection(selected);
   }

diff --git a/test/screenshot/golden.json b/test/screenshot/golden.json
@@ -200,10 +200,10 @@
     }
   },
   "spec/mdc-checkbox/mixins/touch-dimension.html": {
-    "public_url": "https://storage.googleapis.com/mdc-web-screenshot-tests/travis/2019/05/15/16_09_10_398/spec/mdc-checkbox/mixins/touch-dimension.html?utm_source=golden_json",
+    "public_url": "https://storage.googleapis.com/mdc-web-screenshot-tests/travis/2019/05/20/17_56_10_840/spec/mdc-checkbox/mixins/touch-dimension.html?utm_source=golden_json",
     "screenshots": {
       "desktop_windows_chrome@latest": "https://storage.googleapis.com/mdc-web-screenshot-tests/travis/2019/05/13/19_16_33_458/spec/mdc-checkbox/mixins/touch-dimension.html.windows_chrome_74.png",
-      "desktop_windows_firefox@latest": "https://storage.googleapis.com/mdc-web-screenshot-tests/travis/2019/05/13/19_16_33_458/spec/mdc-checkbox/mixins/touch-dimension.html.windows_firefox_65.png",
+      "desktop_windows_firefox@latest": "https://storage.googleapis.com/mdc-web-screenshot-tests/travis/2019/05/20/17_56_10_840/spec/mdc-checkbox/mixins/touch-dimension.html.windows_firefox_65.png",
       "desktop_windows_ie@11": "https://storage.googleapis.com/mdc-web-screenshot-tests/travis/2019/05/15/16_09_10_398/spec/mdc-checkbox/mixins/touch-dimension.html.windows_ie_11.png"
     }
   },

diff --git a/test/screenshot/spec/mdc-chips/classes/choice.html b/test/screenshot/spec/mdc-chips/classes/choice.html
@@ -44,33 +44,33 @@
       <div class="test-layout">
         <div class="test-cell test-cell--chip">
           <div class="mdc-chip-set mdc-chip-set--choice">
-            <button class="mdc-chip">
+            <button class="mdc-chip" role="radio" aria-checked="false">
               <span class="mdc-chip__text">Chip One</span>
             </button>
-            <button class="mdc-chip">
+            <button class="mdc-chip" role="radio" aria-checked="false">
               <span class="mdc-chip__text">Chip Two</span>
             </button>
-            <button class="mdc-chip">
+            <button class="mdc-chip" role="radio" aria-checked="false">
               <span class="mdc-chip__text">Chip Three</span>
             </button>
-            <button class="mdc-chip">
+            <button class="mdc-chip" role="radio" aria-checked="false">
               <span class="mdc-chip__text">Chip Four</span>
             </button>
           </div>
         </div>
 
         <div class="test-cell test-cell--chip">
           <div class="mdc-chip-set mdc-chip-set--choice">
-            <button class="mdc-chip mdc-chip--selected">
+            <button class="mdc-chip mdc-chip--selected" role="radio" aria-checked="true">
               <span class="mdc-chip__text">Chip One</span>
             </button>
-            <button class="mdc-chip mdc-chip--selected">
+            <button class="mdc-chip mdc-chip--selected" role="radio" aria-checked="true">
               <span class="mdc-chip__text">Chip Two</span>
             </button>
-            <button class="mdc-chip mdc-chip--selected">
+            <button class="mdc-chip mdc-chip--selected" role="radio" aria-checked="true">
               <span class="mdc-chip__text">Chip Three</span>
             </button>
-            <button class="mdc-chip mdc-chip--selected">
+            <button class="mdc-chip mdc-chip--selected" role="radio" aria-checked="true">
               <span class="mdc-chip__text">Chip Four</span>
             </button>
           </div>

diff --git a/test/screenshot/spec/mdc-chips/classes/filter.html b/test/screenshot/spec/mdc-chips/classes/filter.html
@@ -44,48 +44,48 @@
       <div class="test-layout">
         <div class="test-cell test-cell--chip">
           <div class="mdc-chip-set mdc-chip-set--filter">
-            <button class="mdc-chip">
+            <button class="mdc-chip" role="checkbox" aria-checked="false">
               <span class="mdc-chip__text">Chip One</span>
             </button>
-            <button class="mdc-chip">
+            <button class="mdc-chip" role="checkbox" aria-checked="false">
               <span class="mdc-chip__text">Chip Two</span>
             </button>
-            <button class="mdc-chip">
+            <button class="mdc-chip" role="checkbox" aria-checked="false">
               <span class="mdc-chip__text">Chip Three</span>
             </button>
-            <button class="mdc-chip">
+            <button class="mdc-chip" role="checkbox" aria-checked="false">
               <span class="mdc-chip__text">Chip Four</span>
             </button>
           </div>
         </div>
 
         <div class="test-cell test-cell--chip">
           <div class="mdc-chip-set mdc-chip-set--filter">
-            <button class="mdc-chip mdc-chip--selected">
+            <button class="mdc-chip mdc-chip--selected" role="checkbox" aria-checked="true">
               <span class="mdc-chip__checkmark" >
                 <svg class="mdc-chip__checkmark-svg" viewBox="-2 -3 30 30">
                   <path class="mdc-chip__checkmark-path" fill="none" stroke="black" d="M1.73,12.91 8.1,19.28 22.79,4.59"/>
                 </svg>
               </span>
               <span class="mdc-chip__text">Chip One</span>
             </button>
-            <button class="mdc-chip mdc-chip--selected">
+            <button class="mdc-chip mdc-chip--selected" role="checkbox" aria-checked="true">
               <span class="mdc-chip__checkmark" >
                 <svg class="mdc-chip__checkmark-svg" viewBox="-2 -3 30 30">
                   <path class="mdc-chip__checkmark-path" fill="none" stroke="black" d="M1.73,12.91 8.1,19.28 22.79,4.59"/>
                 </svg>
               </span>
               <span class="mdc-chip__text">Chip Two</span>
             </button>
-            <button class="mdc-chip mdc-chip--selected">
+            <button class="mdc-chip mdc-chip--selected" role="checkbox" aria-checked="true">
               <span class="mdc-chip__checkmark" >
                 <svg class="mdc-chip__checkmark-svg" viewBox="-2 -3 30 30">
                   <path class="mdc-chip__checkmark-path" fill="none" stroke="black" d="M1.73,12.91 8.1,19.28 22.79,4.59"/>
                 </svg>
               </span>
               <span class="mdc-chip__text">Chip Three</span>
             </button>
-            <button class="mdc-chip mdc-chip--selected">
+            <button class="mdc-chip mdc-chip--selected" role="checkbox" aria-checked="true">
               <span class="mdc-chip__checkmark" >
                 <svg class="mdc-chip__checkmark-svg" viewBox="-2 -3 30 30">
                   <path class="mdc-chip__checkmark-path" fill="none" stroke="black" d="M1.73,12.91 8.1,19.28 22.79,4.59"/>
@@ -98,7 +98,7 @@
 
         <div class="test-cell test-cell--chip">
           <div class="mdc-chip-set mdc-chip-set--filter">
-            <button class="mdc-chip mdc-chip--selected">
+            <button class="mdc-chip mdc-chip--selected" role="checkbox" aria-checked="true">
               <i class="material-icons mdc-chip__icon mdc-chip__icon--leading mdc-chip__icon--leading-hidden">face</i>
               <span class="mdc-chip__checkmark" >
                 <svg class="mdc-chip__checkmark-svg" viewBox="-2 -3 30 30">
@@ -107,7 +107,7 @@
               </span>
               <span class="mdc-chip__text">Chip One</span>
             </button>
-            <button class="mdc-chip mdc-chip--selected">
+            <button class="mdc-chip mdc-chip--selected" role="checkbox" aria-checked="true">
               <i class="material-icons mdc-chip__icon mdc-chip__icon--leading mdc-chip__icon--leading-hidden">face</i>
               <span class="mdc-chip__checkmark" >
                 <svg class="mdc-chip__checkmark-svg" viewBox="-2 -3 30 30">
@@ -116,7 +116,7 @@
               </span>
               <span class="mdc-chip__text">Chip Two</span>
             </button>
-            <button class="mdc-chip mdc-chip--selected">
+            <button class="mdc-chip mdc-chip--selected" role="checkbox" aria-checked="true">
               <i class="material-icons mdc-chip__icon mdc-chip__icon--leading mdc-chip__icon--leading-hidden">face</i>
               <span class="mdc-chip__checkmark" >
                 <svg class="mdc-chip__checkmark-svg" viewBox="-2 -3 30 30">
@@ -125,7 +125,7 @@
               </span>
               <span class="mdc-chip__text">Chip Three</span>
             </button>
-            <button class="mdc-chip mdc-chip--selected">
+            <button class="mdc-chip mdc-chip--selected" role="checkbox" aria-checked="true">
               <i class="material-icons mdc-chip__icon mdc-chip__icon--leading mdc-chip__icon--leading-hidden">face</i>
               <span class="mdc-chip__checkmark" >
                 <svg class="mdc-chip__checkmark-svg" viewBox="-2 -3 30 30">
@@ -139,7 +139,7 @@
 
         <div class="test-cell test-cell--chip">
           <div class="mdc-chip-set mdc-chip-set--filter">
-            <button class="mdc-chip">
+            <button class="mdc-chip" role="checkbox" aria-checked="false">
               <i class="material-icons mdc-chip__icon mdc-chip__icon--leading">face</i>
               <span class="mdc-chip__checkmark" >
                 <svg class="mdc-chip__checkmark-svg" viewBox="-2 -3 30 30">
@@ -148,7 +148,7 @@
               </span>
               <span class="mdc-chip__text">Chip One</span>
             </button>
-            <button class="mdc-chip">
+            <button class="mdc-chip" role="checkbox" aria-checked="false">
               <i class="material-icons mdc-chip__icon mdc-chip__icon--leading">face</i>
               <span class="mdc-chip__checkmark" >
                 <svg class="mdc-chip__checkmark-svg" viewBox="-2 -3 30 30">
@@ -157,7 +157,7 @@
               </span>
               <span class="mdc-chip__text">Chip Two</span>
             </button>
-            <button class="mdc-chip">
+            <button class="mdc-chip" role="checkbox" aria-checked="false">
               <i class="material-icons mdc-chip__icon mdc-chip__icon--leading">face</i>
               <span class="mdc-chip__checkmark" >
                 <svg class="mdc-chip__checkmark-svg" viewBox="-2 -3 30 30">
@@ -166,7 +166,7 @@
               </span>
               <span class="mdc-chip__text">Chip Three</span>
             </button>
-            <button class="mdc-chip">
+            <button class="mdc-chip" role="checkbox" aria-checked="false">
               <i class="material-icons mdc-chip__icon mdc-chip__icon--leading">face</i>
               <span class="mdc-chip__checkmark" >
                 <svg class="mdc-chip__checkmark-svg" viewBox="-2 -3 30 30">

diff --git a/test/unit/mdc-chips/mdc-chip.foundation.test.js b/test/unit/mdc-chips/mdc-chip.foundation.test.js
@@ -29,7 +29,7 @@ import {verifyDefaultAdapter} from '../helpers/foundation';
 import {setupFoundationTest} from '../helpers/setup';
 import {MDCChipFoundation} from '../../../packages/mdc-chips/chip/foundation';
 
-const {cssClasses} = MDCChipFoundation;
+const {cssClasses, strings} = MDCChipFoundation;
 
 suite('MDCChipFoundation');
 
@@ -48,6 +48,7 @@ test('defaultAdapter returns a complete adapter implementation', () => {
     'notifyTrailingIconInteraction', 'notifyRemoval', 'notifySelection',
     'getComputedStyleValue', 'setStyleProperty', 'hasLeadingIcon',
     'getRootBoundingClientRect', 'getCheckmarkBoundingClientRect',
+    'setAttr',
   ]);
 });
 
@@ -77,6 +78,18 @@ test('#setSelected removes mdc-chip--selected class if false', () => {
   td.verify(mockAdapter.removeClass(cssClasses.SELECTED));
 });
 
+test('#setSelected sets aria-checked="true" if true', () => {
+  const {foundation, mockAdapter} = setupTest();
+  foundation.setSelected(true);
+  td.verify(mockAdapter.setAttr(strings.ARIA_CHECKED, 'true'));
+});
+
+test('#setSelected sets aria-checked="false" if false', () => {
+  const {foundation, mockAdapter} = setupTest();
+  foundation.setSelected(false);
+  td.verify(mockAdapter.setAttr(strings.ARIA_CHECKED, 'false'));
+});
+
 test('#setSelected removes calls adapter.notifySelection when selected is true', () => {
   const {foundation, mockAdapter} = setupTest();
   foundation.setSelected(true);