Set aria-disabled to true or delete it (#2452)

fix: remove aria-disabled attribute
ing-bank · Jan 22, 2025 · a1d6dd9 · a1d6dd9
1 parent e6a33d9
commit a1d6dd9
Show file tree

Hide file tree

Showing 3 changed files with 11 additions and 2 deletions.
diff --git a/.changeset/hip-nails-matter.md b/.changeset/hip-nails-matter.md
@@ -0,0 +1,5 @@
+---
+'@lion/ui': patch
+---
+
+[button] set the 'aria-disabled' attribute to 'true' when disabled and remove it when not disabled
diff --git a/packages/ui/components/button/src/LionButton.js b/packages/ui/components/button/src/LionButton.js
@@ -149,7 +149,11 @@ export class LionButton extends DisabledWithTabIndexMixin(LitElement) {
     super.updated(changedProperties);
 
     if (changedProperties.has('disabled')) {
-      this.setAttribute('aria-disabled', `${this.disabled}`); // create mixin if we need it in more places
+      if (this.disabled) {
+        this.setAttribute('aria-disabled', 'true');
+      } else if (this.getAttribute('aria-disabled') !== null) {
+        this.removeAttribute('aria-disabled');
+      }
     }
   }
 

diff --git a/packages/ui/components/button/test-suites/LionButton.suite.js b/packages/ui/components/button/test-suites/LionButton.suite.js
@@ -40,7 +40,7 @@ export function LionButtonSuite({ klass = LionButton } = {}) {
       el.disabled = false;
       await el.updateComplete;
       expect(el.getAttribute('tabindex')).to.equal('0');
-      expect(el.getAttribute('aria-disabled')).to.equal('false');
+      expect(el.getAttribute('aria-disabled')).to.not.exist;
       expect(el.hasAttribute('disabled')).to.equal(false);
 
       el.disabled = true;