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

fix(form-core): set aria-disabled next to the disabled attribute for NVDA screen reader

Browse source
This commit is contained in:
gerjanvangeest 2024-02-07 16:25:04 +01:00 committed by Thijs Louisse
parent 059b018793
commit 19256d31bf
3 changed files with 24 additions and 0 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

5
.changeset/polite-otters-sort.md Normal file
View file

@ -0,0 +1,5 @@
---
'@lion/ui': patch
---
[form-core]: set aria-disabled next to the disabled attribute for NVDA screen reader

4
packages/ui/components/form-core/src/FormControlMixin.js
View file

@ -276,6 +276,10 @@ const FormControlMixinImplementation = superclass =>
updated(changedProperties) { updated(changedProperties) {
super.updated(changedProperties); super.updated(changedProperties);
if (changedProperties.has('disabled')) {
this._inputNode?.setAttribute('aria-disabled', this.disabled.toString());
}
if (changedProperties.has('_ariaLabelledNodes')) { if (changedProperties.has('_ariaLabelledNodes')) {
this.__reflectAriaAttr( this.__reflectAriaAttr(
'aria-labelledby', 'aria-labelledby',

15
packages/ui/components/form-core/test/FormControlMixin.test.js
View file

@ -198,6 +198,21 @@ describe('FormControlMixin', () => {
expect(descriptionIdsBefore).to.equal(descriptionIdsAfter); 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}</${tag}>
`)
);
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 () => { it('clicking the label should call `_onLabelClick`', async () => {
const spy = sinon.spy(); const spy = sinon.spy();
const el = /** @type {FormControlMixinClass} */ ( const el = /** @type {FormControlMixinClass} */ (