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

@@ -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"

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)"

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"

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 */

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]);
 

src/ui/layout/create-button.scss

@@ -4,10 +4,6 @@
 }
 
 .c-create-button {
-  .is-editing & {
-    @include disabled();
-  }
-
   .c-button__label {
     text-transform: $createBtnTextTransform;
   }

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;
     }