fix(#7234): Fix frame deletion in Flexible Layouts (#7244)

* fix: use the correct event name for frame deletion

* test: add test for frame removal

* refactor: update test locators, add a11y

* test: upgrade locator

* test: assert dialog text

e2e/tests/functional/plugins/flexibleLayout/flexibleLayout.e2e.spec.js

@@ -284,16 +284,29 @@ test.describe('Flexible Layout Toolbar Actions @localStorage', () => {
       type: 'issue',
       description: 'https://github.com/nasa/openmct/issues/7234'
     });
-    await page.locator('div:nth-child(5) > .c-fl-container__frames-holder').click();
-    expect(await page.locator('.c-fl-container').count()).toEqual(2);
+    expect(await page.getByRole('group', { name: 'Container' }).count()).toEqual(2);
+    await page.getByRole('group', { name: 'Container' }).nth(1).click();
     await page.getByTitle('Add Container').click();
-    expect(await page.locator('.c-fl-container').count()).toEqual(3);
+    expect(await page.getByRole('group', { name: 'Container' }).count()).toEqual(3);
     await page.getByTitle('Remove Container').click();
+    await expect(page.getByRole('dialog')).toHaveText(
+      'This action will permanently delete this container from this Flexible Layout. Do you want to continue?'
+    );
     await page.getByRole('button', { name: 'OK' }).click();
-    expect(await page.locator('.c-fl-container').count()).toEqual(2);
+    expect(await page.getByRole('group', { name: 'Container' }).count()).toEqual(2);
+  });
+  test('Remove Frame', async ({ page }) => {
+    expect(await page.getByRole('group', { name: 'Frame' }).count()).toEqual(2);
+    await page.getByRole('group', { name: 'Child Layout 1' }).click();
+    await page.getByTitle('Remove Frame').click();
+    await expect(page.getByRole('dialog')).toHaveText(
+      'This action will remove this frame from this Flexible Layout. Do you want to continue?'
+    );
+    await page.getByRole('button', { name: 'OK' }).click();
+    expect(await page.getByRole('group', { name: 'Frame' }).count()).toEqual(1);
   });
   test('Columns/Rows Layout Toggle', async ({ page }) => {
-    await page.locator('div:nth-child(5) > .c-fl-container__frames-holder').click();
+    await page.getByRole('group', { name: 'Container' }).nth(1).click();
     expect(await page.locator('.c-fl--rows').count()).toEqual(0);
     await page.getByTitle('Columns layout').click();
     expect(await page.locator('.c-fl--rows').count()).toEqual(1);

src/plugins/flexibleLayout/components/ContainerComponent.vue

@@ -25,6 +25,8 @@
     class="c-fl-container"
     :style="[{ 'flex-basis': sizeString }]"
     :class="{ 'is-empty': !frames.length }"
+    role="group"
+    :aria-label="`Container ${container.id}`"
   >
     <div
       v-show="isEditing"

src/plugins/flexibleLayout/components/FrameComponent.vue

@@ -31,6 +31,8 @@
       ref="frame"
       class="c-frame c-fl-frame__drag-wrapper is-selectable u-inspectable is-moveable"
       :draggable="draggable"
+      :aria-label="frameLabel"
+      role="group"
       @dragstart="initDrag"
     >
       <object-frame
@@ -95,6 +97,9 @@ export default {
     },
     draggable() {
       return this.isEditing;
+    },
+    frameLabel() {
+      return `${this.domainObject?.name} Frame` || 'Frame';
     }
   },
   mounted() {

src/plugins/flexibleLayout/components/ResizeHandle.vue

@@ -25,6 +25,7 @@
     v-show="isEditing && !isDragging"
     class="c-fl-frame__resize-handle"
     :class="[dragOrientation]"
+    :aria-grabbed="isGrabbed"
     @mousedown="mousedown"
   ></div>
 </template>
@@ -49,7 +50,8 @@ export default {
   data() {
     return {
       initialPos: 0,
-      isDragging: false
+      isDragging: false,
+      isGrabbed: false
     };
   },
   mounted() {
@@ -66,6 +68,7 @@ export default {
     mousedown(event) {
       event.preventDefault();
 
+      this.isGrabbed = true;
       this.$emit('init-move', this.index);
 
       document.body.addEventListener('mousemove', this.mousemove);
@@ -91,6 +94,7 @@ export default {
       this.$emit('move', this.index, delta, event);
     },
     mouseup(event) {
+      this.isGrabbed = false;
       this.$emit('end-move', event);
 
       document.body.removeEventListener('mousemove', this.mousemove);

src/plugins/flexibleLayout/toolbarProvider.js

@@ -103,7 +103,7 @@ function ToolbarProvider(openmct) {
                   emphasis: 'true',
                   callback: function () {
                     openmct.objectViews.emit(
-                      `contextAction:${primaryKeyString}`,
+                      `contextAction:${tertiaryKeyString}`,
                       'deleteFrame',
                       primary.context.frameId
                     );