chore: add eslint-plugin-jsx-a11y

trezor · Nov 7, 2024 · 694c6c9 · 694c6c9
1 parent 4f7642a
commit 694c6c9
Show file tree

Hide file tree

Showing 13 changed files with 116 additions and 1 deletion.
diff --git a/packages/components/src/components/Icon/icons.stories.tsx b/packages/components/src/components/Icon/icons.stories.tsx
@@ -102,6 +102,7 @@ const Render = (props: IconProps) => {
                     placeholder="Search icon"
                     value={search}
                     onChange={event => setSearch(event.target.value)}
+                    // eslint-disable-next-line jsx-a11y/no-autofocus
                     autoFocus={theme.legacy.THEME === 'light'}
                     onClear={() => setSearch('')}
                     showClearButton="always"

diff --git a/packages/components/src/components/NewModal/NewModalBackdrop.tsx b/packages/components/src/components/NewModal/NewModalBackdrop.tsx
@@ -44,6 +44,7 @@ export const NewModalBackdrop = ({
     const modalTarget = useModalTarget();
 
     const backdrop = (
+        // eslint-disable-next-line jsx-a11y/no-autofocus
         <FocusLock autoFocus={false}>
             <Wrapper onClick={onClick} $alignment={alignment} $padding={padding}>
                 {children}

diff --git a/packages/connect-explorer-theme/src/components/search.tsx b/packages/connect-explorer-theme/src/components/search.tsx
@@ -155,6 +155,7 @@ export function Search({
             leaveFrom="nx-opacity-100"
             leaveTo="nx-opacity-0"
         >
+            {/* eslint-disable-next-line jsx-a11y/click-events-have-key-events,jsx-a11y/no-static-element-interactions */}
             <kbd
                 className={cn(
                     'nx-absolute nx-my-1.5 nx-select-none ltr:nx-right-1.5 rtl:nx-left-1.5',
@@ -240,6 +241,7 @@ export function Search({
     return (
         <div className={cn('nextra-search nx-relative md:nx-w-64', className)}>
             {renderList && (
+                // eslint-disable-next-line jsx-a11y/click-events-have-key-events,jsx-a11y/no-static-element-interactions
                 <div className="nx-fixed nx-inset-0 nx-z-10" onClick={() => setShow(false)} />
             )}
 

diff --git a/packages/connect-explorer-theme/src/components/sidebar.tsx b/packages/connect-explorer-theme/src/components/sidebar.tsx
@@ -109,6 +109,7 @@ export function Sidebar({
             {includePlaceholder && asPopover ? (
                 <div className="max-xl:nx-hidden nx-h-0 nx-w-64 nx-shrink-0" />
             ) : null}
+            {/* eslint-disable-next-line jsx-a11y/click-events-have-key-events,jsx-a11y/no-static-element-interactions */}
             <div
                 className={cn(
                     'motion-reduce:nx-transition-none [transition:background-color_1.5s_ease]',

diff --git a/packages/connect-explorer-theme/src/mdx-components.tsx b/packages/connect-explorer-theme/src/mdx-components.tsx
@@ -224,6 +224,7 @@ export const getComponents = ({
             return <section {...props} />;
         },
         h1: props => (
+            // eslint-disable-next-line jsx-a11y/heading-has-content
             <h1
                 className="nx-mt-2 nx-mb-2 nx-text-4xl nx-font-bold nx-tracking-tight nx-text-slate-900 dark:nx-text-slate-100"
                 {...props}

diff --git a/packages/eslint/package.json b/packages/eslint/package.json
@@ -12,10 +12,12 @@
     },
     "devDependencies": {
         "@eslint/js": "^9.13.0",
+        "@types/eslint-plugin-jsx-a11y": "^6",
         "eslint": "^9.13.0",
         "eslint-plugin-chai-friendly": "^1.0.1",
         "eslint-plugin-import": "^2.31.0",
         "eslint-plugin-jest": "^28.8.3",
+        "eslint-plugin-jsx-a11y": "^6.10.2",
         "eslint-plugin-local-rules": "^3.0.2",
         "eslint-plugin-react": "^7.37.2",
         "eslint-plugin-react-hooks": "^5.0.0",

diff --git a/packages/eslint/src/index.mjs b/packages/eslint/src/index.mjs
@@ -1,4 +1,5 @@
 import globals from 'globals';
+import jsxA11y from 'eslint-plugin-jsx-a11y';
 
 import { reactConfig } from './reactConfig.mjs';
 import { javascriptConfig } from './javascriptConfig.mjs';
@@ -48,6 +49,7 @@ export const eslint = [
     ...jestConfig,
     ...localRulesConfig,
     ...chaiFriendlyConfig,
+    jsxA11y.flatConfigs.recommended,
 
     // Tests
     {

diff --git a/packages/product-components/src/components/PassphraseTypeCard/PassphraseTypeCardContent.tsx b/packages/product-components/src/components/PassphraseTypeCard/PassphraseTypeCardContent.tsx
@@ -162,6 +162,7 @@ export const PassphraseTypeCardContent = ({
                                         ) : null
                                     }
                                     inputState={isPassphraseTooLong ? 'error' : undefined}
+                                    // eslint-disable-next-line jsx-a11y/no-autofocus
                                     autoFocus={!isAndroid()}
                                     innerAddon={
                                         <Icon

diff --git a/packages/product-components/src/components/SelectAssetModal/SelectAssetModal.tsx b/packages/product-components/src/components/SelectAssetModal/SelectAssetModal.tsx
@@ -26,12 +26,14 @@ export interface SelectAssetOptionCurrencyProps {
     contractAddress?: string; // CryptoId (contractAddress)
     networkName?: string;
 }
+
 export interface SelectAssetOptionGroupProps {
     type: 'group';
     label: string;
     networkName?: string;
     coingeckoId?: string;
 }
+
 export type SelectAssetOptionProps = SelectAssetOptionCurrencyProps | SelectAssetOptionGroupProps;
 
 export interface SelectAssetNetworkProps {
@@ -160,6 +162,7 @@ export const SelectAssetModal = ({
                     })}
                     value={search}
                     onChange={event => setSearch(event.target.value)}
+                    // eslint-disable-next-line jsx-a11y/no-autofocus
                     autoFocus
                     onClear={() => {
                         setSearch('');

diff --git a/packages/suite/src/components/suite/WordInput.tsx b/packages/suite/src/components/suite/WordInput.tsx
@@ -71,6 +71,7 @@ export const WordInput = memo(() => {
     return (
         <SelectWrapper>
             <Select
+                // eslint-disable-next-line jsx-a11y/no-autofocus
                 autoFocus
                 isSearchable
                 isClearable={false}

diff --git a/packages/suite/src/components/suite/modals/ModalEnvironment.tsx b/packages/suite/src/components/suite/modals/ModalEnvironment.tsx
@@ -14,6 +14,7 @@ export const ModalEnvironment = ({
     children,
     alignment,
 }: ModalEnvironmentProps) => (
+    // eslint-disable-next-line jsx-a11y/no-autofocus
     <FocusLock autoFocus={false}>
         <Backdrop onClick={onClickBackdrop} alignment={alignment}>
             {children}

diff --git a/...ommon/CoinmarketSelectedOffer/CoinmarketOfferExchange/CoinmarketOfferExchangeSendSwap.tsx b/...ommon/CoinmarketSelectedOffer/CoinmarketOfferExchange/CoinmarketOfferExchangeSendSwap.tsx
@@ -224,6 +224,7 @@ export const CoinmarketOfferExchangeSendSwap = () => {
                                         onChange={changeCustomSlippage}
                                         width={100}
                                         align="center"
+                                        // eslint-disable-next-line jsx-a11y/no-autofocus
                                         autoFocus
                                     />
                                 )}

diff --git a/yarn.lock b/yarn.lock
@@ -11582,10 +11582,12 @@ __metadata:
   resolution: "@trezor/eslint@workspace:packages/eslint"
   dependencies:
     "@eslint/js": "npm:^9.13.0"
+    "@types/eslint-plugin-jsx-a11y": "npm:^6"
     eslint: "npm:^9.13.0"
     eslint-plugin-chai-friendly: "npm:^1.0.1"
     eslint-plugin-import: "npm:^2.31.0"
     eslint-plugin-jest: "npm:^28.8.3"
+    eslint-plugin-jsx-a11y: "npm:^6.10.2"
     eslint-plugin-local-rules: "npm:^3.0.2"
     eslint-plugin-react: "npm:^7.37.2"
     eslint-plugin-react-hooks: "npm:^5.0.0"
@@ -12756,6 +12758,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@types/eslint-plugin-jsx-a11y@npm:^6":
+  version: 6.9.0
+  resolution: "@types/eslint-plugin-jsx-a11y@npm:6.9.0"
+  dependencies:
+    "@types/eslint": "npm:*"
+  checksum: 10/779cfc692f7413942933c46d8b39cb1caa0c6e32ad430f12ab0c69bd49108cf5e80ed7fc8231443f2e0df4a8b57c9e101f538e175ca6b1daa4169df0551466da
+  languageName: node
+  linkType: hard
+
 "@types/eslint-scope@npm:^3.7.7":
   version: 3.7.7
   resolution: "@types/eslint-scope@npm:3.7.7"
@@ -15129,6 +15140,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"aria-query@npm:^5.3.2":
+  version: 5.3.2
+  resolution: "aria-query@npm:5.3.2"
+  checksum: 10/b2fe9bc98bd401bc322ccb99717c1ae2aaf53ea0d468d6e7aebdc02fac736e4a99b46971ee05b783b08ade23c675b2d8b60e4a1222a95f6e27bc4d2a0bfdcc03
+  languageName: node
+  linkType: hard
+
 "array-back@npm:^3.0.1, array-back@npm:^3.1.0":
   version: 3.1.0
   resolution: "array-back@npm:3.1.0"
@@ -15365,6 +15383,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"ast-types-flow@npm:^0.0.8":
+  version: 0.0.8
+  resolution: "ast-types-flow@npm:0.0.8"
+  checksum: 10/85a1c24af4707871c27cfe456bd2ff7fcbe678f3d1c878ac968c9557735a171a17bdcc8c8f903ceab3fc3c49d5b3da2194e6ab0a6be7fec0e133fa028f21ba1b
+  languageName: node
+  linkType: hard
+
 "ast-types@npm:0.15.2":
   version: 0.15.2
   resolution: "ast-types@npm:0.15.2"
@@ -15512,6 +15537,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"axe-core@npm:^4.10.0":
+  version: 4.10.2
+  resolution: "axe-core@npm:4.10.2"
+  checksum: 10/a69423b2ff16c15922c4ea7cf9cc5112728a2817bbe0f2cc212248d648885ffd1ba554e3a341dfc289cd9e67fc0d06f333b5c6837c5c38ca6652507381216fc1
+  languageName: node
+  linkType: hard
+
 "axios-retry@npm:^3.4.0":
   version: 3.9.1
   resolution: "axios-retry@npm:3.9.1"
@@ -15553,6 +15585,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"axobject-query@npm:^4.1.0":
+  version: 4.1.0
+  resolution: "axobject-query@npm:4.1.0"
+  checksum: 10/e275dea9b673f71170d914f2d2a18be5d57d8d29717b629e7fedd907dcc2ebdc7a37803ff975874810bd423f222f299c020d28fde40a146f537448bf6bfecb6e
+  languageName: node
+  linkType: hard
+
 "b4a@npm:^1.6.4":
   version: 1.6.6
   resolution: "b4a@npm:1.6.6"
@@ -19250,6 +19289,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"damerau-levenshtein@npm:^1.0.8":
+  version: 1.0.8
+  resolution: "damerau-levenshtein@npm:1.0.8"
+  checksum: 10/f4eba1c90170f96be25d95fa3857141b5f81e254f7e4d530da929217b19990ea9a0390fc53d3c1cafac9152fda78e722ea4894f765cf6216be413b5af1fbf821
+  languageName: node
+  linkType: hard
+
 "dash-ast@npm:^2.0.1":
   version: 2.0.1
   resolution: "dash-ast@npm:2.0.1"
@@ -21517,6 +21563,31 @@ __metadata:
   languageName: node
   linkType: hard
 
+"eslint-plugin-jsx-a11y@npm:^6.10.2":
+  version: 6.10.2
+  resolution: "eslint-plugin-jsx-a11y@npm:6.10.2"
+  dependencies:
+    aria-query: "npm:^5.3.2"
+    array-includes: "npm:^3.1.8"
+    array.prototype.flatmap: "npm:^1.3.2"
+    ast-types-flow: "npm:^0.0.8"
+    axe-core: "npm:^4.10.0"
+    axobject-query: "npm:^4.1.0"
+    damerau-levenshtein: "npm:^1.0.8"
+    emoji-regex: "npm:^9.2.2"
+    hasown: "npm:^2.0.2"
+    jsx-ast-utils: "npm:^3.3.5"
+    language-tags: "npm:^1.0.9"
+    minimatch: "npm:^3.1.2"
+    object.fromentries: "npm:^2.0.8"
+    safe-regex-test: "npm:^1.0.3"
+    string.prototype.includes: "npm:^2.0.1"
+  peerDependencies:
+    eslint: ^3 || ^4 || ^5 || ^6 || ^7 || ^8 || ^9
+  checksum: 10/388550798548d911e2286d530a29153ca00434a06fcfc0e31e0dda46a5e7960005e532fb29ce1ccbf1e394a3af3e5cf70c47ca43778861eacc5e3ed799adb79c
+  languageName: node
+  linkType: hard
+
 "eslint-plugin-local-rules@npm:^3.0.2":
   version: 3.0.2
   resolution: "eslint-plugin-local-rules@npm:3.0.2"
@@ -27916,7 +27987,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"jsx-ast-utils@npm:^2.4.1 || ^3.0.0":
+"jsx-ast-utils@npm:^2.4.1 || ^3.0.0, jsx-ast-utils@npm:^3.3.5":
   version: 3.3.5
   resolution: "jsx-ast-utils@npm:3.3.5"
   dependencies:
@@ -28267,6 +28338,22 @@ __metadata:
   languageName: node
   linkType: hard
 
+"language-subtag-registry@npm:^0.3.20":
+  version: 0.3.23
+  resolution: "language-subtag-registry@npm:0.3.23"
+  checksum: 10/fe13ed74ab9f862db8e5747b98cc9aa08d52a19f85b5cdb4975cd364c8539bd2da3380e4560d2dbbd728ec33dff8a4b4421fcb2e5b1b1bdaa21d16f91a54d0d4
+  languageName: node
+  linkType: hard
+
+"language-tags@npm:^1.0.9":
+  version: 1.0.9
+  resolution: "language-tags@npm:1.0.9"
+  dependencies:
+    language-subtag-registry: "npm:^0.3.20"
+  checksum: 10/d3a7c14b694e67f519153d6df6cb200681648d38d623c3bfa9d6a66a5ec5493628acb88e9df5aceef3cf1902ab263a205e7d59ee4cf1d6bb67e707b83538bd6d
+  languageName: node
+  linkType: hard
+
 "launch-editor@npm:^2.6.1":
   version: 2.8.0
   resolution: "launch-editor@npm:2.8.0"
@@ -38450,6 +38537,17 @@ __metadata:
   languageName: node
   linkType: hard
 
+"string.prototype.includes@npm:^2.0.1":
+  version: 2.0.1
+  resolution: "string.prototype.includes@npm:2.0.1"
+  dependencies:
+    call-bind: "npm:^1.0.7"
+    define-properties: "npm:^1.2.1"
+    es-abstract: "npm:^1.23.3"
+  checksum: 10/939a5447e4a99a86f29cc97fa24f358e5071f79e34746de4c7eb2cd736ed626ad24870a1e356f33915b3b352bb87f7e4d1cebc15d1e1aaae0923777e21b1b28b
+  languageName: node
+  linkType: hard
+
 "string.prototype.matchall@npm:^4.0.11":
   version: 4.0.11
   resolution: "string.prototype.matchall@npm:4.0.11"