fix: DisplayLayout and FlexibleLayout toolbar actions only apply to selected layout (#7184)

* refactor: convert to ES6 function

* fix: include `keyString` in event name

- This negates the need for complicated logic in determining which objectView the action was intended for

* fix: handle the case of currentView being null

* fix: add keyString to flexibleLayout toolbar events

* fix: properly unregister listeners

* fix: remove unused imports

* fix: revert parameter reorder

* refactor: replace usage of `arguments` with `...args`

* fix: add a11y to display layout + toolbar

* test: add first cut of layout toolbar suite

* test: cleanup a bit and add Image test

* test: add stubs

* fix: remove unused variable

* refactor(DisplayLayoutToolbar): convert to ES6 class

* test: generate localStorage data for display layout tests

* fix: clarify "Add" button label

* test: cleanup and don't parameterize tests

* test: fix path for recycled_local_storage.json

* fix: path to local storage file

* docs: add documentation for
utilizing localStorage in e2e

* fix: path to recycled_local_storage.json

* docs: add note hyperlink

src/plugins/displayLayout/components/BoxView.vue

@@ -33,6 +33,9 @@
         class="c-box-view u-style-receiver js-style-receiver"
         :class="[styleClass]"
         :style="style"
+        role="application"
+        aria-roledescription="draggable box"
+        aria-label="Box"
       ></div>
     </template>
   </layout-frame>

src/plugins/displayLayout/components/DisplayLayout.vue

@@ -36,6 +36,8 @@
       :grid-size="gridSize"
       :show-grid="showGrid"
       :grid-dimensions="gridDimensions"
+      :aria-label="`${domainObject.name} Layout Grid`"
+      :aria-hidden="showGrid ? 'false' : 'true'"
     />
     <div
       v-if="shouldDisplayLayoutDimensions"

src/plugins/displayLayout/components/DisplayLayoutGrid.vue

@@ -20,7 +20,14 @@
  at runtime from the About dialog for additional information.
 -->
 <template>
-  <div class="l-layout__grid-holder" :class="{ 'c-grid': showGrid }">
+  <div
+    class="l-layout__grid-holder"
+    :class="{ 'c-grid': showGrid }"
+    role="grid"
+    :aria-label="'Layout Grid'"
+    :aria-hidden="showGrid ? 'false' : 'true'"
+    :aria-live="showGrid ? 'polite' : 'off'"
+  >
     <div
       v-if="gridSize[0] >= 3"
       class="c-grid__x l-grid l-grid-x"

src/plugins/displayLayout/components/EllipseView.vue

@@ -33,6 +33,9 @@
         class="c-ellipse-view u-style-receiver js-style-receiver"
         :class="[styleClass]"
         :style="style"
+        role="application"
+        aria-roledescription="draggable ellipse"
+        aria-label="Ellipse"
       ></div>
     </template>
   </layout-frame>

src/plugins/displayLayout/components/LayoutFrame.vue

@@ -30,13 +30,18 @@
     :style="style"
   >
     <slot name="content"></slot>
-    <div class="c-frame__move-bar" @mousedown.left="startMove($event)"></div>
+    <div
+      class="c-frame__move-bar"
+      :aria-label="`Move ${typeName} Frame`"
+      @mousedown.left="startMove($event)"
+    ></div>
   </div>
 </template>
 
 <script>
 import _ from 'lodash';
 
+import DRAWING_OBJECT_TYPES from '../DrawingObjectTypes';
 import LayoutDrag from './../LayoutDrag';
 
 export default {
@@ -58,6 +63,13 @@ export default {
   },
   emits: ['move', 'end-move'],
   computed: {
+    typeName() {
+      const { type } = this.item;
+      if (DRAWING_OBJECT_TYPES[type]) {
+        return DRAWING_OBJECT_TYPES[type].name;
+      }
+      return 'Sub-object';
+    },
     size() {
       let { width, height } = this.item;
 

src/plugins/displayLayout/components/LineView.vue

@@ -21,7 +21,14 @@
 -->
 
 <template>
-  <div class="l-layout__frame c-frame no-frame c-line-view" :class="[styleClass]" :style="style">
+  <div
+    class="l-layout__frame c-frame no-frame c-line-view"
+    :class="[styleClass]"
+    :style="style"
+    aria-role="application"
+    aria-roledescription="draggable line"
+    aria-label="Line"
+  >
     <svg width="100%" height="100%">
       <line
         v-bind="linePosition"

src/plugins/displayLayout/components/TextView.vue

@@ -35,6 +35,9 @@
         :data-font="item.font"
         :class="[styleClass]"
         :style="style"
+        role="application"
+        aria-roledescription="draggable text"
+        aria-label="Text"
       >
         <div class="c-text-view__text">{{ item.text }}</div>
       </div>

src/plugins/displayLayout/plugin.js

@@ -85,10 +85,9 @@ class DisplayLayoutView {
     };
   }
 
-  contextAction() {
-    const action = arguments[0];
-    if (this.component && this.component.$refs.displayLayout[action]) {
-      this.component.$refs.displayLayout[action](...Array.from(arguments).splice(1));
+  contextAction(action, ...rest) {
+    if (this?.component.$refs.displayLayout[action]) {
+      this.component.$refs.displayLayout[action](...rest);
     }
   }