From 1fc6056c513fbbaaab43bd9ae7b47ae186181c6a Mon Sep 17 00:00:00 2001
From: Charles Hacskaylo <charlesh88@gmail.com>
Date: Fri, 26 Jan 2024 14:55:13 -0800
Subject: [PATCH] Set disabled items to use disabled property (#7342)

* Closes #7322
- New CSS for `aria-disabled = true` property.
- Changed multiple items to use aria-disabled instead of .disabled, including:
  - Action menu
  - Super menu
  - Notebook drag area
- Tree item style modded to only italicize when is-navigated and is being edited.

* Closes #7322
- New CSS for `aria-disabled = true` property.
- Changed multiple items to use aria-disabled instead of .disabled, including:
  - Action menu
  - Super menu
  - Notebook drag area
- Tree item style modded to only italicize when is-navigated and is being edited.
- Create button sets itself to `disabled` when the editor is in use.

* Closes #7322
- Create button now _actually_ sets itself to `aria-disabled` when the editor is in use.
- CSS removes selector for `.is-editing`.

* fix conflict

---------

Co-authored-by: John Hill <john.c.hill@nasa.gov>
---
 src/api/menu/components/MenuComponent.vue             |  6 ++++--
 src/api/menu/components/SuperMenu.vue                 |  3 ++-
 src/plugins/notebook/components/NotebookComponent.vue |  2 +-
 src/styles/_global.scss                               |  3 ++-
 src/ui/layout/CreateButton.vue                        | 11 +++++++++++
 src/ui/layout/create-button.scss                      |  4 ----
 src/ui/layout/mct-tree.scss                           |  2 --
 7 files changed, 20 insertions(+), 11 deletions(-)

diff --git a/src/api/menu/components/MenuComponent.vue b/src/api/menu/components/MenuComponent.vue
index 60b49b5bfc..d7d334f58b 100644
--- a/src/api/menu/components/MenuComponent.vue
+++ b/src/api/menu/components/MenuComponent.vue
@@ -28,7 +28,8 @@
             v-for="action in actionGroups"
             :key="action.name"
             role="menuitem"
-            :class="[action.cssClass, action.isDisabled ? 'disabled' : '']"
+            :aria-disabled="action.isDisabled"
+            :class="action.cssClass"
             :aria-label="action.name"
             :title="action.description"
             @click="action.onItemClicked"
@@ -51,7 +52,8 @@
         v-for="action in options.actions"
         :key="action.name"
         role="menuitem"
-        :class="[action.cssClass, action.isDisabled ? 'disabled' : '']"
+        :aria-disabled="action.isDisabled"
+        :class="action.cssClass"
         :aria-label="action.name"
         :title="action.description"
         @click="action.onItemClicked"
diff --git a/src/api/menu/components/SuperMenu.vue b/src/api/menu/components/SuperMenu.vue
index 606fe0b3e7..1bbdaf940e 100644
--- a/src/api/menu/components/SuperMenu.vue
+++ b/src/api/menu/components/SuperMenu.vue
@@ -37,7 +37,8 @@
             v-for="action in actionGroups"
             :key="action.name"
             role="menuitem"
-            :class="[action.cssClass, action.isDisabled ? 'disabled' : '']"
+            :aria-disabled="action.isDisabled"
+            :class="action.cssClass"
             :title="action.description"
             @click="action.onItemClicked"
             @mouseover="toggleItemDescription(action)"
diff --git a/src/plugins/notebook/components/NotebookComponent.vue b/src/plugins/notebook/components/NotebookComponent.vue
index ccb1276276..4c2d7a4c02 100644
--- a/src/plugins/notebook/components/NotebookComponent.vue
+++ b/src/plugins/notebook/components/NotebookComponent.vue
@@ -96,7 +96,7 @@
         </div>
         <div
           v-if="selectedPage && !selectedPage.isLocked"
-          :class="{ disabled: activeTransaction }"
+          :aria-disabled="activeTransaction"
           class="c-notebook__drag-area icon-plus"
           @click="newEntry(null, $event)"
           @dragover="dragOver"
diff --git a/src/styles/_global.scss b/src/styles/_global.scss
index c1f387561c..acb504602f 100644
--- a/src/styles/_global.scss
+++ b/src/styles/_global.scss
@@ -360,11 +360,12 @@ body.desktop .has-local-controls {
   }
 }
 
+[aria-disabled = 'true'],
 *[disabled],
 .disabled {
   opacity: $controlDisabledOpacity;
+  cursor: not-allowed !important;
   pointer-events: none !important;
-  cursor: default !important;
 }
 
 /******************************************************** RESPONSIVE CONTAINERS */
diff --git a/src/ui/layout/CreateButton.vue b/src/ui/layout/CreateButton.vue
index 2a7a79ae3c..45d1d9e059 100644
--- a/src/ui/layout/CreateButton.vue
+++ b/src/ui/layout/CreateButton.vue
@@ -23,6 +23,7 @@
   <div ref="createButton" class="c-create-button--w">
     <button
       class="c-create-button c-button--menu c-button--major icon-plus"
+      :aria-disabled="isEditing"
       @click.prevent.stop="showCreateMenu"
     >
       <span class="c-button__label">Create</span>
@@ -38,6 +39,7 @@ export default {
   data: function () {
     return {
       menuItems: {},
+      isEditing: this.openmct.editor.isEditing(),
       selectedMenuItem: {},
       opened: false
     };
@@ -57,6 +59,12 @@ export default {
       });
     }
   },
+  mounted() {
+    this.openmct.editor.on('isEditing', this.toggleEdit);
+  },
+  unmounted() {
+    this.openmct.editor.off('isEditing', this.toggleEdit);
+  },
   methods: {
     getItems() {
       let keys = this.openmct.types.listKeys();
@@ -89,6 +97,9 @@ export default {
 
       this.openmct.menus.showSuperMenu(x, y, this.sortedItems, menuOptions);
     },
+    toggleEdit(isEditing) {
+      this.isEditing = isEditing;
+    },
     create(key) {
       const createAction = new CreateAction(this.openmct, key, this.openmct.router.path[0]);
 
diff --git a/src/ui/layout/create-button.scss b/src/ui/layout/create-button.scss
index b7d934a3fe..bd3f9cc12d 100644
--- a/src/ui/layout/create-button.scss
+++ b/src/ui/layout/create-button.scss
@@ -4,10 +4,6 @@
 }
 
 .c-create-button {
-  .is-editing & {
-    @include disabled();
-  }
-
   .c-button__label {
     text-transform: $createBtnTextTransform;
   }
diff --git a/src/ui/layout/mct-tree.scss b/src/ui/layout/mct-tree.scss
index ee6ffb5c99..62b197281d 100644
--- a/src/ui/layout/mct-tree.scss
+++ b/src/ui/layout/mct-tree.scss
@@ -203,8 +203,6 @@
 
 .is-editing .is-navigated-object {
   a[class*='__item__label'] {
-    opacity: 0.4;
-
     [class*='__name'] {
       font-style: italic;
     }