chore(switch): update new switch selectors

PiperOrigin-RevId: 373254033
material-components · May 11, 2021 · d5f6ad3 · d5f6ad3
1 parent 573dc7f
commit d5f6ad3
Show file tree

Hide file tree

Showing 8 changed files with 23 additions and 49 deletions.
diff --git a/packages/mdc-switch/_switch-theme.scss b/packages/mdc-switch/_switch-theme.scss
@@ -63,8 +63,8 @@ $_selectors: (
   focus: ':focus',
   hover: ':hover',
   pressed: ':active',
-  selected: '[aria-checked="true"]',
-  unselected: '[aria-checked="false"]',
+  selected: '.mdc-switch--selected',
+  unselected: '.mdc-switch--unselected',
 );
 
 $light-theme: (

diff --git a/packages/mdc-switch/_switch.scss b/packages/mdc-switch/_switch.scss
@@ -57,7 +57,7 @@ $track-height: 14px;
     @include track;
     @include track-off;
 
-    .mdc-switch[aria-checked='true'] & {
+    .mdc-switch--selected & {
       @include track-on;
     }
   }
@@ -66,7 +66,7 @@ $track-height: 14px;
     @include handle-track;
     @include handle-track-off;
 
-    .mdc-switch[aria-checked='true'] & {
+    .mdc-switch--selected & {
       @include handle-track-on;
     }
   }
@@ -96,8 +96,8 @@ $track-height: 14px;
     @include icon-hidden;
   }
 
-  .mdc-switch[aria-checked='true'] .mdc-switch__icon--on,
-  .mdc-switch[aria-checked='false'] .mdc-switch__icon--off {
+  .mdc-switch--selected .mdc-switch__icon--on,
+  .mdc-switch--unselected .mdc-switch__icon--off {
     @include icon-visible;
   }
 }

