Add focus trap to studio immersive modal

Author: AlexVelezLl

contentcuration/contentcuration/frontend/shared/utils/focusUtils.js

@@ -0,0 +1,46 @@
+/*
+ * Checks if the element is focusable.
+ * @param {HTMLElement} el - The element to check.
+ * @returns {boolean} - True if the element is focusable, false otherwise.
+ */
+export const isFocusable = el => {
+  if (el.tabIndex < 0) {
+    return false;
+  }
+
+  if (el.offsetParent === null && window.getComputedStyle(el).position !== 'fixed') {
+    // If the element or any of its ancestors is set display none,
+    // it will have offsetParent set to null. If the element is fixed, it will also
+    // have offsetParent set to null, but this doesnt means it has display none.
+    // https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/offsetParent
+    return false;
+  }
+  switch (el.tagName) {
+    case 'A':
+      return !!el.href || el.tabIndex >= 0;
+    case 'INPUT':
+      return el.type !== 'hidden' && !el.disabled;
+    case 'SELECT':
+    case 'TEXTAREA':
+    case 'BUTTON':
+      return !el.disabled;
+    default:
+      return false;
+  }
+};
+
+const focusableSelectors = ['button', 'a', 'input', 'select', 'textarea'];
+
+export const getFirstFocusableElement = el => {
+  if (!el) return null;
+
+  return Array.from(el.querySelectorAll(focusableSelectors.join(','))).find(isFocusable);
+};
+
+export const getLastFocusableElement = el => {
+  if (!el) return null;
+
+  return Array.from(el.querySelectorAll(focusableSelectors.join(',')))
+    .reverse()
+    .find(isFocusable);
+};

contentcuration/contentcuration/frontend/shared/views/StudioImmersiveModal.vue

@@ -1,46 +1,58 @@
 <template>
 
-  <div
+  <KFocusTrap
     v-if="value"
-    class="modal-wrapper"
-    data-testid="modal-wrapper"
-    :style="{ backgroundColor: $themeTokens.surface }"
+    @shouldFocusFirstEl="focusFirstEl"
+    @shouldFocusLastEl="focusLastEl"
   >
-    <KToolbar
-      textColor="white"
-      :style="{ backgroundColor: $themeTokens.appBarDark }"
+    <div
+      ref="modalRef"
+      class="modal-wrapper"
+      data-testid="modal-wrapper"
+      role="dialog"
+      aria-modal="true"
+      aria-labelledby="immersive-modal-title"
+      :style="{ backgroundColor: $themeTokens.surface }"
     >
-      <template #icon>
-        <KIconButton
-          icon="close"
-          :ariaLabel="$tr('close')"
-          :color="$themeTokens.textInverted"
-          data-test="close"
-          @click="$emit('input', false)"
-        />
-      </template>
-
-      <template #default>
-        <span class="toolbar-title">
-          <slot name="header">{{ title }}</slot>
-        </span>
-      </template>
-
-      <template #actions>
-        <slot name="action"></slot>
-      </template>
-    </KToolbar>
-
-    <StudioOfflineAlert :offset="46" />
-
-    <StudioPage
-      :offline="offline"
-      :marginTop="0"
-      :centered="true"
-    >
-      <slot></slot>
-    </StudioPage>
-  </div>
+      <KToolbar
+        textColor="white"
+        :style="{ backgroundColor: $themeTokens.appBarDark }"
+      >
+        <template #icon>
+          <KIconButton
+            icon="close"
+            :ariaLabel="$tr('close')"
+            :color="$themeTokens.textInverted"
+            data-test="close"
+            @click="$emit('input', false)"
+          />
+        </template>
+
+        <template #default>
+          <span
+            id="immersive-modal-title"
+            class="toolbar-title"
+          >
+            <slot name="header">{{ title }}</slot>
+          </span>
+        </template>
+
+        <template #actions>
+          <slot name="action"></slot>
+        </template>
+      </KToolbar>
+
+      <StudioOfflineAlert :offset="46" />
+
+      <StudioPage
+        :offline="offline"
+        :marginTop="0"
+        :centered="true"
+      >
+        <slot></slot>
+      </StudioPage>
+    </div>
+  </KFocusTrap>
 
 </template>
 
@@ -50,6 +62,7 @@
   import { mapState } from 'vuex';
   import StudioOfflineAlert from './StudioOfflineAlert';
   import StudioPage from './StudioPage';
+  import { getFirstFocusableElement, getLastFocusableElement } from 'shared/utils/focusUtils';
 
   export default {
     name: 'StudioImmersiveModal',
@@ -73,18 +86,65 @@
         offline: state => !state.connection.online,
       }),
     },
-    mounted() {
-      document.documentElement.classList.add('modal-open');
-      const handleKeyDown = event => {
-        if (event.key === 'Escape') {
-          this.$emit('input', false);
+    watch: {
+      value: {
+        handler(newValue) {
+          if (newValue) {
+            this.onModalOpen();
+          } else {
+            this.onModalClose();
+          }
+        },
+        immediate: true,
+      },
+    },
+    beforeDestroy() {
+      this.onModalClose();
+    },
+    methods: {
+      onModalOpen() {
+        if (!this.handleKeyDown) {
+          this.handleKeyDown = event => {
+            if (event.key === 'Escape') {
+              this.$emit('input', false);
+            }
+          };
+          document.addEventListener('keydown', this.handleKeyDown);
+        }
+
+        document.documentElement.classList.add('modal-open');
+
+        this.lastFocus = document.activeElement;
+        this.$nextTick(() => {
+          this.focusFirstEl();
+        });
+      },
+      onModalClose() {
+        if (this.handleKeyDown) {
+          document.removeEventListener('keydown', this.handleKeyDown);
+          this.handleKeyDown = null;
         }
-      };
-      document.addEventListener('keydown', handleKeyDown);
-      this.$once('hook:beforeDestroy', () => {
         document.documentElement.classList.remove('modal-open');
-        document.removeEventListener('keydown', handleKeyDown);
-      });
+
+        if (this.lastFocus) {
+          this.lastFocus.focus();
+        }
+      },
+      focusLastEl() {
+        const modalRef = this.$refs['modalRef'];
+        const lastEl = getLastFocusableElement(modalRef);
+        if (lastEl) {
+          lastEl.focus();
+        }
+      },
+
+      focusFirstEl() {
+        const modalRef = this.$refs['modalRef'];
+        const firstEl = getFirstFocusableElement(modalRef);
+        if (firstEl) {
+          firstEl.focus();
+        }
+      },
     },
     $trs: {
       close: 'Close',