fix(#7524): Open in New Tab action from a sub-object in a layout (#7542)

* refactor: url tools use named exports

* fix: refactor method and remove customUrlParams

* test(e2e): verify bounds are preserved in data pivoting

* test: remove test as feature is no longer needed

- dataVisualization logic has moved from MMGIS plugin to the open source. As such, we can just use the time conductor bounds

* refactor: autoformat keeps changing this so i'mma just commit it

* refactor: remove unnecessary code

* refactor: simplify, add docs

* Revert "refactor: remove unnecessary code"

This reverts commit 87aef35c510230835fb682b80e89a6006ef2d923.

* a11y: improve aria labels for ITC

* fix: simplify url method

* fix: update ITC app actions

* test: add test to generate test data for display layout w/ overlay plot + ITC enabled

* test(e2e): add suite + test for open in new tab from subobject

- needs cleanup

* a11y: various a11y improvement drivebys

* a11y: clock indicator needs to be quiet

* a11y: add `aria-live` to SuperMenu details

* a11y: greatly improve a11y of Menus and SuperMenus

* test(e2e): clean up test

* fix: improve a11y for context menus, fix test

* chore: remove nop-longer-recommended extension

* feat: provide one more bound option for example data viz

* fix: no need for `mount`, use dynamic rendering instead

* Revert "fix: simplify url method"

This reverts commit b24c7dabc783a9a1c3f2460eada99f452259f566.

* fix: correct time conductor bounds when opening in a new tab from a plot in the inspector

* test: fix e2e tests

* Revert "test: remove test as feature is no longer needed"

This reverts commit 759ebd4667bffb1979d5f62af6b47f349dcd9f77.

* test: move 2p annotation to test

* test: fix e2e

* fix: no words for the word god today

* test: fix e2e

* fix: e2e test

* test: fix test

* driveby: fix perf test

* fix: revert required prop change

---------

Co-authored-by: David Tsay <3614296+davetsay@users.noreply.github.com>
Co-authored-by: John Hill <john.c.hill@nasa.gov>

src/api/menu/components/MenuComponent.vue

@@ -29,10 +29,13 @@
             :key="action.name"
             role="menuitem"
             :aria-disabled="action.isDisabled"
-            :class="action.cssClass"
             :aria-label="action.name"
+            aria-describedby="item-description"
+            :class="action.cssClass"
             :title="action.description"
             @click="action.onItemClicked"
+            @mouseover="toggleItem(action)"
+            @mouseleave="toggleItem()"
           >
             {{ action.name }}
           </li>
@@ -52,16 +55,23 @@
         v-for="action in options.actions"
         :key="action.name"
         role="menuitem"
+        aria-describedby="item-description"
         :aria-disabled="action.isDisabled"
         :class="action.cssClass"
         :aria-label="action.name"
         :title="action.description"
         @click="action.onItemClicked"
+        @mouseover="toggleItem(action)"
+        @mouseleave="toggleItem()"
       >
         {{ action.name }}
       </li>
       <li v-if="options.actions.length === 0">No actions defined.</li>
     </ul>
+    <div v-if="hoveredItem" id="item-description" class="visually-hidden" aria-live="polite">
+      <span v-if="hoveredItem.name">{{ hoveredItem.name }}</span>
+      <span v-if="hoveredItem.description">: {{ hoveredItem.description }}</span>
+    </div>
   </div>
 </template>
 
@@ -70,11 +80,21 @@ import popupMenuMixin from '../mixins/popupMenuMixin.js';
 export default {
   mixins: [popupMenuMixin],
   inject: ['options'],
+  data() {
+    return {
+      hoveredItem: null
+    };
+  },
   computed: {
     optionsLabel() {
-      const label = this.options.label ? `${this.options.label} Menu` : 'Menu';
+      const label = this.options.label ? `${this.options.label} Context Menu` : 'Context Menu';
       return label;
     }
+  },
+  methods: {
+    toggleItem(action) {
+      this.hoveredItem = action ?? null;
+    }
   }
 };
 </script>

src/api/menu/components/SuperMenu.vue

@@ -38,8 +38,8 @@
             :key="action.name"
             role="menuitem"
             :aria-disabled="action.isDisabled"
+            aria-describedby="item-description"
             :class="action.cssClass"
-            :title="action.description"
             @click="action.onItemClicked"
             @mouseover="toggleItemDescription(action)"
             @mouseleave="toggleItemDescription()"
@@ -64,7 +64,7 @@
         role="menuitem"
         :class="action.cssClass"
         :aria-label="action.name"
-        :title="action.description"
+        aria-describedby="item-description"
         @click="action.onItemClicked"
         @mouseover="toggleItemDescription(action)"
         @mouseleave="toggleItemDescription()"
@@ -74,13 +74,13 @@
       <li v-if="options.actions.length === 0">No actions defined.</li>
     </ul>
 
-    <div class="c-super-menu__item-description">
-      <div :class="['l-item-description__icon', 'bg-' + hoveredItem.cssClass]"></div>
+    <div aria-live="polite" class="c-super-menu__item-description">
+      <div :class="itemDescriptionIconClass"></div>
       <div class="l-item-description__name">
-        {{ hoveredItem.name }}
+        {{ hoveredItemName }}
       </div>
-      <div class="l-item-description__description">
-        {{ hoveredItem.description }}
+      <div id="item-description" class="l-item-description__description">
+        {{ hoveredItemDescription }}
       </div>
     </div>
   </div>
@@ -90,26 +90,39 @@ import popupMenuMixin from '../mixins/popupMenuMixin.js';
 export default {
   mixins: [popupMenuMixin],
   inject: ['options'],
-  data: function () {
+  data() {
     return {
-      hoveredItem: {}
+      hoveredItem: null
     };
   },
   computed: {
     optionsLabel() {
       const label = this.options.label ? `${this.options.label} Super Menu` : 'Super Menu';
       return label;
+    },
+    itemDescriptionIconClass() {
+      const iconClass = ['l-item-description__icon'];
+      if (this.hoveredItem) {
+        iconClass.push('bg-' + this.hoveredItem.cssClass);
+      }
+      return iconClass;
+    },
+    hoveredItemName() {
+      return this.hoveredItem?.name ?? '';
+    },
+    hoveredItemDescription() {
+      return this.hoveredItem?.description ?? '';
     }
   },
   methods: {
-    toggleItemDescription(action = {}) {
+    toggleItemDescription(action = null) {
       const hoveredItem = {
-        name: action.name,
-        description: action.description,
-        cssClass: action.cssClass
+        name: action?.name,
+        description: action?.description,
+        cssClass: action?.cssClass
       };
 
-      this.hoveredItem = Object.assign({}, this.hoveredItem, hoveredItem);
+      this.hoveredItem = hoveredItem;
     }
   }
 };