diff --git a/packages/mdc-switch/adapter.ts b/packages/mdc-switch/adapter.ts
@@ -68,11 +68,6 @@ export interface MDCSwitchRenderAdapter extends MDCSwitchAdapter {
    * @param className The class to add.
    */
   addClass(className: CssClasses): void;
-  /**
-   * Retrieves the `aria-checked` attribute of the root element.
-   * @return the `aria-checked` value.
-   */
-  getAriaChecked(): string|null;
   /**
    * Returns whether or not the root element has a class.
    * @param className The class to check.

diff --git a/packages/mdc-switch/component.ts b/packages/mdc-switch/component.ts
@@ -89,7 +89,6 @@ export class MDCSwitch extends
       addClass: className => {
         this.root.classList.add(className)
       },
-      getAriaChecked: () => this.root.getAttribute('aria-checked'),
       hasClass: className => this.root.classList.contains(className),
       isDisabled: () => this.root.disabled,
       removeClass: className => {

diff --git a/packages/mdc-switch/constants.ts b/packages/mdc-switch/constants.ts
@@ -26,6 +26,8 @@
  */
 export enum CssClasses {
   PROCESSING = 'mdc-switch--processing',
+  SELECTED = 'mdc-switch--selected',
+  UNSELECTED = 'mdc-switch--unselected',
 }
 
 /**

diff --git a/packages/mdc-switch/foundation.ts b/packages/mdc-switch/foundation.ts
@@ -112,7 +112,7 @@ export class MDCSwitchRenderFoundation extends MDCSwitchFoundation {
     // Turn off observers while setting state
     this.setObserversEnabled(this.adapter.state, false);
 
-    this.adapter.state.selected = this.adapter.getAriaChecked() === 'true';
+    this.adapter.state.selected = this.adapter.hasClass(CssClasses.SELECTED);
     // Ensure aria-checked is set if attribute is not present
     this.onSelectedChange();
     this.adapter.state.disabled = this.adapter.isDisabled();
@@ -134,6 +134,8 @@ export class MDCSwitchRenderFoundation extends MDCSwitchFoundation {
 
   protected onSelectedChange() {
     this.adapter.setAriaChecked(String(this.adapter.state.selected));
+    this.toggleClass(this.adapter.state.selected, CssClasses.SELECTED);
+    this.toggleClass(!this.adapter.state.selected, CssClasses.UNSELECTED);
   }
 
   private toggleClass(addClass: boolean, className: CssClasses) {

diff --git a/packages/mdc-switch/test/component.test.ts b/packages/mdc-switch/test/component.test.ts
@@ -125,16 +125,6 @@ describe('MDCSwitch', () => {
     expect(Array.from(root.classList)).toContain(CssClasses.PROCESSING);
   });
 
-  it('adapter.getAriaChecked() returns root aria-checked attribute', () => {
-    const {root, adapter} = setupTest();
-    root.setAttribute('aria-checked', 'true');
-    expect(adapter.getAriaChecked()).toBe('true');
-    root.setAttribute('aria-checked', 'false');
-    expect(adapter.getAriaChecked()).toBe('false');
-    root.removeAttribute('aria-checked');
-    expect(adapter.getAriaChecked()).toBe(null);
-  });
-
   it('adapter.hasClass() checks classes on root', () => {
     const {root, adapter} = setupTest();
     expect(adapter.hasClass(CssClasses.PROCESSING))

diff --git a/packages/mdc-switch/test/foundation.test.ts b/packages/mdc-switch/test/foundation.test.ts
@@ -98,7 +98,6 @@ describe('MDCSwitchRenderFoundation', () => {
     return setUpFoundationTest(MDCSwitchRenderFoundation, {
       state: {disabled: false, processing: false, selected: false},
       addClass: () => {},
-      getAriaChecked: () => 'false',
       hasClass: () => false,
       isDisabled: () => false,
       removeClass: () => false,
@@ -107,37 +106,24 @@ describe('MDCSwitchRenderFoundation', () => {
     });
   }
 
-  it('#initFromDOM() sets selected to true if aria-checked is "true"', () => {
+  it('#initFromDOM() sets selected if adapter has class', () => {
     const {foundation, mockAdapter} = setupTest();
-    mockAdapter.getAriaChecked.and.returnValue('true');
+    // TODO(b/183749291): remove explicit arg type when Jasmine is updated
+    mockAdapter.hasClass.and.callFake(
+        (name: CssClasses) => name === CssClasses.SELECTED);
     foundation.init();
     foundation.initFromDOM();
     expect(mockAdapter.state.selected).toBe(true);
   });
 
-  it('#initFromDOM() sets selected to false if aria-checked is "false"', () => {
-    const {foundation, mockAdapter} = setupTest();
-    mockAdapter.getAriaChecked.and.returnValue('false');
-    foundation.init();
-    foundation.initFromDOM();
-    expect(mockAdapter.state.selected).toBe(false);
-  });
-
-  it('#initFromDOM() sets selected to true if aria-checked is null', () => {
-    const {foundation, mockAdapter} = setupTest();
-    mockAdapter.getAriaChecked.and.returnValue(null);
-    foundation.init();
-    foundation.initFromDOM();
-    expect(mockAdapter.state.selected).toBe(false);
-  });
-
-  it('#initFromDOM() sets aria-checked if it does not exist', () => {
-    const {foundation, mockAdapter} = setupTest();
-    mockAdapter.getAriaChecked.and.returnValue(null);
-    foundation.init();
-    foundation.initFromDOM();
-    expect(mockAdapter.setAriaChecked).toHaveBeenCalledWith('false');
-  });
+  it('#initFromDOM() ensures aria-checked is set in case it does not exist',
+     () => {
+       const {foundation, mockAdapter} = setupTest();
+       foundation.init();
+       foundation.initFromDOM();
+       // Default selected is false, aria-checked should be false
+       expect(mockAdapter.setAriaChecked).toHaveBeenCalledWith('false');
+     });
 
   it('#initFromDOM() sets disabled from adapter.isDisabled', () => {
     const {foundation, mockAdapter} = setupTest();