From 8b809f8059169d6ad908a8e06cee7ea4c5ad2001 Mon Sep 17 00:00:00 2001 From: Frederick O'Brien Date: Wed, 9 Feb 2022 15:55:52 +0000 Subject: [PATCH 1/3] Remove errors from `productOption` components --- .../components/product/productOption.tsx | 18 ++++++------------ .../components/product/productOptionSmall.tsx | 6 +++--- support-frontend/ts-error-history.csv | 2 +- support-frontend/typescript-errors.json | 12 +----------- 4 files changed, 11 insertions(+), 27 deletions(-) diff --git a/support-frontend/assets/components/product/productOption.tsx b/support-frontend/assets/components/product/productOption.tsx index f9e80eeb70..0dc9d7fe94 100644 --- a/support-frontend/assets/components/product/productOption.tsx +++ b/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 (

@@ -217,8 +213,6 @@ function ProductOption(props: Product) {

- {/* 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 */}

{props.price} {props.priceCopy} diff --git a/support-frontend/assets/components/product/productOptionSmall.tsx b/support-frontend/assets/components/product/productOptionSmall.tsx index 2b702ef62a..4274aaaec2 100644 --- a/support-frontend/assets/components/product/productOptionSmall.tsx +++ b/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 (

{props.offerCopy}

diff --git a/support-frontend/ts-error-history.csv b/support-frontend/ts-error-history.csv index e9779d7259..2d30d0e1aa 100644 --- a/support-frontend/ts-error-history.csv +++ b/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 diff --git a/support-frontend/typescript-errors.json b/support-frontend/typescript-errors.json index 57ec502694..54d51776e8 100644 --- a/support-frontend/typescript-errors.json +++ b/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'." From 7faa114e4bed42a422043ebadc5eb3cd36416c10 Mon Sep 17 00:00:00 2001 From: Frederick O'Brien Date: Wed, 9 Feb 2022 16:29:29 +0000 Subject: [PATCH 2/3] Add text role exemption to ESLint rules --- support-frontend/.eslintrc.js | 47 ++++++++++++++++++++--------------- 1 file changed, 27 insertions(+), 20 deletions(-) diff --git a/support-frontend/.eslintrc.js b/support-frontend/.eslintrc.js index 966e5dc39a..3519a88572 100644 --- a/support-frontend/.eslintrc.js +++ b/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'], +}; From 597e37e92f9b78ce9aae70fe28dc849dd14f871e Mon Sep 17 00:00:00 2001 From: Frederick O'Brien Date: Wed, 9 Feb 2022 17:04:42 +0000 Subject: [PATCH 3/3] Add `jsx-a11y` plugin to ESLint config --- support-frontend/.eslintrc.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/support-frontend/.eslintrc.js b/support-frontend/.eslintrc.js index 3519a88572..f0938fc58a 100644 --- a/support-frontend/.eslintrc.js +++ b/support-frontend/.eslintrc.js @@ -24,5 +24,5 @@ module.exports = { }, }, }, - plugins: ['react'], + plugins: ['react', 'jsx-a11y'], };