diff --git a/.changeset/rotten-birds-call.md b/.changeset/rotten-birds-call.md new file mode 100644 index 000000000..3efd51752 --- /dev/null +++ b/.changeset/rotten-birds-call.md @@ -0,0 +1,5 @@ +--- +'@lion/input-tel-dropdown': patch +--- + +sync disable state to dropdown for a11y diff --git a/packages/input-tel-dropdown/src/LionInputTelDropdown.js b/packages/input-tel-dropdown/src/LionInputTelDropdown.js index 68954d7c4..5439ef606 100644 --- a/packages/input-tel-dropdown/src/LionInputTelDropdown.js +++ b/packages/input-tel-dropdown/src/LionInputTelDropdown.js @@ -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'); + } + } } /** diff --git a/packages/input-tel-dropdown/test-suites/LionInputTelDropdown.suite.js b/packages/input-tel-dropdown/test-suites/LionInputTelDropdown.suite.js index c742e4a6f..d2cf31319 100644 --- a/packages/input-tel-dropdown/test-suites/LionInputTelDropdown.suite.js +++ b/packages/input-tel-dropdown/test-suites/LionInputTelDropdown.suite.js @@ -134,6 +134,16 @@ export function runInputTelDropdownSuite({ klass } = { klass: LionInputTelDropdo ); }); + it('syncs disabled attribute to dropdown', async () => { + const el = await fixture(html` <${tag} disabled> `); + expect(el.refs.dropdown.value?.hasAttribute('disabled')).to.be.true; + }); + + it('disables dropdown on readonly', async () => { + const el = await fixture(html` <${tag} readonly> `); + 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']}"> `); const prefixSlot = /** @type {HTMLElement} */ ( diff --git a/packages/input-tel-dropdown/test-suites/index.js b/packages/input-tel-dropdown/test-suites/index.js new file mode 100644 index 000000000..710d68473 --- /dev/null +++ b/packages/input-tel-dropdown/test-suites/index.js @@ -0,0 +1 @@ +export { runInputTelDropdownSuite } from './LionInputTelDropdown.suite.js';