Merge pull request #4443 from pallava-joshi/fix-focus-trapping

frontend: DetailsDrawer: Activity: Fix focus trapping when resource drawer is open

Author: illume

frontend/src/components/activity/Activity.tsx

@@ -291,6 +291,39 @@ export function SingleActivityRenderer({
     };
   }, [location]);
 
+  // Handle click outside to close temporary activities
+  const selectedResource = useTypedSelector(state => state.drawerMode.selectedResource);
+  const isDetailDrawerEnabled = useTypedSelector(state => state.drawerMode.isDetailDrawerEnabled);
+  const isDetailsDrawerSmallScreen = useMediaQuery(theme.breakpoints.down('md'));
+  const isDetailsDrawerOpen =
+    !!selectedResource && isDetailDrawerEnabled && !isDetailsDrawerSmallScreen;
+
+  useEffect(() => {
+    function handleClickOutside(event: MouseEvent) {
+      const target = event.target as Node;
+      const isClickInside = activityElementRef.current?.contains(target);
+
+      if (
+        activity.temporary &&
+        !minimized &&
+        !isOverview &&
+        activityElementRef.current &&
+        !isClickInside &&
+        !isDetailsDrawerOpen
+      ) {
+        Activity.close(id);
+      }
+    }
+
+    if (activity.temporary && !minimized && !isOverview) {
+      document.addEventListener('mousedown', handleClickOutside);
+
+      return () => {
+        document.removeEventListener('mousedown', handleClickOutside);
+      };
+    }
+  }, [activity.temporary, minimized, isOverview, id, location, isDetailsDrawerOpen]);
+
   return (
     <ActivityContext.Provider value={activity}>
       <Box

frontend/src/components/common/Resource/DetailsDrawer.tsx

@@ -17,6 +17,7 @@
 import Box from '@mui/material/Box';
 import { useTheme } from '@mui/material/styles';
 import useMediaQuery from '@mui/material/useMediaQuery';
+import { useCallback, useEffect, useRef } from 'react';
 import { useTranslation } from 'react-i18next';
 import { useDispatch } from 'react-redux';
 import { setSelectedResource } from '../../../redux/drawerModeSlice';
@@ -32,16 +33,38 @@ export default function DetailsDrawer() {
   const isSmallScreen = useMediaQuery(theme.breakpoints.down('md'));
   const isDetailDrawerEnabled = useTypedSelector(state => state?.drawerMode?.isDetailDrawerEnabled);
 
-  function closeDrawer() {
+  const drawerRef = useRef<HTMLDivElement>(null);
+
+  const closeDrawer = useCallback(() => {
     dispatch(setSelectedResource(undefined));
-  }
+  }, [dispatch]);
+
+  useEffect(() => {
+    if (selectedResource && !isSmallScreen && isDetailDrawerEnabled && drawerRef.current) {
+      drawerRef.current.focus();
+    }
+  }, [selectedResource, isSmallScreen, isDetailDrawerEnabled]);
+
+  useEffect(() => {
+    const mainElement = document.getElementById('main');
+    if (!mainElement) return;
+
+    if (selectedResource && !isSmallScreen && isDetailDrawerEnabled) {
+      mainElement.setAttribute('inert', '');
+      return () => {
+        mainElement.removeAttribute('inert');
+      };
+    }
+  }, [selectedResource, isSmallScreen, isDetailDrawerEnabled]);
 
   if (!selectedResource || isSmallScreen || !isDetailDrawerEnabled) {
     return null;
   }
 
   return (
     <Box
+      ref={drawerRef}
+      tabIndex={-1}
       sx={{
         position: 'absolute',
         backgroundColor: 'background.paper',
@@ -54,9 +77,13 @@ export default function DetailsDrawer() {
         zIndex: 1,
         border: '1px solid',
         borderColor: theme.palette.divider,
+        outline: 'none',
       }}
-      role="complementary"
+      role="dialog"
+      aria-label={t('Resource details')}
       aria-describedby="resource-details-content"
+      aria-modal="true"
+      data-details-drawer="true"
     >
       <Box
         sx={{

frontend/src/i18n/locales/de/translation.json

@@ -264,6 +264,7 @@
   "Deleted {{ itemsLength }} items.": "{{ itemsLength }} Elemente gelöscht.",
   "Error deleting {{ itemsLength }} items.": "Fehler beim Löschen von {{ itemsLength }} Elementen.",
   "Delete items": "Elemente löschen",
+  "Resource details": "",
   "Loading documentation": "Dokumentation laden",
   "No documentation available.": "",
   "No documentation for type {{ docsType }}.": "Keine Dokumentation für Typ {{ docsType }}.",

frontend/src/i18n/locales/en/translation.json

@@ -264,6 +264,7 @@
   "Deleted {{ itemsLength }} items.": "Deleted {{ itemsLength }} items.",
   "Error deleting {{ itemsLength }} items.": "Error deleting {{ itemsLength }} items.",
   "Delete items": "Delete items",
+  "Resource details": "Resource details",
   "Loading documentation": "Loading documentation",
   "No documentation available.": "No documentation available.",
   "No documentation for type {{ docsType }}.": "No documentation for type {{ docsType }}.",

frontend/src/i18n/locales/es/translation.json

@@ -265,6 +265,7 @@
   "Deleted {{ itemsLength }} items.": "Se ha eliminado {{ itemsLength }} items.",
   "Error deleting {{ itemsLength }} items.": "Error al eliminar {{ itemsLength }} items.",
   "Delete items": "Eliminar items",
+  "Resource details": "",
   "Loading documentation": "Cargando documentación",
   "No documentation available.": "No hay documentación disponible.",
   "No documentation for type {{ docsType }}.": "Sin documentación para el tipo {{ docsType }}.",

frontend/src/i18n/locales/fr/translation.json

@@ -265,6 +265,7 @@
   "Deleted {{ itemsLength }} items.": "",
   "Error deleting {{ itemsLength }} items.": "",
   "Delete items": "",
+  "Resource details": "",
   "Loading documentation": "Chargement de la documentation",
   "No documentation available.": "",
   "No documentation for type {{ docsType }}.": "Pas de documentation pour le type {{ docsType }}.",

frontend/src/i18n/locales/hi/translation.json

@@ -264,6 +264,7 @@
   "Deleted {{ itemsLength }} items.": "{{ itemsLength }} आइटम हटा दिए गए।",
   "Error deleting {{ itemsLength }} items.": "{{ itemsLength }} आइटम हटाने में त्रुटि।",
   "Delete items": "आइटम हटाएँ",
+  "Resource details": "",
   "Loading documentation": "दस्तावेज़ीकरण लोड हो रहा है",
   "No documentation available.": "कोई दस्तावेज़ीकरण उपलब्ध नहीं है।",
   "No documentation for type {{ docsType }}.": "प्रकार {{ docsType }} के लिए कोई दस्तावेज़ीकरण नहीं है।",

frontend/src/i18n/locales/it/translation.json

@@ -265,6 +265,7 @@
   "Deleted {{ itemsLength }} items.": "{{ itemsLength }} elementi eliminati.",
   "Error deleting {{ itemsLength }} items.": "Errore durante l'eliminazione di {{ itemsLength }} elementi.",
   "Delete items": "Elimina elementi",
+  "Resource details": "",
   "Loading documentation": "Caricamento della documentazione",
   "No documentation available.": "Nessuna documentazione disponibile.",
   "No documentation for type {{ docsType }}.": "Nessuna documentazione per il tipo {{ docsType }}.",

frontend/src/i18n/locales/ja/translation.json

@@ -263,6 +263,7 @@
   "Deleted {{ itemsLength }} items.": "{{ itemsLength }} 個のアイテムを削除しました。",
   "Error deleting {{ itemsLength }} items.": "{{ itemsLength }} 個のアイテムの削除中にエラーが発生しました。",
   "Delete items": "アイテムの削除",
+  "Resource details": "",
   "Loading documentation": "ドキュメントの読み込み中",
   "No documentation available.": "利用可能なドキュメントがありません。",
   "No documentation for type {{ docsType }}.": "タイプ {{ docsType }} のドキュメントはありません。",

frontend/src/i18n/locales/ko/translation.json

@@ -263,6 +263,7 @@
   "Deleted {{ itemsLength }} items.": "{{ itemsLength }}개 항목 삭제됨.",
   "Error deleting {{ itemsLength }} items.": "{{ itemsLength }}개 항목 삭제 중 오류 발생.",
   "Delete items": "항목 삭제",
+  "Resource details": "",
   "Loading documentation": "문서 로딩 중",
   "No documentation available.": "사용 가능한 문서가 없습니다.",
   "No documentation for type {{ docsType }}.": "{{ docsType }} 유형에 대한 문서가 없습니다.",