Skip to content

Commit

Permalink
feat(switch): Switch now supports label activation by setting formAss…
Browse files Browse the repository at this point in the history
…ociated.

PiperOrigin-RevId: 495993033
  • Loading branch information
material-web-copybara authored and copybara-github committed Dec 17, 2022
1 parent 3f6070e commit 7473f46
Show file tree
Hide file tree
Showing 2 changed files with 36 additions and 5 deletions.
20 changes: 15 additions & 5 deletions switch/lib/switch.ts
Original file line number Diff line number Diff line change
Expand Up @@ -15,6 +15,7 @@ import {ClassInfo, classMap} from 'lit/directives/class-map.js';
import {ifDefined} from 'lit/directives/if-defined.js';

import {ActionElement, BeginPressConfig, EndPressConfig} from '../../actionelement/action-element.js';
import {isActivationClick} from '../../controller/events.js';
import {FormController, getFormValue} from '../../controller/form-controller.js';
import {ariaProperty} from '../../decorators/aria-property.js';
import {pointerPress as focusRingPointerPress, shouldShowStrongFocus} from '../../focus/strong-focus.js';
Expand All @@ -30,6 +31,8 @@ export class Switch extends ActionElement {
static override shadowRootOptions:
ShadowRootInit = {mode: 'open', delegatesFocus: true};

static formAssociated = true;

/**
* Disables the switch and makes it non-interactive.
*/
Expand Down Expand Up @@ -65,7 +68,9 @@ export class Switch extends ActionElement {
// Ripple
@query('md-ripple') readonly ripple!: MdRipple;

// FormController
/**
* The associated form element with which this element's value will submit.
*/
get form() {
return this.closest('form');
}
Expand All @@ -88,12 +93,17 @@ export class Switch extends ActionElement {
constructor() {
super();
this.addController(new FormController(this));
this.addEventListener('click', (event: MouseEvent) => {
if (!isActivationClick(event)) {
return;
}
this.button?.focus();
this.endPress({cancelled: false});
});
}

override click() {
this.endPress({cancelled: false});
super.click();
}
// Button
@query('button', true) private readonly button!: HTMLButtonElement|null;

protected override render(): TemplateResult {
const ariaLabelValue = this.ariaLabel ? this.ariaLabel : undefined;
Expand Down
21 changes: 21 additions & 0 deletions switch/lib/switch_test.ts
Original file line number Diff line number Diff line change
Expand Up @@ -39,6 +39,12 @@ function renderSwitchInForm(propsInit: Partial<TestSwitch> = {}) {
`;
}

function renderSwitchInLabel(propsInit: Partial<TestSwitch> = {}) {
return html`
<label>${renderSwitch(propsInit)}</label>
`;
}

describe('md-switch', () => {
const env = new Environment();

Expand Down Expand Up @@ -227,5 +233,20 @@ describe('md-switch', () => {
const formData = await harness.submitForm();
expect(formData.get('foo')).toEqual('bar');
});

describe('label activation', () => {
let label: HTMLLabelElement;

it('toggles when label is clicked', async () => {
toggle = await switchElement({}, renderSwitchInLabel);
label = toggle.parentElement as HTMLLabelElement;
label.click();
await env.waitForStability();
expect(toggle.selected).toBeTrue();
label.click();
await env.waitForStability();
expect(toggle.selected).toBeFalse();
});
});
});
});

0 comments on commit 7473f46

Please sign in to comment.