ayo/lion
1
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

fix(switch): remove one of the two nested role="switch"

Browse source
This commit is contained in:
Thijs Louisse 2022-09-19 18:07:46 +02:00 committed by gerjanvangeest
parent 0d4c42ab64
commit adfa29a049
3 changed files with 26 additions and 9 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

5
.changeset/afraid-nails-tap.md Normal file
View file

@ -0,0 +1,5 @@
---
'@lion/ui': patch
---
[switch] remove one of the two role="switch" (nested-interactive). Only leave it on the switch-button.

3
packages/ui/components/switch/src/LionSwitch.js
View file

@ -80,9 +80,6 @@ export class LionSwitch extends ScopedElementsMixin(ChoiceInputMixin(LionField))
connectedCallback() { connectedCallback() {
super.connectedCallback(); super.connectedCallback();
if (!this.role) {
this.role = 'switch';
}
this.addEventListener('checked-changed', this.__handleButtonSwitchCheckedChanged); this.addEventListener('checked-changed', this.__handleButtonSwitchCheckedChanged);
if (this._labelNode) { if (this._labelNode) {
this._labelNode.addEventListener('click', this._toggleChecked); this._labelNode.addEventListener('click', this._toggleChecked);

27
packages/ui/components/switch/test/lion-switch.test.js
View file

@ -10,7 +10,7 @@ import '@lion/ui/define/lion-switch.js';
/** /**
* @typedef {import('../src/LionSwitchButton.js').LionSwitchButton} LionSwitchButton * @typedef {import('../src/LionSwitchButton.js').LionSwitchButton} LionSwitchButton
* @typedef {import('lit').TemplateResult} TemplateResult * @typedef {import('lit').TemplateResult} TemplateResult
* @typedef {import('../../form-core/types/FormControlMixinTypes.js').FormControlHost} FormControlHost * @typedef {import('@lion/ui/types/form-core.js').FormControlHost} FormControlHost
*/ */
const IsTrue = class extends Validator { const IsTrue = class extends Validator {
@ -215,10 +215,25 @@ describe('lion-switch', () => {
expect(el.showsFeedbackFor).to.eql(['info']); expect(el.showsFeedbackFor).to.eql(['info']);
}); });
it('should not cause error by setting an attribute in the constructor', async () => { describe('Accessibility', () => {
const div = await fixture(html`<div></div>`); it('passes axe a11y audit', async () => {
const el = /** @type {LionSwitch} */ (document.createElement('lion-switch')); const el = await fixture(html`<lion-switch name="hi" label="My label"></lion-switch>`);
div.appendChild(el); await expect(el).to.be.accessible();
expect(el.role).to.equal('switch');
el.checked = true;
await el.updateComplete;
await expect(el).to.be.accessible();
});
it('passes axe a11y audit when disabled', async () => {
const el = await fixture(
html`<lion-switch name="hi" label="My label" disabled></lion-switch>`,
);
await expect(el).to.be.accessible();
el.checked = true;
await el.updateComplete;
await expect(el).to.be.accessible();
});
}); });
}); });