@comicrelief/component-library 8.52.0 → 8.52.2

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

@@ -98,6 +98,7 @@ const DynamicGallery = ({
 
   // handle selected gallery node
   const [selectedNode, setSelectedNode] = useState(null);
+  const [focusedNode, setFocusedNode] = useState(null);
 
   // handle next/previous node events from the lightbox
   function handleNextNode(node) {
@@ -122,6 +123,8 @@ const DynamicGallery = ({
           const nodeIndex = +event.target.dataset.nodeIndex;
           if (Number.isNaN(nodeIndex)) return;
           setSelectedNode(nodes[nodeIndex]);
+          // also store the focused node for focus restoration when the lightbox closes
+          setFocusedNode(event.target.closest('.gallery-node'));
         }
         break;
       }
@@ -188,7 +191,9 @@ const DynamicGallery = ({
           selectedNode,
           setSelectedNode,
           nextNode: handleNextNode,
-          previousNode: handlePreviousNode
+          previousNode: handlePreviousNode,
+          focusedNode,
+          setFocusedNode
         }}
       >
         <ImageGrid className="gallery-grid" onKeyDown={event => handleKeyDown(event)}>
@@ -206,6 +211,7 @@ const DynamicGallery = ({
                 nodes={nodes.slice(0, imageCount)}
                 imageRatio={imageRatio}
                 updateTabOrder={throttledUpdateTabOrder.current}
+                focusOutlineColour={textColour}
               />
             ))}
 
@@ -215,7 +221,7 @@ const DynamicGallery = ({
         {/* eslint-disable-next-line jsx-a11y/no-noninteractive-tabindex */}
         <div className="gallery-focus-trap" tabIndex={0} />
       </LightboxContext.Provider>
-      {imageCount < nodes.length && <Button onClick={() => handleLoadMore()}>Load more</Button>}
+      {imageCount < nodes.length && <Button onClick={() => handleLoadMore()}>Show more</Button>}
     </Container>
   );
 };

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

@@ -39,12 +39,18 @@ export const EmptyMessage = styled.div`
 const GalleryNodeBase = css`
   display: flex;
   flex-direction: column;
-  gap: 0.8rem;
+  gap: 0.9rem;
   padding: 0;
   margin: 0;
   background: none;
   border: none;
   text-align: left;
+
+  &:focus-visible {
+    outline: 2px solid ${({ focusOutlineColour }) => focusOutlineColour};
+    outline-offset: 0.5rem;
+    border-radius: 1rem;
+  }
 `;
 
 export const GalleryNode = styled.div`
@@ -60,10 +66,6 @@ export const InteractiveGalleryNode = styled.button`
     transition: all 0.1s ease-out;
   }
 
-    &:focus-visible {
-      outline: 2px solid #000000;
-    }
-
     & > div:first-child {
       &:hover {
         box-shadow: 0px 3px 10px 0px rgba(0, 0, 0, 0.4);
@@ -95,13 +97,3 @@ export const Details = styled.div`
   gap: 0.5rem;
   padding: 0 1rem;
 `;
-
-export const Title = styled.div`
-  &:first-child {
-    margin-bottom: 0;
-  }
-`;
-
-export const Caption = styled.div`
-  line-height: 1;
-`;

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>