diff --git a/.changeset/polite-otters-sort.md b/.changeset/polite-otters-sort.md new file mode 100644 index 0000000000..ade1ea2ef8 --- /dev/null +++ b/.changeset/polite-otters-sort.md @@ -0,0 +1,5 @@ +--- +'@lion/ui': patch +--- + +[form-core]: set aria-disabled next to the disabled attribute for NVDA screen reader diff --git a/packages/ui/components/form-core/src/FormControlMixin.js b/packages/ui/components/form-core/src/FormControlMixin.js index 52df9d9537..7eda6888cf 100644 --- a/packages/ui/components/form-core/src/FormControlMixin.js +++ b/packages/ui/components/form-core/src/FormControlMixin.js @@ -276,6 +276,10 @@ const FormControlMixinImplementation = superclass => updated(changedProperties) { super.updated(changedProperties); + if (changedProperties.has('disabled')) { + this._inputNode?.setAttribute('aria-disabled', this.disabled.toString()); + } + if (changedProperties.has('_ariaLabelledNodes')) { this.__reflectAriaAttr( 'aria-labelledby', diff --git a/packages/ui/components/form-core/test/FormControlMixin.test.js b/packages/ui/components/form-core/test/FormControlMixin.test.js index 123213732d..940b4956d6 100644 --- a/packages/ui/components/form-core/test/FormControlMixin.test.js +++ b/packages/ui/components/form-core/test/FormControlMixin.test.js @@ -198,6 +198,21 @@ describe('FormControlMixin', () => { expect(descriptionIdsBefore).to.equal(descriptionIdsAfter); }); + it('sets aria-disabled on inputNode based on disabled property', async () => { + const el = /** @type {FormControlMixinClass} */ ( + await fixture(html` + <${tag}>${inputSlot} + `) + ); + const { _inputNode } = getFormControlMembers(el); + expect(_inputNode.hasAttribute('aria-disabled')).to.be.true; + expect(_inputNode.getAttribute('aria-disabled')).to.equal('false'); + + el.disabled = true; + + expect(_inputNode.getAttribute('aria-disabled')).to.equal('false'); + }); + it('clicking the label should call `_onLabelClick`', async () => { const spy = sinon.spy(); const el = /** @type {FormControlMixinClass} */ (