react-crossword A11y improvements (#1966)

- Reduce the verbosity of the aria labels on the grid cells
- Remove the application role from the parent div as it is making the crossword not very visible to screen readers
- We have received feedback from a user that the labels are too verbose and make the crossword very difficult to use. The  information that was previously being read out can in fact be inferred by the position on the grid and the previous navigation context.

**previously** 
Every cell had information about what clue it was part of and how many letters there were in the word
Every Cell -> `Letter 2 of 4-across: Life is in a mess (5 letters). Also, letter 1 of 5-down Life is always in a mess (2 letters).`

**now** 
Only the cells at the start of a word have info about the clue and length. This gives the context for the surrounding letters. This should reduce the overload of information read out.
First Cell -> `4-across: Life is in a mess (5 letters).`

Author: oliverabrahams

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

@@ -1,4 +1,5 @@
 import { css } from '@emotion/react';
+import { isUndefined } from '@guardian/libs';
 import { textSans12 } from '@guardian/source/foundations';
 import type { FormEvent, KeyboardEvent, SVGProps } from 'react';
 import { useEffect, useRef } from 'react';
@@ -48,9 +49,10 @@ const CellComponent = ({
 	const theme = useTheme();
 	const { getId } = useData();
 	const cellRef = useRef<null | SVGGElement>(null);
-	const cellDescription = data.description
-		? (isIncorrect ? 'Incorrect letter. ' : '') + data.description
-		: '';
+	const cellDescription =
+		isUndefined(data.description) && !isIncorrect
+			? undefined
+			: `${isIncorrect ? 'Incorrect Letter. ' : ''} ${data.description ?? ''}`;
 
 	const backgroundColor = isBlackCell
 		? 'transparent'
@@ -137,7 +139,6 @@ const CellComponent = ({
 							id={getId(`cell-input-${data.x}-${data.y}`)}
 							onInput={handleInput ?? noop}
 							tabIndex={isCurrentCell ? 0 : -1}
-							aria-label="Crossword cell"
 							aria-description={cellDescription}
 							css={css`
 								width: 100%;

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

@@ -65,7 +65,6 @@ export const Crossword = ({
 	return (
 		<ContextProvider theme={theme} data={data} userProgress={progress}>
 			<div
-				role="application"
 				data-link-name="Crosswords"
 				css={css`
 					*,

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

@@ -461,6 +461,7 @@ export const Grid = () => {
 			viewBox={`0 0 ${maxWidth} ${maxHeight}`}
 			tabIndex={-1}
 			role={'grid'}
+			aria-label={'Crossword Grid'}
 			onKeyDown={navigateGrid}
 			onFocus={handleGridFocus}
 			onBlur={handleGridBlur}

libs/@guardian/react-crossword/src/utils/getCellDescription.ts

@@ -5,50 +5,40 @@ import { formatClueForScreenReader } from './formatClueForScreenReader';
 
 /**
  * Get the description of a cell in the format
- * "Letter 2 of 4-across: Life is in a mess (5 letters).
- * Also, letter 1 of 5-down Life is always in a mess (2 letters)."
+ * in the format " 4-across: Life is in a mess (5 letters)."
  */
 export const getCellDescription = (cell: Cell, entries: Entries) => {
 	const cellEntryIds = cell.group ?? [];
-	const cellRelevantEntryId =
-		cell.group?.length === 1
-			? cell.group[0]
-			: cellEntryIds.find((id) => id.endsWith('across'));
-	if (isUndefined(cellRelevantEntryId)) {
-		return 'Blank cell.';
+	const cellNumber = cell.number;
+	if (isUndefined(cellNumber)) {
+		return undefined;
 	}
-	const additionalEntries = cellEntryIds
-		.filter((id) => !id.endsWith('across') && id !== cellRelevantEntryId)
-		.map((id) => entries.get(id))
-		.filter((entry) => !isUndefined(entry));
-	const relevantEntry = entries.get(cellRelevantEntryId);
-
-	return (
-		`` +
-		// ('Letter 2 of 4-across: Life is in a mess (5 letters).) | ('Blank cell.')
-		`${relevantEntry ? `${getReadableLabelForCellAndEntry({ entry: relevantEntry, cell: cell })}. ` : 'Blank. '}` +
-		// (Also, letter 1 of 5-down Life is always in a mess (2 letters).)
-		`${additionalEntries.map((entry) => getReadableLabelForCellAndEntry({ entry, cell: cell, additionalEntry: true })).join('. ')}`
+	const cellRelevantEntryIds = cellEntryIds.filter((id) =>
+		id.startsWith(cellNumber.toString()),
 	);
+	if (cellRelevantEntryIds.length === 0) {
+		return undefined;
+	}
+	return cellRelevantEntryIds
+		.map((entryId) => {
+			const entry = entries.get(entryId);
+			if (entry) {
+				return getReadableLabelForCellAndEntry({ entry, cell });
+			}
+			return undefined;
+		})
+		.join(' Also, ');
 };
 
 /**
  * get the readable label for a cell and entry combination
- * in the format "Letter 2 of 4-across: Life is in a mess (5 letters)."
- * or "Also, letter 1 of 5-down Life is always in a mess (2 letters)."
+ * in the format " 4-across: Life is in a mess (5 letters)."
  */
 const getReadableLabelForCellAndEntry = ({
 	entry,
-	cell,
-	additionalEntry = false,
 }: {
 	entry: CAPIEntry;
 	cell: Cell;
-	additionalEntry?: boolean;
 }): string => {
-	const cellPosition =
-		entry.direction === 'across'
-			? String(cell.x + 1 - entry.position.x)
-			: String(cell.y + 1 - entry.position.y);
-	return `${additionalEntry ? 'Also, letter' : 'Letter'} ${cellPosition} of ${entry.length}. ${entry.id}. ${formatClueForScreenReader(entry.clue)}`;
+	return `${entry.id}: ${formatClueForScreenReader(entry.clue)}`;
 };