update tabbing behaviour for popover component

Author: cemms1

libs/@guardian/source-development-kitchen/package.json

@@ -38,6 +38,10 @@
 		"@storybook/addon-docs": "10.4.0",
 		"@storybook/addon-links": "10.4.0",
 		"@storybook/react-vite": "10.4.0",
+		"@testing-library/dom": "10.4.1",
+		"@testing-library/jest-dom": "6.9.1",
+		"@testing-library/react": "16.3.0",
+		"@testing-library/user-event": "14.6.1",
 		"@types/chai": "5.2.3",
 		"@types/jest": "30.0.0",
 		"@types/react": "18.2.79",
@@ -47,6 +51,7 @@
 		"react-dom": "18.2.0",
 		"rollup": "4.60.0",
 		"storybook": "10.4.0",
+		"tabbable": "6.4.0",
 		"ts-jest": "29.4.11",
 		"tslib": "2.8.1",
 		"typescript": "6.0.3",

libs/@guardian/source-development-kitchen/src/react-components/popover/Popover.tsx

@@ -6,6 +6,7 @@ import {
 } from '@guardian/source/foundations';
 import { Button, SvgCross } from '@guardian/source/react-components';
 import { useEffect, useId, useRef } from 'react';
+import { tabbable } from 'tabbable';
 import { getPositionStyles } from './position';
 import { getThemeColours, type ThemePopover } from './theme';
 
@@ -149,21 +150,55 @@ export const Popover = ({
 				handleClose();
 			}
 		};
-		/** Respond to escape key by closing Popover */
-		const dismissOnEsc = (event: KeyboardEvent) => {
+
+		/**
+		 * Handles tab key events by moving focus between tabbable elements within the container
+		 */
+		const handleTabKey = (event: KeyboardEvent) => {
+			const popoverEl = document.getElementById(popoverId);
+			const tabbableItems = popoverEl ? tabbable(popoverEl) : [];
+			const firstTabbableItem = tabbableItems[0];
+			const lastTabbableItem = tabbableItems[tabbableItems.length - 1];
+			// Shift + tab moves focus from first element to last element
+			if (event.shiftKey && document.activeElement === firstTabbableItem) {
+				// Move focus to last tabbable element
+				event.preventDefault();
+				lastTabbableItem?.focus();
+			}
+			// Tab moves focus from last element to first element
+			else if (document.activeElement === lastTabbableItem) {
+				// Move focus to first tabbable element
+				event.preventDefault();
+				firstTabbableItem?.focus();
+			}
+		};
+
+		/**
+		 * Handler for keydown event listener
+		 * - Respond to escape key by closing Popover
+		 * - Respond to tab key by keeping focus within Popover area
+		 */
+		const handleKeydown = (event: KeyboardEvent) => {
 			if (event.code === 'Escape') {
+				// Close on escape key
 				handleClose();
+			} else if (event.code !== 'Tab') {
+				// Early return if not tab key
+				return;
+			} else {
+				// Otherwise, handle tab key
+				handleTabKey(event);
 			}
 		};
 
 		document.addEventListener('click', dismissOnClickElsewhere);
-		document.addEventListener('keydown', dismissOnEsc);
+		document.addEventListener('keydown', handleKeydown);
 		// Remove listeners on unmount
 		return () => {
 			document.removeEventListener('click', dismissOnClickElsewhere);
-			document.removeEventListener('keydown', dismissOnEsc);
+			document.removeEventListener('keydown', handleKeydown);
 		};
-	}, [isOpen, handleClose]);
+	}, [isOpen, handleClose, popoverId]);
 
 	return (
 		<div