fix(lightbox): Now visible on Fullscreen and not WCAG

Closes Canadian-Geospatial-Platform#2525, Canadian-Geospatial-Platform#1113
jolevesq · Oct 11, 2024 · 98e3552 · 98e3552
1 parent d07aff8
commit 98e3552
Show file tree

Hide file tree

Showing 5 changed files with 47 additions and 10 deletions.
diff --git a/packages/geoview-core/src/core/components/common/use-lightbox.tsx b/packages/geoview-core/src/core/components/common/use-lightbox.tsx
@@ -16,6 +16,7 @@ export function useLightBox(): UseLightBoxReturnType {
   const [slides, setSlides] = useState<LightBoxSlides[]>([]);
   const [slidesIndex, setSlidesIndex] = useState(0);
   const [imgScale, setImgScale] = useState<number | undefined>();
+  const [aliasIndex, setAliasIndex] = useState(0);
 
   /**
    * Initialize lightbox with state.
@@ -35,6 +36,7 @@ export function useLightBox(): UseLightBoxReturnType {
     setSlides(slidesList);
     setSlidesIndex(index ?? 0);
     setImgScale(scale);
+    setAliasIndex(alias.split('_')[0]);
   };
 
   /**
@@ -52,6 +54,8 @@ export function useLightBox(): UseLightBoxReturnType {
           setIsLightBoxOpen(false);
           setSlides([]);
           setSlidesIndex(0);
+
+          document.querySelector('.returnLightboxFocusItem')?.focus();
         }}
       />
     ) : (

diff --git a/packages/geoview-core/src/core/components/data-table/data-table.tsx b/packages/geoview-core/src/core/components/data-table/data-table.tsx
@@ -134,6 +134,7 @@ function DataTable({ data, layerPath, tableHeight = '500px' }: DataTableProps):
           <Button
             type="text"
             size="small"
+            className={`returnLightboxFocusItem-${cellId.split('_')[0]}`}
             onClick={() => initLightBox(cellValue, cellId, 0)}
             sx={{ height: '2.5rem', paddingLeft: '0.5rem', paddingRight: '0.5rem', textTransform: 'none' }}
           >

diff --git a/packages/geoview-core/src/core/components/details/feature-info-table.tsx b/packages/geoview-core/src/core/components/details/feature-info-table.tsx
@@ -65,6 +65,7 @@ export function FeatureInfoTable({ featureInfoList }: FeatureInfoTableProps): JS
             key={generateId()}
             sx={{ ...sxClasses.featureInfoItemValue, cursor: 'pointer' }}
             alt={`${alias} ${index}`}
+            className={`returnLightboxFocusItem-${index}`}
             src={item}
             tabIndex={0}
             click={() => initLightBox(featureInfoItem.value as string, featureInfoItem.alias, index)}

diff --git a/packages/geoview-core/src/core/components/lightbox/lightbox.tsx b/packages/geoview-core/src/core/components/lightbox/lightbox.tsx
@@ -8,6 +8,7 @@ import 'yet-another-react-lightbox/styles.css';
 
 import { CloseIcon, ArrowRightIcon, ArrowLeftIcon, DownloadIcon, Tooltip } from '@/ui';
 import { logger } from '@/core/utils/logger';
+import { useGeoViewMapId } from '@/core/stores/geoview-store';
 
 /**
  * Interface used for lightbox properties and slides
@@ -46,6 +47,9 @@ export function LightboxImg(props: LightboxProps): JSX.Element {
   const [fade] = useState(250);
   const [swipe] = useState(500);
 
+  // get mapId
+  const mapId = useGeoViewMapId();
+
   useEffect(() => {
     // Log
     logger.logTraceUseEffect('LIGHTBOX - open', open);
@@ -60,6 +64,7 @@ export function LightboxImg(props: LightboxProps): JSX.Element {
         container: { backgroundColor: 'rgba(0, 0, 0, .9)' },
         slide: { transform: `scale(${scale})` },
       }}
+      portal={{ root: document.getElementById(`shell-${mapId}`) }}
       open={isOpen}
       close={() => setIsOpen(false)}
       slides={slides}
@@ -75,7 +80,8 @@ export function LightboxImg(props: LightboxProps): JSX.Element {
       }}
       on={{
         entered: () => {
-          // TODO: Focus on close button on open #1113
+          // document.getElementsByClassName('yarl__button')[1] does not work, use main container
+          document.getElementsByClassName('yarl__root')[0].getElementsByTagName('button')[1].focus();
         },
         exited,
       }}

diff --git a/packages/geoview-core/src/ui/style/vendor.css b/packages/geoview-core/src/ui/style/vendor.css
@@ -1,10 +1,35 @@
-/*
-Hold all third party libraries override
-*/
-
-/*
-OpenLayers
-*/
-.ol-scale-line-inner {
-  display: none;
+/*
+Hold all third party libraries override
+*/
+
+/*
+OpenLayers
+*/
+.ol-scale-line-inner {
+  display: none;
+}
+
+/*
+yet-another-react-lightbox
+*/
+.yarl__button {
+  width: 44px !important;
+  height: 44px !important;
+  padding: 0px !important;
+}
+
+.yarl__button > svg {
+  width: 24px !important;
+  height: 24px !important;
+}
+
+.yarl__navigation_prev > svg, .yarl__navigation_next > svg {
+  width: 36px !important;
+  height: 36px !important;
+}
+
+.yarl__button:focus {
+  background-color: white !important;
+  color: #000 !important;
+  border-radius: 50% !important;
 }