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

fix(input-tel-dropdown): sync disabled state to dropdown

Browse source
This commit is contained in:
gvangeest 2022-04-14 11:27:17 +02:00 committed by Thijs Louisse
parent daea4dd522
commit 8ecfc31c0d
4 changed files with 24 additions and 0 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

5
.changeset/rotten-birds-call.md Normal file
View file

@ -0,0 +1,5 @@
---
'@lion/input-tel-dropdown': patch
---
sync disable state to dropdown for a11y

8
packages/input-tel-dropdown/src/LionInputTelDropdown.js
View file

@ -254,6 +254,14 @@ export class LionInputTelDropdown extends LionInputTel {
if (changedProperties.has('activeRegion')) {
this.__syncRegionWithDropdown();
}
if (changedProperties.has('disabled') || changedProperties.has('readOnly')) {
if (this.disabled || this.readOnly) {
this.refs.dropdown?.value?.setAttribute('disabled', '');
} else {
this.refs.dropdown?.value?.removeAttribute('disabled');
}
}
}
/**

10
packages/input-tel-dropdown/test-suites/LionInputTelDropdown.suite.js
View file

@ -134,6 +134,16 @@ export function runInputTelDropdownSuite({ klass } = { klass: LionInputTelDropdo
);
});
it('syncs disabled attribute to dropdown', async () => {
const el = await fixture(html` <${tag} disabled></${tag}> `);
expect(el.refs.dropdown.value?.hasAttribute('disabled')).to.be.true;
});
it('disables dropdown on readonly', async () => {
const el = await fixture(html` <${tag} readonly></${tag}> `);
expect(el.refs.dropdown.value?.hasAttribute('disabled')).to.be.true;
});
it('renders to prefix slot in light dom', async () => {
const el = await fixture(html` <${tag} .allowedRegions="${['DE']}"></${tag}> `);
const prefixSlot = /** @type {HTMLElement} */ (

1
packages/input-tel-dropdown/test-suites/index.js Normal file
View file

@ -0,0 +1 @@
export { runInputTelDropdownSuite } from './LionInputTelDropdown.suite.js';