wrap the clues title in the custom header, if provided

libs/@guardian/react-crossword/src/components/Clues.tsx

@@ -1,5 +1,5 @@
 import { css } from '@emotion/react';
-import type { ComponentType } from 'react';
+import type { ComponentType, ReactNode } from 'react';
 import { useCallback, useEffect, useRef } from 'react';
 import type { Direction } from '../@types/Direction';
 import type { EntryID } from '../@types/Entry';
@@ -14,9 +14,10 @@ type Props = {
 	/** Use this to provide a custom header component for the list of clues. If
 	 * undefined, the word 'across' or 'down' will be displayed, unstyled. */
 	Header?: ComponentType<{
-		/** If you use a custom clues header, this prop is required to force
-		 * users to do something with it, for the sake of a11y... */
-		direction: Direction;
+		/** If you use a custom clues header, it must accept children so that we
+		 * can provide a properly marked up `label` element, for the sake of
+		 * a11y... */
+		children: ReactNode;
 	}>;
 };
 
@@ -64,19 +65,22 @@ export const Clues = ({ direction, Header }: Props) => {
 		}
 	}
 
+	const label = (
+		<label
+			css={css`
+				color: currentColor;
+			`}
+			id={getId(`${direction}-label`)}
+			htmlFor={getId(`${direction}-hints`)}
+		>
+			{direction}
+		</label>
+	);
+
 	return (
 		<div ref={cluesRef}>
-			<label
-				css={css`
-					display: block;
-					color: currentColor;
-					text-transform: capitalize;
-				`}
-				id={getId(`${direction}-label`)}
-				htmlFor={getId(`${direction}-hints`)}
-			>
-				{Header ? <Header direction={direction} /> : direction}
-			</label>
+			{Header ? <Header>{label}</Header> : label}
+
 			<div
 				tabIndex={0}
 				id={getId(`${direction}-hints`)}

libs/@guardian/react-crossword/src/components/Crossword.stories.tsx

@@ -1,8 +1,8 @@
 import type { Meta, StoryFn, StoryObj } from '@storybook/react';
+import type { ReactNode } from 'react';
 import { groupedClues as data } from '../../stories/formats/grouped-clues';
 import { progress } from '../../stories/formats/grouped-clues.progress';
 import { quick as quickData } from '../../stories/formats/quick';
-import type { Direction } from '../@types/Direction';
 import type { LayoutProps } from '../@types/Layout';
 import { Crossword } from './Crossword';
 
@@ -91,7 +91,7 @@ export const CustomLayoutRaw: StoryFn = () => {
 };
 
 export const CustomisedLayout: StoryFn = () => {
-	const CluesHeader = (props: { direction: Direction }) => (
+	const CluesHeader = ({ children }: { children: ReactNode }) => (
 		<h2
 			style={{
 				fontFamily: 'monospace',
@@ -104,9 +104,10 @@ export const CustomisedLayout: StoryFn = () => {
 				justifyContent: 'center',
 				alignItems: 'center',
 				marginBottom: '0.5em',
+				color: 'royalblue',
 			}}
 		>
-			{props.direction === 'across' ? '👉' : '👇'}
+			{children}
 		</h2>
 	);
 

libs/@guardian/react-crossword/src/layouts/ScreenLayout.tsx

@@ -1,13 +1,13 @@
 import { css } from '@emotion/react';
 import { headlineBold17, space } from '@guardian/source/foundations';
 import { textSans12, textSans14 } from '@guardian/source/foundations';
+import type { ReactNode } from 'react';
 import { memo } from 'react';
-import type { Direction } from '../@types/Direction';
 import type { LayoutProps } from '../@types/Layout';
 import { useTheme } from '../context/Theme';
 import { useUIState } from '../context/UI';
 
-const CluesHeader = memo(({ direction }: { direction: Direction }) => {
+const CluesHeader = memo(({ children }: { children: ReactNode }) => {
 	const theme = useTheme();
 
 	return (
@@ -18,9 +18,10 @@ const CluesHeader = memo(({ direction }: { direction: Direction }) => {
 				border-bottom: 1px dotted ${theme.borderColor};
 				height: 2em;
 				margin-bottom: 0.5em;
+				text-transform: capitalize;
 			`}
 		>
-			{direction}
+			{children}
 		</div>
 	);
 });