@comicrelief/component-library 8.55.3 → 8.55.4

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

@@ -10,7 +10,6 @@ var _react = _interopRequireWildcard(require("react"));
 var _PulseLoader = _interopRequireDefault(require("react-spinners/PulseLoader"));
 var _Arrow = _interopRequireDefault(require("../../Atoms/Icons/Arrow"));
 var _Cross = _interopRequireDefault(require("../../Atoms/Icons/Cross"));
-var _Picture = _interopRequireDefault(require("../../Atoms/Picture/Picture"));
 var _Lightbox = require("./_Lightbox.style");
 var _DynamicGallery = require("./DynamicGallery.style");
 var _ScrollFix = _interopRequireDefault(require("./_ScrollFix"));
@@ -53,19 +52,6 @@ const Lightbox = () => {
   const hasNode = Boolean(selectedNode);
   const dialogRef = (0, _react.useRef)(null);
 
-  // handle interaction type
-  const interactionTypeRef = (0, _react.useRef)('keyboard');
-  (0, _react.useEffect)(() => {
-    function handlePointerDown() {
-      interactionTypeRef.current = 'pointer';
-      document.removeEventListener('pointerdown', handlePointerDown);
-    }
-    document.addEventListener('pointerdown', handlePointerDown);
-    return () => {
-      document.removeEventListener('pointerdown', handlePointerDown);
-    };
-  }, []);
-
   /**
   * handle keyboard events within the lightbox;
   * - trapped focus between UI elements
@@ -118,6 +104,26 @@ const Lightbox = () => {
     };
   }, [hasNode, selectedNode, setSelectedNode, previousNode, nextNode]);
 
+  // when the user interacts with the page, check the interaction type.
+  // this is used to determine whether to focus the close button when the lightbox opens;
+  // for keyboard interaction, we focus the close button automatically.
+  // ideally we could just use focus-visible, but Safari on iOS always shows the focus ring.
+  const interactionTypeRef = (0, _react.useRef)('keyboard');
+  (0, _react.useEffect)(() => {
+    function handlePointerDown() {
+      interactionTypeRef.current = 'pointer';
+    }
+    function handleKeyDown() {
+      interactionTypeRef.current = 'keyboard';
+    }
+    document.addEventListener('pointerdown', handlePointerDown);
+    document.addEventListener('keydown', handleKeyDown);
+    return () => {
+      document.removeEventListener('pointerdown', handlePointerDown);
+      document.removeEventListener('keydown', handleKeyDown);
+    };
+  }, []);
+
   // handle focus management when dialog opens/closes
   (0, _react.useEffect)(() => {
     if (hasNode) {
@@ -191,18 +197,14 @@ const Lightbox = () => {
     height: 16,
     width: 2,
     color: "#E1E2E3"
-  })), hasNode && /*#__PURE__*/_react.default.createElement(_Picture.default, {
+  })), hasNode && /*#__PURE__*/_react.default.createElement(_Lightbox.LightboxPicture, {
     key: selectedNode === null || selectedNode === void 0 ? void 0 : selectedNode.image,
     alt: bodyText,
     image: selectedNode === null || selectedNode === void 0 ? void 0 : selectedNode.image,
     width: imageDimensions.width,
     height: imageDimensions.height,
     objectFit: "contain",
-    onLoad: event => onLoad(event),
-    style: {
-      borderRadius: '0.6rem',
-      overflow: 'hidden'
-    }
+    onLoad: event => onLoad(event)
   }), /*#__PURE__*/_react.default.createElement(_Lightbox.PreviousButton, {
     type: "button",
     onClick: () => previousNode(selectedNode)

package/dist/components/Organisms/DynamicGallery/_Lightbox.style.js

@@ -4,8 +4,9 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.PreviousButton = exports.NextButton = exports.NavButton = exports.LightboxSpinner = exports.LightboxImage = exports.LightboxDetails = exports.LightboxContent = exports.Dialog = exports.Container = exports.CloseButton = exports.Backdrop = void 0;
+exports.PreviousButton = exports.NextButton = exports.NavButton = exports.LightboxSpinner = exports.LightboxPicture = exports.LightboxImage = exports.LightboxDetails = exports.LightboxContent = exports.Dialog = exports.Container = exports.CloseButton = exports.Backdrop = void 0;
 var _styledComponents = _interopRequireDefault(require("styled-components"));
+var _Picture = _interopRequireDefault(require("../../Atoms/Picture/Picture"));
 const Container = exports.Container = _styledComponents.default.div.withConfig({
   displayName: "_Lightboxstyle__Container",
   componentId: "sc-twdy7x-0"
@@ -32,21 +33,25 @@ const LightboxContent = exports.LightboxContent = _styledComponents.default.div.
   displayName: "_Lightboxstyle__LightboxContent",
   componentId: "sc-twdy7x-3"
 })(["display:flex;flex-direction:column;align-items:center;gap:1rem;position:relative;padding:1rem;background:#ffffff;border-radius:1rem;"]);
+const LightboxPicture = exports.LightboxPicture = (0, _styledComponents.default)(_Picture.default).withConfig({
+  displayName: "_Lightboxstyle__LightboxPicture",
+  componentId: "sc-twdy7x-4"
+})(["overflow:hidden;border-radius:0.6rem;"]);
 const LightboxImage = exports.LightboxImage = _styledComponents.default.div.withConfig({
   displayName: "_Lightboxstyle__LightboxImage",
-  componentId: "sc-twdy7x-4"
+  componentId: "sc-twdy7x-5"
 })(["position:relative;display:flex;align-items:center;justify-content:center;min-width:128px;min-height:32px;width:100%;& > div{display:flex;align-items:center;justify-content:center;transition:width 0.3s ease-in-out,height 0.3s ease-in-out;}& img{opacity:0;transition:opacity 0.1s ease-out 0.3s;}"]);
 const LightboxSpinner = exports.LightboxSpinner = _styledComponents.default.div.withConfig({
   displayName: "_Lightboxstyle__LightboxSpinner",
-  componentId: "sc-twdy7x-5"
+  componentId: "sc-twdy7x-6"
 })(["position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);"]);
 const LightboxDetails = exports.LightboxDetails = _styledComponents.default.div.withConfig({
   displayName: "_Lightboxstyle__LightboxDetails",
-  componentId: "sc-twdy7x-6"
+  componentId: "sc-twdy7x-7"
 })(["display:flex;flex-direction:column;align-items:stretch;gap:0.5rem;width:100%;max-width:1024px;padding:0 1rem;"]);
 const NavButton = exports.NavButton = _styledComponents.default.button.withConfig({
   displayName: "_Lightboxstyle__NavButton",
-  componentId: "sc-twdy7x-7"
+  componentId: "sc-twdy7x-8"
 })(["position:absolute;display:flex;align-items:center;justify-content:center;width:2.5rem;height:2.5rem;border-radius:0.5rem;border:none;background-color:white;cursor:pointer;z-index:10;svg{transition:fill 0.1s ease-out;}@media (hover:hover){&:hover{svg{fill:", ";}}}:focus-visible{outline:2px solid ", ";}"], _ref3 => {
   let {
     theme
@@ -60,11 +65,11 @@ const NavButton = exports.NavButton = _styledComponents.default.button.withConfi
 });
 const CloseButton = exports.CloseButton = (0, _styledComponents.default)(NavButton).withConfig({
   displayName: "_Lightboxstyle__CloseButton",
-  componentId: "sc-twdy7x-8"
+  componentId: "sc-twdy7x-9"
 })(["top:0;right:0;"]);
 const PreviousButton = exports.PreviousButton = (0, _styledComponents.default)(NavButton).withConfig({
   displayName: "_Lightboxstyle__PreviousButton",
-  componentId: "sc-twdy7x-9"
+  componentId: "sc-twdy7x-10"
 })(["top:50%;left:0;transform:translate(-1rem,-50%);@media ", "{position:fixed;transform:translate(1rem,-50%);top:50%;}"], _ref5 => {
   let {
     theme
@@ -73,7 +78,7 @@ const PreviousButton = exports.PreviousButton = (0, _styledComponents.default)(N
 });
 const NextButton = exports.NextButton = (0, _styledComponents.default)(NavButton).withConfig({
   displayName: "_Lightboxstyle__NextButton",
-  componentId: "sc-twdy7x-10"
+  componentId: "sc-twdy7x-11"
 })(["top:50%;right:0;transform:translate(1rem,-50%);@media ", "{position:fixed;transform:translate(-1rem,-50%);top:50%;}"], _ref6 => {
   let {
     theme

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@comicrelief/component-library",
   "author": "Comic Relief Engineering Team",
-  "version": "8.55.3",
+  "version": "8.55.4",
   "main": "dist/index.js",
   "license": "ISC",
   "jest": {

package/playwright/components/organisms/dynamicGallery.spec.js

@@ -13,6 +13,7 @@ function hexToRgb(hex) {
 }
 
 test.describe('dynamic gallery component', () => {
+  // MARK: smoke test
   test('smoke test', async ({ page }) => {
     await page.goto('/#dynamicgallery');
 
@@ -28,6 +29,7 @@ test.describe('dynamic gallery component', () => {
     await page.close();
   });
 
+  // MARK: responsive columns
   test('responsive gallery columns', async ({ page }) => {
     await page.goto('/#!/DynamicGallery/3');
 
@@ -49,6 +51,7 @@ test.describe('dynamic gallery component', () => {
     await page.close();
   });
 
+  // MARK: chunk mode
   test('chunk mode test', async ({ page }) => {
     await page.goto('/#!/DynamicGallery/3');
 
@@ -67,6 +70,7 @@ test.describe('dynamic gallery component', () => {
     await page.close();
   });
 
+  // MARK: non-chunk mode
   test('non-chunk mode test', async ({ page }) => {
     await page.goto('/#!/DynamicGallery/5');
 
@@ -79,6 +83,7 @@ test.describe('dynamic gallery component', () => {
     await page.close();
   });
 
+  // MARK: tabbing
   test('gallery tabbing', async ({ page }) => {
     await page.goto('/#!/DynamicGallery/3');
 
@@ -104,6 +109,7 @@ test.describe('dynamic gallery component', () => {
     await page.close();
   });
 
+  // MARK: tabbing out
   test('gallery tabbing should allow tabbing out of the gallery', async ({ page }) => {
     await page.goto('/#!/DynamicGallery/5');
 
@@ -126,6 +132,7 @@ test.describe('dynamic gallery component', () => {
     await page.close();
   });
 
+  // MARK: colours
   test('custom page background and text colour', async ({ page }) => {
     await page.goto('/#!/DynamicGallery/5');
 
@@ -140,6 +147,7 @@ test.describe('dynamic gallery component', () => {
     await page.close();
   });
 
+  // MARK: lightbox mode
   test('check lightbox mode', async ({ page }) => {
     await page.goto('/#!/DynamicGallery/3');
 
@@ -166,6 +174,29 @@ test.describe('dynamic gallery component', () => {
     await page.close();
   });
 
+  // MARK: lightbox focus
+  test('check lightbox auto-focus', async ({ page }) => {
+    await page.goto('/#!/DynamicGallery/3');
+
+    // find the first gallery node
+    const galleryNode = page.locator('.gallery-node').first();
+
+    // click it
+    await galleryNode.click();
+
+    // the close button should not be focused after opening the lightbox with the mouse
+    await expect(page.locator('.close-button')).not.toBeFocused();
+    await page.keyboard.press('Escape');
+
+    // the close button should be focused after opening the lightbox with the keyboard
+    await galleryNode.focus();
+    await page.keyboard.press('Enter');
+    await expect(page.locator('.close-button')).toBeFocused();
+
+    await page.close();
+  });
+
+  // MARK: lightbox navigation
   test('lightbox navigation', async ({ page }) => {
     await page.goto('/#!/DynamicGallery/3');
 
@@ -188,6 +219,7 @@ test.describe('dynamic gallery component', () => {
     await page.close();
   });
 
+  // MARK: lightbox pointer close
   test('lightbox pointer close', async ({ page }) => {
     await page.goto('/#!/DynamicGallery/3');
 
@@ -206,6 +238,7 @@ test.describe('dynamic gallery component', () => {
     await page.close();
   });
 
+  // MARK: non-lightbox mode
   test('check non-lightbox mode', async ({ page }) => {
     await page.goto('/#!/DynamicGallery/5');
 

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

@@ -4,13 +4,13 @@ import React, {
 import PulseLoader from 'react-spinners/PulseLoader';
 import Arrow from '../../Atoms/Icons/Arrow';
 import Cross from '../../Atoms/Icons/Cross';
-import Picture from '../../Atoms/Picture/Picture';
 import {
   Backdrop,
   CloseButton,
   Container,
   Dialog,
   LightboxContent,
+  LightboxPicture,
   LightboxDetails,
   LightboxImage,
   LightboxSpinner,
@@ -68,20 +68,6 @@ const Lightbox = () => {
   const hasNode = Boolean(selectedNode);
   const dialogRef = useRef(null);
 
-  // handle interaction type
-  const interactionTypeRef = useRef('keyboard');
-
-  useEffect(() => {
-    function handlePointerDown() {
-      interactionTypeRef.current = 'pointer';
-      document.removeEventListener('pointerdown', handlePointerDown);
-    }
-    document.addEventListener('pointerdown', handlePointerDown);
-    return () => {
-      document.removeEventListener('pointerdown', handlePointerDown);
-    };
-  }, []);
-
   /**
   * handle keyboard events within the lightbox;
   * - trapped focus between UI elements
@@ -139,6 +125,28 @@ const Lightbox = () => {
     };
   }, [hasNode, selectedNode, setSelectedNode, previousNode, nextNode]);
 
+  // when the user interacts with the page, check the interaction type.
+  // this is used to determine whether to focus the close button when the lightbox opens;
+  // for keyboard interaction, we focus the close button automatically.
+  // ideally we could just use focus-visible, but Safari on iOS always shows the focus ring.
+  const interactionTypeRef = useRef('keyboard');
+
+  useEffect(() => {
+    function handlePointerDown() {
+      interactionTypeRef.current = 'pointer';
+    }
+    function handleKeyDown() {
+      interactionTypeRef.current = 'keyboard';
+    }
+    document.addEventListener('pointerdown', handlePointerDown);
+    document.addEventListener('keydown', handleKeyDown);
+
+    return () => {
+      document.removeEventListener('pointerdown', handlePointerDown);
+      document.removeEventListener('keydown', handleKeyDown);
+    };
+  }, []);
+
   // handle focus management when dialog opens/closes
   useEffect(() => {
     if (hasNode) {
@@ -209,7 +217,7 @@ const Lightbox = () => {
               <PulseLoader height={16} width={2} color="#E1E2E3" />
             </LightboxSpinner>
             {hasNode && (
-              <Picture
+              <LightboxPicture
                 key={selectedNode?.image}
                 alt={bodyText}
                 image={selectedNode?.image}
@@ -217,7 +225,6 @@ const Lightbox = () => {
                 height={imageDimensions.height}
                 objectFit="contain"
                 onLoad={event => onLoad(event)}
-                style={{ borderRadius: '0.6rem', overflow: 'hidden' }}
               />
             )}
             <PreviousButton type="button" onClick={() => previousNode(selectedNode)}>

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

@@ -1,4 +1,5 @@
 import styled from 'styled-components';
+import Picture from '../../Atoms/Picture/Picture';
 
 export const Container = styled.div`
   position: fixed;
@@ -47,6 +48,11 @@ export const LightboxContent = styled.div`
   border-radius: 1rem;
 `;
 
+export const LightboxPicture = styled(Picture)`
+  overflow: hidden;
+  border-radius: 0.6rem;
+`;
+
 export const LightboxImage = styled.div`
   position: relative;
   display: flex;