diff --git a/e2e/tests/functional/plugins/flexibleLayout/flexibleLayout.e2e.spec.js b/e2e/tests/functional/plugins/flexibleLayout/flexibleLayout.e2e.spec.js index def82aa9d3..1db3e2486d 100644 --- a/e2e/tests/functional/plugins/flexibleLayout/flexibleLayout.e2e.spec.js +++ b/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); diff --git a/src/plugins/flexibleLayout/components/ContainerComponent.vue b/src/plugins/flexibleLayout/components/ContainerComponent.vue index 46bf2e994a..69ae78ccf4 100644 --- a/src/plugins/flexibleLayout/components/ContainerComponent.vue +++ b/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}`" >
@@ -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); diff --git a/src/plugins/flexibleLayout/toolbarProvider.js b/src/plugins/flexibleLayout/toolbarProvider.js index d3c3932faf..27658ac987 100644 --- a/src/plugins/flexibleLayout/toolbarProvider.js +++ b/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 );