fix(form-core): set aria-disabled next to the disabled attribute for …

…NVDA screen reader
ing-bank · Feb 19, 2024 · 19256d3 · 19256d3
1 parent 059b018
commit 19256d3
Show file tree

Hide file tree

Showing 3 changed files with 24 additions and 0 deletions.
diff --git a/.changeset/polite-otters-sort.md 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
@@ -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
@@ -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}</${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 () => {
       const spy = sinon.spy();
       const el = /** @type {FormControlMixinClass} */ (