fix(lightbox): WCAG and fullscreen fail (#2549)

* fix(lightbox): Now visible on Fullscreen and not WCAG Closes #2525, #1113 * fix callback item * add TODO --------- Co-authored-by: jolevesq <[email protected]>
Canadian-Geospatial-Platform · Oct 16, 2024 · 858ca74 · 858ca74
1 parent 6bdba41
commit 858ca74
Show file tree

Hide file tree

Showing 6 changed files with 69 additions and 12 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
@@ -1,6 +1,7 @@
 import { useState } from 'react';
 import { Box } from '@/ui';
 import { LightBoxSlides, LightboxImg } from '@/core/components/lightbox/lightbox';
+import { useUIActiveTrapGeoView } from '@/core/stores/store-interface-and-intial-values/ui-state';
 
 interface UseLightBoxReturnType {
   initLightBox: (images: string, alias: string, index: number | undefined, scale?: number) => void;
@@ -12,10 +13,15 @@ interface UseLightBoxReturnType {
  * @returns {UseLightBoxReturnType}
  */
 export function useLightBox(): UseLightBoxReturnType {
+  // Internal state
   const [isLightBoxOpen, setIsLightBoxOpen] = useState(false);
   const [slides, setSlides] = useState<LightBoxSlides[]>([]);
   const [slidesIndex, setSlidesIndex] = useState(0);
   const [imgScale, setImgScale] = useState<number | undefined>();
+  const [aliasIndex, setAliasIndex] = useState('0');
+
+  // Store state
+  const activeTrapGeoView = useUIActiveTrapGeoView();
 
   /**
    * Initialize lightbox with state.
@@ -35,13 +41,15 @@ export function useLightBox(): UseLightBoxReturnType {
     setSlides(slidesList);
     setSlidesIndex(index ?? 0);
     setImgScale(scale);
+    setAliasIndex(alias.split('_')[0]);
   };
 
   /**
    * Create LightBox Component based on lightbox is opened or not.
    * @returns {JSX.Element}
    */
   function LightBoxComponent(): JSX.Element {
+    // TODO: fix bug https://github.com/Canadian-Geospatial-Platform/geoview/issues/2553
     return isLightBoxOpen ? (
       <LightboxImg
         open={isLightBoxOpen}
@@ -52,6 +60,15 @@ export function useLightBox(): UseLightBoxReturnType {
           setIsLightBoxOpen(false);
           setSlides([]);
           setSlidesIndex(0);
+
+          // If keyboard navigation mode enable, focus to caller item (with timeout so keyboard-focused class can be applied)
+          if (activeTrapGeoView) {
+            setTimeout(() => {
+              const element = document.querySelector(`.returnLightboxFocusItem-${aliasIndex}`) as HTMLElement;
+              element?.focus();
+              element?.classList.add('keyboard-focused');
+            }, 250);
+          }
         }}
       />
     ) : (

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
@@ -136,6 +136,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,12 +65,13 @@ 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)}
             keyDown={(e: KeyboardEvent) => {
               if (e.key === 'Enter') {
-                initLightBox(featureInfoItem.value as string, featureInfoItem.alias, index);
+                initLightBox(featureInfoItem.value as string, `${index}_${featureInfoItem.alias}`, index);
               }
             }}
           />

diff --git a/packages/geoview-core/src/core/components/legend/legend-layer.tsx b/packages/geoview-core/src/core/components/legend/legend-layer.tsx
@@ -183,7 +183,14 @@ export function LegendLayer({ layer }: LegendLayerProps): JSX.Element {
       const imgSrc = layer.icons[0].iconImage;
       return (
         <Collapse in={legendExpanded} sx={sxClasses.collapsibleContainer} timeout="auto">
-          <Box component="img" src={imgSrc} sx={{ maxWidth: '100%', cursor: 'pointer' }} onClick={() => initLightBox(imgSrc, '', 0, 2)} />
+          <Box
+            component="img"
+            tabIndex={0}
+            src={imgSrc}
+            sx={{ maxWidth: '100%', cursor: 'pointer' }}
+            onClick={() => initLightBox(imgSrc, '', 0, 2)}
+            onKeyDown={(e) => (e.code === 'Space' || e.code === 'Enter' ? initLightBox(imgSrc, '', 0, 2) : null)}
+          />
         </Collapse>
       );
     }

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;
 }