diff --git a/.changeset/famous-wolves-notice.md b/.changeset/famous-wolves-notice.md new file mode 100644 index 000000000..316e201a2 --- /dev/null +++ b/.changeset/famous-wolves-notice.md @@ -0,0 +1,5 @@ +--- +'@lion/switch': patch +--- + +**switch**: clicking label focuses button diff --git a/packages/switch/src/LionSwitch.js b/packages/switch/src/LionSwitch.js index fda6552cc..574b96f6d 100644 --- a/packages/switch/src/LionSwitch.js +++ b/packages/switch/src/LionSwitch.js @@ -130,4 +130,15 @@ export class LionSwitch extends ScopedElementsMixin(ChoiceInputMixin(LionField)) _syncButtonSwitch() { this._inputNode.disabled = this.disabled; } + + /** + * @configure FormControlMixin + * @protected + */ + _onLabelClick() { + if (this.disabled) { + return; + } + this._inputNode.focus(); + } } diff --git a/packages/switch/test/lion-switch.test.js b/packages/switch/test/lion-switch.test.js index d0368e2c5..60c828cad 100644 --- a/packages/switch/test/lion-switch.test.js +++ b/packages/switch/test/lion-switch.test.js @@ -39,6 +39,18 @@ describe('lion-switch', () => { expect(el.checked).to.be.false; }); + it('clicking the label should focus the toggle button', async () => { + const el = await fixture(html``); + el._labelNode.click(); + expect(document.activeElement).to.equal(el._inputNode); + }); + + it('clicking the label should not focus the toggle button when disabled', async () => { + const el = await fixture(html``); + el._labelNode.click(); + expect(document.activeElement).to.not.equal(el._inputNode); + }); + it('should sync its "disabled" state to child button', async () => { const el = await fixture(html``); const { inputNode } = getProtectedMembers(el);