Improve clues A11y (#1942)

Add answer correct to the screen reader span for the Clues

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

@@ -63,7 +63,7 @@ const ClueComponent = ({
 }: Props) => {
 	const theme = useTheme();
 	const { validAnswers } = useValidAnswers();
-
+	const isValid = validAnswers.has(entry.id);
 	return (
 		<div
 			data-entry-id={entry.id}
@@ -79,10 +79,6 @@ const ClueComponent = ({
 				padding: 0.5em 0;
 				color: currentColor;
 
-				.visuallyHidden {
-					${visuallyHidden}
-				}
-
 				@media print {
 					padding: 0.125em 0;
 					background-color: transparent;
@@ -112,9 +108,9 @@ const ClueComponent = ({
 				}}
 			></span>
 			<span css={css(visuallyHidden)}>
-				{`${formatNumberForScreenReader(entry.humanNumber, entry.direction)} ${formatClueForScreenReader(entry.clue)}`}
+				{`${isValid ? 'Answer correct.' : ''} ${formatNumberForScreenReader(entry.humanNumber, entry.direction)} ${formatClueForScreenReader(entry.clue)}`}
 			</span>
-			{validAnswers.has(entry.id) && (
+			{isValid && (
 				<span
 					css={css`
 						display: table-cell;