Crossword controls A11y (#1943)

Update the clue controls to have a label which tells which word is going to be checked / revealed / cleared
Labels the Anagram Helper close button
Auto focuses text input field when Anagram Helper opened
---------

Co-authored-by: James Mockett <1166188+jamesmockett@users.noreply.github.com>

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

@@ -100,7 +100,9 @@ export const AnagramHelper = () => {
 					icon={<SvgCross size="xsmall" />}
 					hideLabel={true}
 					data-link-name="Close"
-				></CrosswordButton>
+				>
+					Close Anagram Helper
+				</CrosswordButton>
 			</div>
 			<div
 				css={css`
@@ -128,6 +130,7 @@ export const AnagramHelper = () => {
 								}}
 								value={letters}
 								maxLength={cellsWithProgress.length}
+								autoFocus={true}
 							/>
 						</div>
 						<CrosswordButton

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

@@ -61,7 +61,13 @@ const ClearClue = (props: ButtonProps) => {
 	}, [cells, currentEntryId, updateCell]);
 
 	return (
-		<ClueButton onClick={clear} data-link-name="Clear this" {...props}>
+		<ClueButton
+			onClick={clear}
+			aria-label={`Clear ${currentEntryId ? currentEntryId.split('-').join(' ') : 'word'}`}
+			data-link-name="Clear this"
+			aria-live={'off'}
+			{...props}
+		>
 			Clear Word
 		</ClueButton>
 	);
@@ -104,7 +110,13 @@ const CheckClue = (props: ButtonProps) => {
 	}, [currentEntryId, cells, progress, setInvalidCellAnswers, setValidAnswers]);
 
 	return (
-		<ClueButton onClick={check} data-link-name="Check this" {...props}>
+		<ClueButton
+			aria-live="off"
+			onClick={check}
+			data-link-name="Check this"
+			aria-label={`Check ${currentEntryId ? currentEntryId.split('-').join(' ') : 'word'}`}
+			{...props}
+		>
 			Check Word
 		</ClueButton>
 	);
@@ -131,7 +143,13 @@ const RevealClue = (props: ButtonProps) => {
 	}, [cells, currentEntryId, updateCell]);
 
 	return (
-		<ClueButton onClick={reveal} data-link-name="Reveal this" {...props}>
+		<ClueButton
+			onClick={reveal}
+			aria-live="off"
+			aria-label={`Reveal ${currentEntryId ? currentEntryId.split('-').join(' ') : 'word'}`}
+			data-link-name="Reveal this"
+			{...props}
+		>
 			Reveal Word
 		</ClueButton>
 	);
@@ -291,7 +309,7 @@ export const Controls = () => {
 		solutionAvailable && <CheckClue />,
 		solutionAvailable && <RevealClue />,
 		<ClearClue />,
-		<AnagramHelper>Anagram Helper</AnagramHelper>,
+		<AnagramHelper />,
 	].filter(Boolean);
 
 	const gridControls = [