fix(a11y): use disabled attribute instead of .is-disabled (#260)

* Use disabled attr instead of .is-disabled

* Update test to check for disabled attribute

src/shared/menu/plugin.ts

@@ -46,7 +46,6 @@ export class MenuView implements PluginView {
     private readonly: boolean;
     private editorType: EditorType;
 
-    static disabledClass = "is-disabled";
     static activeClass = "is-selected";
     static invisibleClass = "d-none";
 
@@ -106,7 +105,7 @@ export class MenuView implements PluginView {
             }
 
             // if the button is "disabled", return early
-            if (target.classList.contains(MenuView.disabledClass)) {
+            if (target.hasAttribute("disabled")) {
                 return;
             }
 
@@ -226,9 +225,9 @@ export class MenuView implements PluginView {
             !isReadonly &&
             command.command(this.view.state, undefined, this.view);
 
-        dom.classList.remove(MenuView.disabledClass);
         dom.classList.remove(MenuView.activeClass);
         dom.classList.remove(MenuView.invisibleClass);
+        dom.removeAttribute("disabled");
 
         dom.dataset.key = entry.key;
 
@@ -238,7 +237,7 @@ export class MenuView implements PluginView {
         } else if (active) {
             dom.classList.add(MenuView.activeClass);
         } else if (!enabled) {
-            dom.classList.add(MenuView.disabledClass);
+            dom.setAttribute("disabled", "");
         }
 
         // if this is a dropdown, check all of its children as well

src/styles/custom-components.css

@@ -123,11 +123,6 @@
     color: var(--theme-secondary-500) !important;
 }
 
-.s-btn.s-editor-btn.is-disabled {
-    background-color: transparent !important;
-    opacity: 0.5;
-}
-
 .s-btn.s-editor-btn.s-btn__dropdown {
     padding-right: var(--su12);
 }
@@ -150,7 +145,7 @@
     font-weight: 400;
 }
 
-.s-editor--dropdown-item.is-disabled {
+.s-editor--dropdown-item[disabled] {
     opacity: 0.5;
 }
 

test/shared/menu/plugin.test.ts

@@ -177,7 +177,8 @@ describe("menu plugin view", () => {
         expect(activeCommand(view.state)).toBe(false);
 
         let item = getItem();
-        expect(item.classList).not.toContain("is-disabled");
+        expect(item.attributes).not.toHaveProperty("disabled");
+        expect(item.attributes).not.toContain("disabled");
         expect(item.classList).not.toContain("is-selected");
         expect(item.classList).not.toContain("d-none");
 
@@ -197,7 +198,7 @@ describe("menu plugin view", () => {
         view.updateState(setDisabled(view.state));
         expect(enabledCommand(view.state, null)).toBe(false);
         item = getItem();
-        expect(item.classList).toContain("is-disabled");
+        expect(item.attributes).toHaveProperty("disabled");
     });
 
     it.todo("should dispatch an item's command when clicked");