Give invalid yet still useful role="text" an ESLint exemption

support-frontend/.eslintrc.js

@@ -1,21 +1,28 @@
 module.exports = {
-  extends: '@guardian/eslint-config-typescript',
-  rules: {
-    // TODO: update this to 'warn' or delete once the post-migration fixing process is done
-    "import/no-default-export": "off",
-    "react/function-component-definition": [1, {
-      "namedComponents": "function-declaration",
-      "unnamedComponents": "function-expression",
-    }],
-  },
-  settings: {
-    'import/resolver': {
-      typescript: {
-        project: 'tsconfig.json',
-      }
-    }
-  },
-  plugins: [
-    "react"
-  ]
-}
+	extends: '@guardian/eslint-config-typescript',
+	rules: {
+		// TODO: update this to 'warn' or delete once the post-migration fixing process is done
+		'import/no-default-export': 'off',
+		'react/function-component-definition': [
+			1,
+			{
+				namedComponents: 'function-declaration',
+				unnamedComponents: 'function-expression',
+			},
+		],
+		'jsx-a11y/aria-role': [
+			1,
+			{
+				allowedInvalidRoles: ['text'],
+			},
+		],
+	},
+	settings: {
+		'import/resolver': {
+			typescript: {
+				project: 'tsconfig.json',
+			},
+		},
+	},
+	plugins: ['react', 'jsx-a11y'],
+};

support-frontend/assets/components/product/productOption.tsx

@@ -5,7 +5,7 @@ import { between, from, until } from '@guardian/src-foundations/mq';
 import { brandAlt, neutral } from '@guardian/src-foundations/palette';
 import { headline, textSans } from '@guardian/src-foundations/typography';
 import { ThemeProvider } from 'emotion-theming';
-import type { Node } from 'react';
+import type { ReactNode } from 'react';
 import React, { useEffect } from 'react';
 import { useHasBeenSeen } from 'helpers/customHooks/useHasBeenSeen';
 import type { BillingPeriod } from 'helpers/productPrice/billingPeriods';
@@ -14,9 +14,9 @@ import { Monthly } from 'helpers/productPrice/billingPeriods';
 export type Product = {
 	title: string;
 	price: string;
-	children?: Node;
-	offerCopy?: Node;
-	priceCopy: Node;
+	children?: ReactNode;
+	offerCopy?: ReactNode;
+	priceCopy: ReactNode;
 	buttonCopy: string;
 	href: string;
 	onClick: (...args: any[]) => any;
@@ -162,7 +162,7 @@ const priceCopyGridPlacement = css`
 	}
 `;
 
-function ProductOption(props: Product) {
+function ProductOption(props: Product): JSX.Element {
 	const [hasBeenSeen, setElementToObserve] = useHasBeenSeen({
 		threshold: 0.5,
 		debounce: true,
@@ -198,11 +198,7 @@ function ProductOption(props: Product) {
 	return (
 		<div
 			ref={setElementToObserve}
-			css={[
-				productOption,
-				props.cssOverrides,
-				productOptionMargin,
-			]}
+			css={[productOption, props.cssOverrides, productOptionMargin]}
 		>
 			<div css={productOptionVerticalLine}>
 				<h3 css={[productOptionTitle, productOptionUnderline]}>
@@ -217,8 +213,6 @@ function ProductOption(props: Product) {
 				</p>
 			</div>
 			<div css={priceCopyGridPlacement}>
-				{/* role="text" is non-standardised but works in Safari. Reads the whole section as one text element */}
-				{/* eslint-disable-next-line jsx-a11y/aria-role */}
 				<p role="text" css={productOptionPriceCopy}>
 					<span css={productOptionPrice}>{props.price}</span>
 					{props.priceCopy}

support-frontend/assets/components/product/productOptionSmall.tsx

@@ -5,13 +5,13 @@ import { from } from '@guardian/src-foundations/mq';
 import { brand } from '@guardian/src-foundations/palette';
 import { textSans } from '@guardian/src-foundations/typography';
 import { ThemeProvider } from 'emotion-theming';
-import type { Node } from 'react';
+import type { ReactNode } from 'react';
 import React from 'react';
 import type { BillingPeriod } from 'helpers/productPrice/billingPeriods';
 
 export type ProductSmall = {
 	offerCopy: string;
-	priceCopy: Node;
+	priceCopy: ReactNode;
 	buttonCopy: string;
 	href: string;
 	onClick: (...args: any[]) => any;
@@ -49,7 +49,7 @@ const buttonStyles = css`
 	justify-content: center;
 `;
 
-function ProductOptionSmall(props: ProductSmall) {
+function ProductOptionSmall(props: ProductSmall): JSX.Element {
 	return (
 		<span css={[productOptionSmallStyles, props.cssOverrides]}>
 			<p css={offerCopyStyles}>{props.offerCopy}</p>

support-frontend/ts-error-history.csv

@@ -109,4 +109,4 @@
 1644328914000,480,0ab76195fac4c9b37244c053756281dc34634e54
 1644331070000,480,1d39d22c5f103d56d8d3bcdb62cf7269648fc248
 1644332898000,480,b89dd04771036b61166e22c5da8bc5f55f582be6
-1644406339000,478,HEAD
+1644422174000,476,HEAD

support-frontend/typescript-errors.json

@@ -2,7 +2,7 @@
     "errorCounts": {
         "byCode": {
             "TS1208": 1,
-            "TS2305": 17,
+            "TS2305": 15,
             "TS2322": 121,
             "TS2578": 7,
             "TS2339": 19,
@@ -47,8 +47,6 @@
             "assets/components/headers/mobileMenu/mobileMenu.tsx": 2,
             "assets/components/headers/veggieBurgerButton/veggieBurgerButton.tsx": 2,
             "assets/components/menu/menu.tsx": 2,
-            "assets/components/product/productOption.tsx": 1,
-            "assets/components/product/productOptionSmall.tsx": 1,
             "assets/components/subscriptionCheckouts/layout.tsx": 1,
             "assets/components/subscriptionCheckouts/paymentMethodSelector.tsx": 6,
             "assets/pages/digital-subscription-checkout/components/thankYou/pageSection.tsx": 1,
@@ -224,14 +222,6 @@
             "path": "assets/components/menu/menu.tsx",
             "message": "Module '\"react\"' has no exported member 'Node'."
         },
-        {
-            "path": "assets/components/product/productOption.tsx",
-            "message": "Module '\"react\"' has no exported member 'Node'."
-        },
-        {
-            "path": "assets/components/product/productOptionSmall.tsx",
-            "message": "Module '\"react\"' has no exported member 'Node'."
-        },
         {
             "path": "assets/components/subscriptionCheckouts/layout.tsx",
             "message": "Module '\"react\"' has no exported member 'Node'."