From e449fd0eda116f5a529ff12f7b3e5719aeac52b3 Mon Sep 17 00:00:00 2001
From: Charles Hacskaylo <charlesh88@gmail.com>
Date: Thu, 29 Feb 2024 11:26:51 -0800
Subject: [PATCH] Fix visible toolbar overflow (#7037)

* Closes #7036
- CSS fix to prevent toolbar overrun of main view area.

* a11y: add label to pane handles

* test(visual): toolbar overflow

---------

Co-authored-by: Jesse Mazzella <jesse.d.mazzella@nasa.gov>
Co-authored-by: John Hill <john.c.hill@nasa.gov>
---
 e2e/tests/visual-a11y/displayLayout.visual.spec.js | 10 ++++++++++
 src/ui/layout/PaneContainer.vue                    | 11 ++++++++++-
 src/ui/layout/pane.scss                            |  3 ++-
 3 files changed, 22 insertions(+), 2 deletions(-)

diff --git a/e2e/tests/visual-a11y/displayLayout.visual.spec.js b/e2e/tests/visual-a11y/displayLayout.visual.spec.js
index e19ba61bf9..91d875c655 100644
--- a/e2e/tests/visual-a11y/displayLayout.visual.spec.js
+++ b/e2e/tests/visual-a11y/displayLayout.visual.spec.js
@@ -93,4 +93,14 @@ test.describe('Visual - Display Layout', () => {
     await page.getByLabel('Parent Layout Layout', { exact: true }).click();
     await percySnapshot(page, `Parent outer layout selected (theme: '${theme}')`);
   });
+
+  test('Toolbar does not overflow into inspector', async ({ page, theme }) => {
+    test.info().annotations.push({
+      type: 'issue',
+      description: 'https://github.com/nasa/openmct/issues/7036'
+    });
+    await page.getByLabel('Expand Inspect Pane').click();
+    await page.getByLabel('Resize Inspect Pane').dragTo(page.getByLabel('X:'));
+    await percySnapshot(page, `Toolbar does not overflow into inspector (theme: '${theme}')`);
+  });
 });
diff --git a/src/ui/layout/PaneContainer.vue b/src/ui/layout/PaneContainer.vue
index 173e8dfedf..06960ece92 100644
--- a/src/ui/layout/PaneContainer.vue
+++ b/src/ui/layout/PaneContainer.vue
@@ -21,7 +21,13 @@
 -->
 <template>
   <div class="l-pane" :class="paneClasses">
-    <div v-if="handle" class="l-pane__handle" @mousedown.prevent="startResizing"></div>
+    <div
+      v-if="handle"
+      class="l-pane__handle"
+      :aria-label="handleLabel"
+      :aria-grabbed="resizing"
+      @mousedown.prevent="startResizing"
+    ></div>
     <div class="l-pane__header">
       <span v-if="label" class="l-pane__label">{{ label }}</span>
       <slot name="controls"></slot>
@@ -88,6 +94,9 @@ export default {
     };
   },
   computed: {
+    handleLabel() {
+      return `Resize ${this.label} Pane`;
+    },
     isCollapsable() {
       return this.hideParam?.length > 0;
     },
diff --git a/src/ui/layout/pane.scss b/src/ui/layout/pane.scss
index e945ddd017..598689d11f 100644
--- a/src/ui/layout/pane.scss
+++ b/src/ui/layout/pane.scss
@@ -60,7 +60,7 @@
       transition: opacity 150ms ease;
       opacity: 0;
       pointer-events: none;
-      overflow: hidden;
+      overflow: hidden; // Prevents toolbar from extending into Inspector
 
       > * {
         min-width: 0 !important;
@@ -93,6 +93,7 @@
   &__contents {
     flex: 1 1 100%;
     opacity: 1;
+    overflow: hidden;
     pointer-events: inherit;
     transition: opacity 250ms ease 250ms;