@comicrelief/component-library 8.52.1 → 8.52.2

package/src/components/Organisms/DynamicGallery/_DynamicGalleryColumn.js

@@ -10,21 +10,21 @@ import React, {
 import Picture from '../../Atoms/Picture/Picture';
 import { LightboxContext } from './_Lightbox';
 import {
-  Caption,
   Column,
   Details,
   GalleryNode,
   ImageContainer,
-  InteractiveGalleryNode,
-  Title
+  InteractiveGalleryNode
 } from './DynamicGallery.style';
 import { GalleryNodeType } from './_types';
+import { extractNodeText } from './_utils';
 
 /**
  * a separate component to handle columns of images;
  * this component handles aspect ratio calculations to enfore a min/max ratio for its images
  */
 export default function DynamicGalleryColumn({
+  focusOutlineColour,
   updateTabOrder,
   nodes,
   imageRatio,
@@ -92,45 +92,52 @@ export default function DynamicGalleryColumn({
     <Column ref={elRef} className="gallery-column">
       {nodes
         ?.filter((_, nodeIndex) => nodeIndex % columnCount === columnIndex)
-        .map((node, nodeIndex) => (
-          <NodeComponent
-            key={String(nodeIndex) + node.title}
-            className="gallery-node"
-            title={node.title}
-            aria-label={node.title}
-            data-node-index={nodeIndex}
-            onPointerUp={useLightbox ? () => handlePointerUp(node) : undefined}
-            tabIndex={0}
-          >
-            <ImageContainer
-              className="gallery-node-image"
-              // eslint-disable-next-line prefer-template
-              minHeight={String(minHeight) + 'px'}
-              // eslint-disable-next-line prefer-template
-              maxHeight={String(maxHeight) + 'px'}
+        .map((node, nodeIndex) => {
+          const bodyText = extractNodeText(node.gridBody);
+          const key = String(nodeIndex) + bodyText;
+          return (
+            <NodeComponent
+              key={key}
+              className="gallery-node"
+              caption={bodyText}
+              aria-label={bodyText}
+              title={bodyText}
+              data-node-index={nodeIndex}
+              focusOutlineColour={focusOutlineColour}
+              onPointerUp={useLightbox ? () => handlePointerUp(node) : undefined}
+              tabIndex={0}
             >
-              <Picture
-                image={node.image}
-                objectFit="cover"
-                alt={node.title}
-                // animate image in on load
-                onLoad={event => {
-                  event.target
-                    .closest('.gallery-node-image')
-                    .querySelector('img')
-                    .style.setProperty('opacity', '1');
+              <ImageContainer
+                className="gallery-node-image"
+                // eslint prefers template literals for strings, but they break the compiler
+                // eslint-disable-next-line prefer-template
+                minHeight={String(minHeight) + 'px'}
+                // eslint-disable-next-line prefer-template
+                maxHeight={String(maxHeight) + 'px'}
+              >
+                <Picture
+                  image={node.image}
+                  objectFit="cover"
+                  alt={bodyText}
+                  // animate image in on load
+                  onLoad={event => {
+                    event.target
+                      .closest('.gallery-node-image')
+                      .querySelector('img')
+                      .style.setProperty('opacity', '1');
 
-                  // update tab order once the image has loaded
-                  updateTabOrder();
-                }}
-              />
-            </ImageContainer>
-            <Details>
-              <Title>{node.title}</Title>
-              {node.caption && <Caption>{node.caption}</Caption>}
-            </Details>
-          </NodeComponent>
-        ))}
+                    // update tab order once the image has loaded
+                    updateTabOrder();
+                  }}
+                />
+              </ImageContainer>
+              <Details>
+                {node.gridBody && <div>{node.gridBody}</div>}
+                {node.gridCaption && <div>{node.gridCaption}</div>}
+              </Details>
+            </NodeComponent>
+          );
+        })}
     </Column>
   );
 }
@@ -140,5 +147,6 @@ DynamicGalleryColumn.propTypes = {
   imageRatio: PropTypes.oneOf(['dynamic', '4:3']),
   columnIndex: PropTypes.number,
   columnCount: PropTypes.number,
-  updateTabOrder: PropTypes.func
+  updateTabOrder: PropTypes.func,
+  focusOutlineColour: PropTypes.string
 };

package/src/components/Organisms/DynamicGallery/_Lightbox.js

@@ -19,6 +19,7 @@ import {
   ScreenReaderOnly
 } from './_Lightbox.style';
 import ScrollFix from './_ScrollFix';
+import { extractNodeText } from './_utils';
 
 /**
  * lightbox context:
@@ -59,12 +60,13 @@ const Lightbox = () => {
     selectedNode,
     setSelectedNode,
     nextNode,
-    previousNode
+    previousNode,
+    focusedNode,
+    setFocusedNode
   } = useContext(LightboxContext);
 
   const hasNode = Boolean(selectedNode);
   const dialogRef = useRef(null);
-  const previousFocusRef = useRef(null);
 
   /**
   * handle keyboard events within the lightbox;
@@ -125,30 +127,20 @@ const Lightbox = () => {
 
   // handle focus management when dialog opens/closes
   useEffect(() => {
-    // when the lightbox is opened, store the previously focused element
-    // and move focus to the first focusable element in the dialog
     if (hasNode) {
-      // store the previously focused element
-      previousFocusRef.current = document.activeElement;
-      // move focus to the first focusable element in the dialog
+      // move focus to the first focusable element in the dialog when it opens
       setTimeout(() => {
         const focusableElements = getFocusableElements(dialogRef.current);
         if (focusableElements.length > 0) {
           focusableElements[0].focus();
         }
       }, 0);
-      return;
+    } else {
+      // restore focus to the previously focused element when lightbox closes
+      focusedNode?.focus();
+      setFocusedNode(null);
     }
-
-    // when the lightbox is closed, restore focus to the previously focused element
-    if (
-      previousFocusRef.current
-      && typeof previousFocusRef.current.focus === 'function'
-    ) {
-      previousFocusRef.current.focus();
-      previousFocusRef.current = null;
-    }
-  }, [hasNode]);
+  }, [hasNode, focusedNode, setFocusedNode]);
 
   /**
    * close the lightbox when the backdrop is clicked
@@ -182,9 +174,13 @@ const Lightbox = () => {
     target.style.opacity = '1';
   }
 
+  const bodyText = extractNodeText(selectedNode?.lightboxBody);
+
   return (
     <Container isOpen={hasNode}>
-      <Backdrop onPointerUp={() => handleBackdropClick()} />
+      <Backdrop
+        onPointerUp={() => handleBackdropClick()}
+      />
       <Dialog
         ref={dialogRef}
         aria-labelledby="lightboxTitle"
@@ -199,7 +195,7 @@ const Lightbox = () => {
             {hasNode && (
               <Picture
                 key={selectedNode?.image}
-                alt={selectedNode?.title}
+                alt={bodyText}
                 image={selectedNode?.image}
                 width={imageDimensions.width}
                 height={imageDimensions.height}
@@ -209,15 +205,14 @@ const Lightbox = () => {
             )}
           </LightboxImage>
           <LightboxDetails id="lightboxDescription" aria-live="polite" aria-atomic="true">
-            <div id="lightboxTitle">{selectedNode?.title}</div>
-            {selectedNode?.caption && (
-              <div>
-                {selectedNode?.caption}
+            {selectedNode?.lightboxBody && (
+              <div id="lightboxTitle">
+                {selectedNode.lightboxBody}
               </div>
             )}
-            {selectedNode?.body && (
+            {selectedNode?.lightboxCaption && (
               <div>
-                {selectedNode.body}
+                {selectedNode?.lightboxCaption}
               </div>
             )}
           </LightboxDetails>