From 37b1d10031840c56b95b0d22e8390b945615a384 Mon Sep 17 00:00:00 2001 From: Elizabeth Mitchell Date: Mon, 3 Oct 2022 11:57:50 -0700 Subject: [PATCH] chore(radio): remove compat deps PiperOrigin-RevId: 478566674 --- radio/lib/_radio-theme.scss | 7 +-- radio/lib/radio.ts | 15 +++---- radio/md-radio_test.ts | 87 ++++++++++++++++++++----------------- 3 files changed, 58 insertions(+), 51 deletions(-) diff --git a/radio/lib/_radio-theme.scss b/radio/lib/_radio-theme.scss index 85bf4c86a..22b201b55 100644 --- a/radio/lib/_radio-theme.scss +++ b/radio/lib/_radio-theme.scss @@ -10,7 +10,6 @@ @use 'sass:selector'; @use '@material/web/ripple/ripple-theme'; -@use '@material/web/compat/theme/shadow-dom'; @use '@material/web/sass/theme'; @use '@material/web/tokens'; @@ -322,8 +321,10 @@ $_theme-extension-keys: ( } @mixin _checked-selector() { - @include shadow-dom.host-aware(selector.append(&, '[checked]')) { - @content; + @at-root { + :host([checked]) { + @content; + } } } diff --git a/radio/lib/radio.ts b/radio/lib/radio.ts index 641940038..ee20678d9 100644 --- a/radio/lib/radio.ts +++ b/radio/lib/radio.ts @@ -11,7 +11,6 @@ import '@material/web/focus/focus-ring.js'; import '@material/web/ripple/ripple.js'; import {ActionElement, BeginPressConfig, EndPressConfig} from '@material/web/actionelement/action-element.js'; -import {ariaProperty as legacyAriaProperty} from '@material/web/compat/base/aria-property.js'; import {ariaProperty} from '@material/web/decorators/aria-property.js'; import {pointerPress, shouldShowStrongFocus} from '@material/web/focus/strong-focus.js'; import {MdRipple} from '@material/web/ripple/ripple.js'; @@ -107,19 +106,17 @@ export class Radio extends ActionElement { @state() protected focused = false; - /** @soyPrefixAttribute */ @ariaProperty // tslint:disable-line:no-new-decorators - @property({attribute: 'aria-label'}) + @property({attribute: 'data-aria-label', noAccessor: true}) override ariaLabel!: string; - /** @soyPrefixAttribute */ - @legacyAriaProperty // tslint:disable-line:no-new-decorators - @property({attribute: 'aria-labelledby'}) + @ariaProperty // tslint:disable-line:no-new-decorators + @property({attribute: 'data-aria-labelledby', noAccessor: true}) ariaLabelledBy!: string; - /** @soyPrefixAttribute */ - @legacyAriaProperty // tslint:disable-line:no-new-decorators - @property({type: String, attribute: 'aria-describedby'}) + @ariaProperty // tslint:disable-line:no-new-decorators + @property( + {type: String, attribute: 'data-aria-describedby', noAccessor: true}) ariaDescribedBy!: undefined|string; protected rippleElement: MdRipple|null = null; diff --git a/radio/md-radio_test.ts b/radio/md-radio_test.ts index 18f2057b3..0d84692a3 100644 --- a/radio/md-radio_test.ts +++ b/radio/md-radio_test.ts @@ -8,10 +8,11 @@ // tslint:disable:strip-private-property-underscore -import {fixture, TestFixture} from '@material/web/compat/testing/helpers.js'; // TODO(b/235474830): remove the use of fixtures import {MdFocusRing} from '@material/web/focus/focus-ring.js'; import {html} from 'lit'; +import {Environment} from '../testing/environment.js'; + import {RadioHarness} from './harness.js'; import {MdRadio} from './radio.js'; @@ -42,24 +43,23 @@ const repeatedRadio = (values: string[]) => { }; describe('md-radio', () => { - let fixt: TestFixture; + const env = new Environment(); + let element: MdRadio; let harness: RadioHarness; - afterEach(() => { - fixt.remove(); - }); - describe('basic', () => { it('initializes as an md-radio', async () => { - fixt = await fixture(defaultRadio); - element = fixt.root.querySelector('md-radio')!; + const root = env.render(defaultRadio); + await env.waitForStability(); + element = root.querySelector('md-radio')!; expect(element).toBeInstanceOf(MdRadio); }); it('clicking a radio should select it', async () => { - fixt = await fixture(radioGroup); - element = fixt.root.querySelectorAll('md-radio')[1]; + const root = env.render(radioGroup); + await env.waitForStability(); + element = root.querySelectorAll('md-radio')[1]; harness = new RadioHarness(element); await harness.clickWithMouse(); expect(element.checked).toBeTrue(); @@ -67,11 +67,12 @@ describe('md-radio', () => { it('clicking a radio should unselect other radio which is already selected', async () => { - fixt = await fixture(radioGroupPreSelected); - const a2 = fixt.root.querySelectorAll('md-radio')[1]; + const root = env.render(radioGroupPreSelected); + await env.waitForStability(); + const a2 = root.querySelectorAll('md-radio')[1]; expect(a2.checked).toBeTrue(); - const a3 = fixt.root.querySelectorAll('md-radio')[2]; + const a3 = root.querySelectorAll('md-radio')[2]; harness = new RadioHarness(a3); await harness.clickWithMouse(); expect(a3.checked).toBeTrue(); @@ -79,10 +80,11 @@ describe('md-radio', () => { }); it('disabled radio should not be selected when clicked', async () => { - fixt = await fixture(radioGroupDisabled); - const a1 = fixt.root.querySelectorAll('md-radio')[0]; + const root = env.render(radioGroupDisabled); + await env.waitForStability(); + const a1 = root.querySelectorAll('md-radio')[0]; expect(a1.checked).toBeFalse(); - const a2 = fixt.root.querySelectorAll('md-radio')[1]; + const a2 = root.querySelectorAll('md-radio')[1]; expect(a2.checked).toBeTrue(); await (new RadioHarness(a1)).clickWithMouse(); @@ -95,11 +97,12 @@ describe('md-radio', () => { describe('events', () => { it('Should trigger change event when a radio is selected', async () => { - fixt = await fixture(radioGroupPreSelected); + const root = env.render(radioGroupPreSelected); + await env.waitForStability(); const changeHandler = jasmine.createSpy('changeHandler'); - fixt.root.addEventListener('change', changeHandler); + root.addEventListener('change', changeHandler); - const a3 = fixt.root.querySelectorAll('md-radio')[2]; + const a3 = root.querySelectorAll('md-radio')[2]; harness = new RadioHarness(a3); await harness.clickWithMouse(); @@ -111,45 +114,48 @@ describe('md-radio', () => { describe('navigation', () => { it('Using arrow right should select the next radio button', async () => { - fixt = await fixture(radioGroupPreSelected); - const a2 = fixt.root.querySelectorAll('md-radio')[1]; + const root = env.render(radioGroupPreSelected); + await env.waitForStability(); + const a2 = root.querySelectorAll('md-radio')[1]; expect(a2.checked).toBeTrue(); const eventRight = new KeyboardEvent('keydown', {key: 'ArrowRight', bubbles: true}); a2.dispatchEvent(eventRight); - const a3 = fixt.root.querySelectorAll('md-radio')[2]; + const a3 = root.querySelectorAll('md-radio')[2]; expect(a3.checked).toBeTrue(); expect(a2.checked).toBeFalse(); }); it('Using arrow right on the last radio should select the first radio in that group', async () => { - fixt = await fixture(radioGroupPreSelected); + const root = env.render(radioGroupPreSelected); + await env.waitForStability(); - const a2 = fixt.root.querySelectorAll('md-radio')[1]; + const a2 = root.querySelectorAll('md-radio')[1]; expect(a2.checked).toBeTrue(); - const eventRight = new KeyboardEvent( - 'keydown', {key: 'ArrowRight', bubbles: true}); + const eventRight = + new KeyboardEvent('keydown', {key: 'ArrowRight', bubbles: true}); a2.dispatchEvent(eventRight); - const a3 = fixt.root.querySelectorAll('md-radio')[2]; + const a3 = root.querySelectorAll('md-radio')[2]; a3.dispatchEvent(eventRight); expect(a3.checked).toBeFalse(); - const a1 = fixt.root.querySelectorAll('md-radio')[0]; + const a1 = root.querySelectorAll('md-radio')[0]; expect(a1.checked).toBeTrue(); - const b1 = fixt.root.querySelectorAll('md-radio')[3]; + const b1 = root.querySelectorAll('md-radio')[3]; expect(b1.checked).toBeFalse(); }); }); describe('manages selection groups', () => { it('synchronously', async () => { - fixt = await fixture(radioGroup); + const root = env.render(radioGroup); + await env.waitForStability(); - const [a1, a2, b1] = [...fixt.root.querySelectorAll('md-radio')]; + const [a1, a2, b1] = [...root.querySelectorAll('md-radio')]; expect(a1.checked).toBeFalse(); expect(a2.checked).toBeFalse(); @@ -187,9 +193,10 @@ describe('md-radio', () => { }); it('after updates settle', async () => { - fixt = await fixture(radioGroup); + const root = env.render(radioGroup); + await env.waitForStability(); - const radios = [...fixt.root.querySelectorAll('md-radio')]; + const radios = [...root.querySelectorAll('md-radio')]; const [a1, a2, b1] = radios; const allUpdatesComplete = () => Promise.all(radios.map((radio) => radio.updateComplete)); @@ -234,8 +241,8 @@ describe('md-radio', () => { }); it('when checked before connected', async () => { - fixt = await fixture(html`
`); - const container = fixt.root.querySelector('main')!; + const root = env.render(html`
`); + const container = root.querySelector('main')!; const r1 = document.createElement('md-radio'); r1.name = 'a'; @@ -283,8 +290,9 @@ describe('md-radio', () => { it('in a lit repeat', async () => { const values = ['a1', 'a2']; - fixt = await fixture(repeatedRadio(values)); - const [a1, a2] = fixt.root.querySelectorAll('md-radio'); + const root = env.render(repeatedRadio(values)); + await env.waitForStability(); + const [a1, a2] = root.querySelectorAll('md-radio'); expect(a1.checked).toBeFalse(); expect(a2.checked).toBeFalse(); @@ -309,8 +317,9 @@ describe('md-radio', () => { let focusRing: MdFocusRing; beforeEach(async () => { - fixt = await fixture(defaultRadio); - element = fixt.root.querySelector('md-radio')!; + const root = env.render(defaultRadio); + await env.waitForStability(); + element = root.querySelector('md-radio')!; focusRing = element.shadowRoot!.querySelector('md-focus-ring')!; harness = new RadioHarness(element); });