From d5f6ad3fe7007290fb5849f2c22a21fc15e58a55 Mon Sep 17 00:00:00 2001 From: Liz Mitchell Date: Tue, 11 May 2021 16:15:33 -0700 Subject: [PATCH] chore(switch): update new switch selectors PiperOrigin-RevId: 373254033 --- packages/mdc-switch/_switch-theme.scss | 4 +-- packages/mdc-switch/_switch.scss | 8 ++--- packages/mdc-switch/adapter.ts | 5 --- packages/mdc-switch/component.ts | 1 - packages/mdc-switch/constants.ts | 2 ++ packages/mdc-switch/foundation.ts | 4 ++- packages/mdc-switch/test/component.test.ts | 10 ------ packages/mdc-switch/test/foundation.test.ts | 38 +++++++-------------- 8 files changed, 23 insertions(+), 49 deletions(-) diff --git a/packages/mdc-switch/_switch-theme.scss b/packages/mdc-switch/_switch-theme.scss index 62b2ead2c21..5b35dd9f078 100644 --- 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 index 796670d2531..99e935e5a53 100644 --- 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 index 1c32eb19cca..9c83b147285 100644 --- 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 index 36c955e71a9..1532b43b8f6 100644 --- 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 index ca0aabfb2ac..c73cfaf9eb3 100644 --- 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 index 65f54c68c46..fc6b08ccb12 100644 --- 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 index f5af48aaad4..e8383a9bf92 100644 --- 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 index dfd86a6bc98..8f5d37a48c7 100644 --- 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();