@comicrelief/component-library 8.52.1 → 8.52.3

package/src/components/Molecules/CTA/CTASingleCard/__snapshots__/CTASingleCard.test.js.snap

@@ -32,7 +32,7 @@ exports[`renders correctly with data prop 1`] = `
   object-fit: cover;
 }
 
-.c18 {
+.c19 {
   display: inline-block;
   color: #FFFFFF;
   fill: currentColor;
@@ -85,7 +85,7 @@ exports[`renders correctly with data prop 1`] = `
   pointer-events: none;
 }
 
-.c17 {
+.c18 {
   width: 32px;
   height: 32px;
   border-radius: 50%;
@@ -107,6 +107,22 @@ exports[`renders correctly with data prop 1`] = `
   flex-shrink: 0;
 }
 
+.c17 {
+  padding-left: 1rem;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  -webkit-box-pack: end;
+  -webkit-justify-content: flex-end;
+  -ms-flex-pack: end;
+  justify-content: flex-end;
+}
+
 .c3 {
   display: -webkit-box;
   display: -webkit-flex;
@@ -305,7 +321,7 @@ exports[`renders correctly with data prop 1`] = `
 }
 
 @media (min-width:1024px) {
-  .c17 {
+  .c18 {
     background: #222222;
   }
 }
@@ -500,19 +516,23 @@ exports[`renders correctly with data prop 1`] = `
             <div
               className="c17"
             >
-              <svg
+              <div
                 className="c18"
-                fill="none"
-                height="13"
-                viewBox="0 0 15 13"
-                width="15"
-                xmlns="http://www.w3.org/2000/svg"
               >
-                <path
-                  d="M9.58496 0.349976C9.1395 -0.116662 8.40641 -0.116634 7.96094 0.349976C7.52803 0.803486 7.5281 1.53021 7.96094 1.98376L11.1582 5.33337H1.13672C0.48748 5.33337 0 5.87822 0 6.50037C2.15408e-05 7.1225 0.487494 7.66736 1.13672 7.66736H11.1582L7.96094 11.017C7.52806 11.4705 7.52899 12.1972 7.96191 12.6508C8.18163 12.8803 8.47556 13.0004 8.77344 13.0004C9.07114 13.0002 9.36533 12.8808 9.58496 12.6508L14.6758 7.31677L14.6748 7.3158L14.6875 7.3031L14.6865 7.30212C14.6954 7.29215 14.7044 7.28482 14.71 7.27771C14.7117 7.27545 14.7133 7.27285 14.7148 7.27087C14.7485 7.23203 14.7824 7.18925 14.8135 7.14099L14.8154 7.13806C14.8354 7.10658 14.8493 7.07842 14.8564 7.06384L14.8652 7.04626L14.8662 7.04431L14.8672 7.04333C14.8672 7.04333 14.868 7.04057 14.8691 7.03845C14.8709 7.03512 14.8758 7.02671 14.8799 7.01892L14.8802 7.01839C14.8888 7.002 14.9034 6.97423 14.917 6.93982V6.93787C14.9303 6.90375 14.9391 6.87285 14.9443 6.85388C14.9469 6.84458 14.9498 6.83567 14.9512 6.83044C14.9527 6.82454 14.9535 6.8228 14.9541 6.82068C14.9541 6.82068 14.9542 6.81753 14.9551 6.81482L14.958 6.80603L14.9586 6.80422C14.9631 6.78961 14.9718 6.76119 14.9785 6.72693V6.72498C15.0066 6.57705 15.0066 6.4246 14.9785 6.27673V6.27478L14.958 6.19568L14.9551 6.18591L14.9531 6.18005L14.9512 6.17224C14.9497 6.1664 14.9481 6.15677 14.9453 6.14685C14.9398 6.12695 14.9307 6.09654 14.917 6.06189C14.9032 6.02688 14.8885 5.99813 14.8799 5.98181C14.8758 5.97402 14.8709 5.96562 14.8691 5.96228L14.8564 5.93689C14.849 5.92177 14.8351 5.89372 14.8154 5.86267L14.8145 5.86072L14.7529 5.7738C14.7316 5.74659 14.7094 5.72129 14.6875 5.69763C14.6837 5.69341 14.6802 5.68854 14.6758 5.68396L9.58496 0.349976Z"
-                  fill="currentColor"
-                />
-              </svg>
+                <svg
+                  className="c19"
+                  fill="none"
+                  height="13"
+                  viewBox="0 0 15 13"
+                  width="15"
+                  xmlns="http://www.w3.org/2000/svg"
+                >
+                  <path
+                    d="M9.58496 0.349976C9.1395 -0.116662 8.40641 -0.116634 7.96094 0.349976C7.52803 0.803486 7.5281 1.53021 7.96094 1.98376L11.1582 5.33337H1.13672C0.48748 5.33337 0 5.87822 0 6.50037C2.15408e-05 7.1225 0.487494 7.66736 1.13672 7.66736H11.1582L7.96094 11.017C7.52806 11.4705 7.52899 12.1972 7.96191 12.6508C8.18163 12.8803 8.47556 13.0004 8.77344 13.0004C9.07114 13.0002 9.36533 12.8808 9.58496 12.6508L14.6758 7.31677L14.6748 7.3158L14.6875 7.3031L14.6865 7.30212C14.6954 7.29215 14.7044 7.28482 14.71 7.27771C14.7117 7.27545 14.7133 7.27285 14.7148 7.27087C14.7485 7.23203 14.7824 7.18925 14.8135 7.14099L14.8154 7.13806C14.8354 7.10658 14.8493 7.07842 14.8564 7.06384L14.8652 7.04626L14.8662 7.04431L14.8672 7.04333C14.8672 7.04333 14.868 7.04057 14.8691 7.03845C14.8709 7.03512 14.8758 7.02671 14.8799 7.01892L14.8802 7.01839C14.8888 7.002 14.9034 6.97423 14.917 6.93982V6.93787C14.9303 6.90375 14.9391 6.87285 14.9443 6.85388C14.9469 6.84458 14.9498 6.83567 14.9512 6.83044C14.9527 6.82454 14.9535 6.8228 14.9541 6.82068C14.9541 6.82068 14.9542 6.81753 14.9551 6.81482L14.958 6.80603L14.9586 6.80422C14.9631 6.78961 14.9718 6.76119 14.9785 6.72693V6.72498C15.0066 6.57705 15.0066 6.4246 14.9785 6.27673V6.27478L14.958 6.19568L14.9551 6.18591L14.9531 6.18005L14.9512 6.17224C14.9497 6.1664 14.9481 6.15677 14.9453 6.14685C14.9398 6.12695 14.9307 6.09654 14.917 6.06189C14.9032 6.02688 14.8885 5.99813 14.8799 5.98181C14.8758 5.97402 14.8709 5.96562 14.8691 5.96228L14.8564 5.93689C14.849 5.92177 14.8351 5.89372 14.8154 5.86267L14.8145 5.86072L14.7529 5.7738C14.7316 5.74659 14.7094 5.72129 14.6875 5.69763C14.6837 5.69341 14.6802 5.68854 14.6758 5.68396L9.58496 0.349976Z"
+                    fill="currentColor"
+                  />
+                </svg>
+              </div>
             </div>
           </div>
         </div>
@@ -540,7 +560,7 @@ exports[`renders correctly without image 1`] = `
   line-height: inherit;
 }
 
-.c14 {
+.c15 {
   display: inline-block;
   color: #FFFFFF;
   fill: currentColor;
@@ -576,7 +596,7 @@ exports[`renders correctly without image 1`] = `
   pointer-events: none;
 }
 
-.c13 {
+.c14 {
   width: 32px;
   height: 32px;
   border-radius: 50%;
@@ -598,6 +618,22 @@ exports[`renders correctly without image 1`] = `
   flex-shrink: 0;
 }
 
+.c13 {
+  padding-left: 1rem;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  -webkit-box-pack: end;
+  -webkit-justify-content: flex-end;
+  -ms-flex-pack: end;
+  justify-content: flex-end;
+}
+
 .c3 {
   display: -webkit-box;
   display: -webkit-flex;
@@ -758,7 +794,7 @@ exports[`renders correctly without image 1`] = `
 }
 
 @media (min-width:1024px) {
-  .c13 {
+  .c14 {
     background: #222222;
   }
 }
@@ -922,19 +958,23 @@ exports[`renders correctly without image 1`] = `
             <div
               className="c13"
             >
-              <svg
+              <div
                 className="c14"
-                fill="none"
-                height="13"
-                viewBox="0 0 15 13"
-                width="15"
-                xmlns="http://www.w3.org/2000/svg"
               >
-                <path
-                  d="M9.58496 0.349976C9.1395 -0.116662 8.40641 -0.116634 7.96094 0.349976C7.52803 0.803486 7.5281 1.53021 7.96094 1.98376L11.1582 5.33337H1.13672C0.48748 5.33337 0 5.87822 0 6.50037C2.15408e-05 7.1225 0.487494 7.66736 1.13672 7.66736H11.1582L7.96094 11.017C7.52806 11.4705 7.52899 12.1972 7.96191 12.6508C8.18163 12.8803 8.47556 13.0004 8.77344 13.0004C9.07114 13.0002 9.36533 12.8808 9.58496 12.6508L14.6758 7.31677L14.6748 7.3158L14.6875 7.3031L14.6865 7.30212C14.6954 7.29215 14.7044 7.28482 14.71 7.27771C14.7117 7.27545 14.7133 7.27285 14.7148 7.27087C14.7485 7.23203 14.7824 7.18925 14.8135 7.14099L14.8154 7.13806C14.8354 7.10658 14.8493 7.07842 14.8564 7.06384L14.8652 7.04626L14.8662 7.04431L14.8672 7.04333C14.8672 7.04333 14.868 7.04057 14.8691 7.03845C14.8709 7.03512 14.8758 7.02671 14.8799 7.01892L14.8802 7.01839C14.8888 7.002 14.9034 6.97423 14.917 6.93982V6.93787C14.9303 6.90375 14.9391 6.87285 14.9443 6.85388C14.9469 6.84458 14.9498 6.83567 14.9512 6.83044C14.9527 6.82454 14.9535 6.8228 14.9541 6.82068C14.9541 6.82068 14.9542 6.81753 14.9551 6.81482L14.958 6.80603L14.9586 6.80422C14.9631 6.78961 14.9718 6.76119 14.9785 6.72693V6.72498C15.0066 6.57705 15.0066 6.4246 14.9785 6.27673V6.27478L14.958 6.19568L14.9551 6.18591L14.9531 6.18005L14.9512 6.17224C14.9497 6.1664 14.9481 6.15677 14.9453 6.14685C14.9398 6.12695 14.9307 6.09654 14.917 6.06189C14.9032 6.02688 14.8885 5.99813 14.8799 5.98181C14.8758 5.97402 14.8709 5.96562 14.8691 5.96228L14.8564 5.93689C14.849 5.92177 14.8351 5.89372 14.8154 5.86267L14.8145 5.86072L14.7529 5.7738C14.7316 5.74659 14.7094 5.72129 14.6875 5.69763C14.6837 5.69341 14.6802 5.68854 14.6758 5.68396L9.58496 0.349976Z"
-                  fill="currentColor"
-                />
-              </svg>
+                <svg
+                  className="c15"
+                  fill="none"
+                  height="13"
+                  viewBox="0 0 15 13"
+                  width="15"
+                  xmlns="http://www.w3.org/2000/svg"
+                >
+                  <path
+                    d="M9.58496 0.349976C9.1395 -0.116662 8.40641 -0.116634 7.96094 0.349976C7.52803 0.803486 7.5281 1.53021 7.96094 1.98376L11.1582 5.33337H1.13672C0.48748 5.33337 0 5.87822 0 6.50037C2.15408e-05 7.1225 0.487494 7.66736 1.13672 7.66736H11.1582L7.96094 11.017C7.52806 11.4705 7.52899 12.1972 7.96191 12.6508C8.18163 12.8803 8.47556 13.0004 8.77344 13.0004C9.07114 13.0002 9.36533 12.8808 9.58496 12.6508L14.6758 7.31677L14.6748 7.3158L14.6875 7.3031L14.6865 7.30212C14.6954 7.29215 14.7044 7.28482 14.71 7.27771C14.7117 7.27545 14.7133 7.27285 14.7148 7.27087C14.7485 7.23203 14.7824 7.18925 14.8135 7.14099L14.8154 7.13806C14.8354 7.10658 14.8493 7.07842 14.8564 7.06384L14.8652 7.04626L14.8662 7.04431L14.8672 7.04333C14.8672 7.04333 14.868 7.04057 14.8691 7.03845C14.8709 7.03512 14.8758 7.02671 14.8799 7.01892L14.8802 7.01839C14.8888 7.002 14.9034 6.97423 14.917 6.93982V6.93787C14.9303 6.90375 14.9391 6.87285 14.9443 6.85388C14.9469 6.84458 14.9498 6.83567 14.9512 6.83044C14.9527 6.82454 14.9535 6.8228 14.9541 6.82068C14.9541 6.82068 14.9542 6.81753 14.9551 6.81482L14.958 6.80603L14.9586 6.80422C14.9631 6.78961 14.9718 6.76119 14.9785 6.72693V6.72498C15.0066 6.57705 15.0066 6.4246 14.9785 6.27673V6.27478L14.958 6.19568L14.9551 6.18591L14.9531 6.18005L14.9512 6.17224C14.9497 6.1664 14.9481 6.15677 14.9453 6.14685C14.9398 6.12695 14.9307 6.09654 14.917 6.06189C14.9032 6.02688 14.8885 5.99813 14.8799 5.98181C14.8758 5.97402 14.8709 5.96562 14.8691 5.96228L14.8564 5.93689C14.849 5.92177 14.8351 5.89372 14.8154 5.86267L14.8145 5.86072L14.7529 5.7738C14.7316 5.74659 14.7094 5.72129 14.6875 5.69763C14.6837 5.69341 14.6802 5.68854 14.6758 5.68396L9.58496 0.349976Z"
+                    fill="currentColor"
+                  />
+                </svg>
+              </div>
             </div>
           </div>
         </div>

package/src/components/Molecules/CTA/shared/CTACard.js

@@ -12,6 +12,7 @@ import {
   CTA,
   CTAText,
   CTATextUnderline,
+  ArrowIconOuter,
   ArrowIconWrapper,
   CardWrapper
 } from './CTACard.style';
@@ -88,9 +89,11 @@ const CTACard = ({
                   aria-hidden="true"
                 />
               </CTAText>
-              <ArrowIconWrapper>
-                <ArrowIcon />
-              </ArrowIconWrapper>
+              <ArrowIconOuter>
+                <ArrowIconWrapper>
+                  <ArrowIcon />
+                </ArrowIconWrapper>
+              </ArrowIconOuter>
             </CTA>
           )}
         </CopyAndLinkSection>

package/src/components/Molecules/CTA/shared/CTACard.style.js

@@ -88,6 +88,13 @@ const ArrowIconWrapper = styled.div`
   flex-shrink: 0;
 `;
 
+const ArrowIconOuter = styled.div`
+  padding-left: 1rem;
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+`;
+
 // Card wrapper link - makes entire card clickable
 const CardLink = styled.a`
   display: flex;
@@ -316,6 +323,7 @@ export {
   CTA,
   CTAText,
   CTATextUnderline,
+  ArrowIconOuter,
   ArrowIconWrapper,
   CardWrapper
 };

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>