Fix aria-prohibited-attr accessibility violations

Author: DanielCliftonGuardian

dotcom-rendering/src/components/CarouselNavigationButtons.tsx

@@ -86,6 +86,7 @@ export const CarouselNavigationButtons = ({
 
 	return ReactDOM.createPortal(
 		<div
+			role="group"
 			aria-controls="carousel"
 			aria-label="carousel arrows"
 			css={buttonStyles}

dotcom-rendering/src/components/Contributor.tsx

@@ -106,7 +106,6 @@ type Props = {
 
 export const Contributor = ({ byline, tags, format, source }: Props) => (
 	<address
-		aria-label="Contributor info"
 		data-component="meta-byline"
 		data-link-name="byline"
 		data-gu-name="byline"

dotcom-rendering/src/components/Lineups.tsx

@@ -74,21 +74,22 @@ const Event = ({
 			return (
 				<span
 					css={rectangle(BackgroundRed)}
+					role="img"
 					aria-label="Red Card"
-					aria-hidden="false"
 				/>
 			);
 		case 'booking':
 			return (
 				<span
 					css={rectangle(BackgroundYellow)}
+					role="img"
 					aria-label="Yellow Card"
-					aria-hidden="false"
 				/>
 			);
 		case 'substitution':
 			return (
 				<span
+					role="img"
 					aria-label={`Substitution in ${time} minute`}
 					css={substitute}
 				>

dotcom-rendering/src/components/SecureSignup.importable.tsx

@@ -444,7 +444,7 @@ export const SecureSignup = ({
 				</Button>
 			</form>
 			{isWaitingForResponse && (
-				<div aria-label="loading">
+				<div role="status" aria-label="loading">
 					<Spinner size="small" />
 				</div>
 			)}