diff --git a/support-frontend/.eslintrc.js b/support-frontend/.eslintrc.js index 966e5dc39a..f0938fc58a 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', 'jsx-a11y'], +}; 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 (
{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}