From 7f82691571480b577e0ca2ad9bfcab4d2db32aeb Mon Sep 17 00:00:00 2001 From: Alec M Date: Mon, 27 Nov 2023 11:41:32 -0500 Subject: [PATCH 01/12] CRDCDH-633 Add A11Y and Axe Also includes a few simple compliance fixes --- .eslintrc.cjs | 5 +- package-lock.json | 328 +++++++++++++----- package.json | 2 + src/components/Footer/FooterDesktop.tsx | 6 +- src/components/Footer/index.tsx | 2 +- src/components/Header/index.tsx | 2 +- .../ScrollButton/ScrollButtonStyles.css | 2 +- .../ScrollButton/ScrollButtonView.tsx | 7 +- src/index.tsx | 6 + src/layouts/index.tsx | 4 +- 10 files changed, 264 insertions(+), 100 deletions(-) diff --git a/.eslintrc.cjs b/.eslintrc.cjs index d71b720b..24984e29 100644 --- a/.eslintrc.cjs +++ b/.eslintrc.cjs @@ -3,6 +3,7 @@ module.exports = { extends: [ 'eslint:recommended', 'plugin:@typescript-eslint/recommended', + "plugin:jsx-a11y/recommended", 'airbnb', 'airbnb-typescript', ], @@ -15,7 +16,7 @@ module.exports = { project: "./tsconfig.json", sourceType: "module" }, - plugins: ["react", "@typescript-eslint"], + plugins: ["react", "@typescript-eslint", "jsx-a11y"], settings: { react: { pragma: "React", @@ -26,7 +27,6 @@ module.exports = { root: true, ignorePatterns: ["public/injectEnv.js", "public/js/session.js"], rules: { - // Note: you must disable the base rule as it can report incorrect errors "react/jsx-filename-extension": [1, { extensions: [".js", ".jsx", ".tsx", ".ts"] }], "no-empty-function": "warn", "@typescript-eslint/no-empty-function": "error", @@ -36,7 +36,6 @@ module.exports = { "react/display-name": "off", "@typescript-eslint/comma-dangle": "off", "import/prefer-default-export": "off", - "jsx-a11y/anchor-is-valid": "off", "comma-dangle": "off", "max-len": "off", "no-console": "warn", diff --git a/package-lock.json b/package-lock.json index a1288639..3f976904 100644 --- a/package-lock.json +++ b/package-lock.json @@ -43,6 +43,7 @@ "web-vitals": "^2.1.4" }, "devDependencies": { + "@axe-core/react": "^4.8.1", "@types/lodash": "^4.14.198", "@types/node": "^20.4.0", "@types/redux": "^3.6.0", @@ -53,6 +54,7 @@ "eslint": "^8.40.0", "eslint-config-airbnb": "^19.0.4", "eslint-config-airbnb-typescript": "^17.0.0", + "eslint-plugin-jsx-a11y": "^6.8.0", "typescript": "^5.0.4" } }, @@ -215,6 +217,16 @@ "object-assign": "^4.1.1" } }, + "node_modules/@axe-core/react": { + "version": "4.8.1", + "resolved": "https://registry.npmjs.org/@axe-core/react/-/react-4.8.1.tgz", + "integrity": "sha512-55eSebGFYQaBRJsACCr+SxX9QV7buSmQUnUMH37y0k2CvlyPAuPLNcG6IcSaU+U6IhDJ5EWSHBIoM4HSVU3f3w==", + "dev": true, + "dependencies": { + "axe-core": "~4.8.2", + "requestidlecallback": "^0.3.0" + } + }, "node_modules/@babel/cli": { "version": "7.22.5", "license": "MIT", @@ -12447,10 +12459,11 @@ "license": "Python-2.0" }, "node_modules/aria-query": { - "version": "5.1.3", - "license": "Apache-2.0", + "version": "5.3.0", + "resolved": "https://registry.npmjs.org/aria-query/-/aria-query-5.3.0.tgz", + "integrity": "sha512-b0P0sZPKtyu8HkeRAfCq0IfURZK+SuwMjY1UXGBU27wpAiTwQAIlq56IbIO+ytk/JjS1fMR14ee5WBBfKi5J6A==", "dependencies": { - "deep-equal": "^2.0.5" + "dequal": "^2.0.3" } }, "node_modules/arity-n": { @@ -12498,13 +12511,14 @@ "license": "MIT" }, "node_modules/array-includes": { - "version": "3.1.6", - "license": "MIT", + "version": "3.1.7", + "resolved": "https://registry.npmjs.org/array-includes/-/array-includes-3.1.7.tgz", + "integrity": "sha512-dlcsNBIiWhPkHdOEEKnehA+RNUWDc4UqFtnIXU4uuYDPtA4LDkr7qip2p0VvFAEXNDr0yWZ9PJyIRiGjRLQzwQ==", "dependencies": { "call-bind": "^1.0.2", - "define-properties": "^1.1.4", - "es-abstract": "^1.20.4", - "get-intrinsic": "^1.1.3", + "define-properties": "^1.2.0", + "es-abstract": "^1.22.1", + "get-intrinsic": "^1.2.1", "is-string": "^1.0.7" }, "engines": { @@ -12552,12 +12566,13 @@ } }, "node_modules/array.prototype.flatmap": { - "version": "1.3.1", - "license": "MIT", + "version": "1.3.2", + "resolved": "https://registry.npmjs.org/array.prototype.flatmap/-/array.prototype.flatmap-1.3.2.tgz", + "integrity": "sha512-Ewyx0c9PmpcsByhSW4r+9zDU7sGjFc86qf/kKtuSCRdhfbk0SNLLkaT5qvcHnRGgc5NP/ly/y+qkXkqONX54CQ==", "dependencies": { "call-bind": "^1.0.2", - "define-properties": "^1.1.4", - "es-abstract": "^1.20.4", + "define-properties": "^1.2.0", + "es-abstract": "^1.22.1", "es-shim-unscopables": "^1.0.0" }, "engines": { @@ -12735,6 +12750,14 @@ "version": "1.0.1", "license": "MIT" }, + "node_modules/asynciterator.prototype": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/asynciterator.prototype/-/asynciterator.prototype-1.0.0.tgz", + "integrity": "sha512-wwHYEIS0Q80f5mosx3L/dfG5t5rjEa9Ft51GTaNt862EnpyGHpgz2RkZvLPp1oF5TnAiTohkEKVEu8pQPJI7Vg==", + "dependencies": { + "has-symbols": "^1.0.3" + } + }, "node_modules/asynckit": { "version": "0.4.0", "license": "MIT" @@ -12809,8 +12832,10 @@ "license": "MIT" }, "node_modules/axe-core": { - "version": "4.7.2", - "license": "MPL-2.0", + "version": "4.8.2", + "resolved": "https://registry.npmjs.org/axe-core/-/axe-core-4.8.2.tgz", + "integrity": "sha512-/dlp0fxyM3R8YW7MFzaHWXrf4zzbr0vaYb23VBFCl83R7nWNPg/yaQw2Dc8jzCMmDVLhSdzH8MjrsuIUuvX+6g==", + "dev": true, "engines": { "node": ">=4" } @@ -12844,10 +12869,11 @@ "license": "MIT" }, "node_modules/axobject-query": { - "version": "3.1.1", - "license": "Apache-2.0", + "version": "3.2.1", + "resolved": "https://registry.npmjs.org/axobject-query/-/axobject-query-3.2.1.tgz", + "integrity": "sha512-jsyHu61e6N4Vbz/v18DHwWYKK0bSWLqn47eeDSKPB7m8tqMHF9YJ+mhIk2lVteyZrY8tnSj/jHOv4YiTCuCJgg==", "dependencies": { - "deep-equal": "^2.0.5" + "dequal": "^2.0.3" } }, "node_modules/babel-code-frame": { @@ -28942,33 +28968,6 @@ "version": "0.3.8", "license": "MIT" }, - "node_modules/deep-equal": { - "version": "2.2.1", - "license": "MIT", - "dependencies": { - "array-buffer-byte-length": "^1.0.0", - "call-bind": "^1.0.2", - "es-get-iterator": "^1.1.3", - "get-intrinsic": "^1.2.0", - "is-arguments": "^1.1.1", - "is-array-buffer": "^3.0.2", - "is-date-object": "^1.0.5", - "is-regex": "^1.1.4", - "is-shared-array-buffer": "^1.0.2", - "isarray": "^2.0.5", - "object-is": "^1.1.5", - "object-keys": "^1.1.1", - "object.assign": "^4.1.4", - "regexp.prototype.flags": "^1.5.0", - "side-channel": "^1.0.4", - "which-boxed-primitive": "^1.0.2", - "which-collection": "^1.0.1", - "which-typed-array": "^1.1.9" - }, - "funding": { - "url": "https://github.com/sponsors/ljharb" - } - }, "node_modules/deep-is": { "version": "0.1.4", "license": "MIT" @@ -29837,6 +29836,27 @@ "url": "https://github.com/sponsors/ljharb" } }, + "node_modules/es-iterator-helpers": { + "version": "1.0.15", + "resolved": "https://registry.npmjs.org/es-iterator-helpers/-/es-iterator-helpers-1.0.15.tgz", + "integrity": "sha512-GhoY8uYqd6iwUl2kgjTm4CZAf6oo5mHK7BPqx3rKgx893YSsy0LGHV6gfqqQvZt/8xM8xeOnfXBCfqclMKkJ5g==", + "dependencies": { + "asynciterator.prototype": "^1.0.0", + "call-bind": "^1.0.2", + "define-properties": "^1.2.1", + "es-abstract": "^1.22.1", + "es-set-tostringtag": "^2.0.1", + "function-bind": "^1.1.1", + "get-intrinsic": "^1.2.1", + "globalthis": "^1.0.3", + "has-property-descriptors": "^1.0.0", + "has-proto": "^1.0.1", + "has-symbols": "^1.0.3", + "internal-slot": "^1.0.5", + "iterator.prototype": "^1.1.2", + "safe-array-concat": "^1.0.1" + } + }, "node_modules/es-module-lexer": { "version": "1.2.1", "license": "MIT" @@ -30399,25 +30419,26 @@ } }, "node_modules/eslint-plugin-jsx-a11y": { - "version": "6.7.1", - "license": "MIT", - "dependencies": { - "@babel/runtime": "^7.20.7", - "aria-query": "^5.1.3", - "array-includes": "^3.1.6", - "array.prototype.flatmap": "^1.3.1", - "ast-types-flow": "^0.0.7", - "axe-core": "^4.6.2", - "axobject-query": "^3.1.1", + "version": "6.8.0", + "resolved": "https://registry.npmjs.org/eslint-plugin-jsx-a11y/-/eslint-plugin-jsx-a11y-6.8.0.tgz", + "integrity": "sha512-Hdh937BS3KdwwbBaKd5+PLCOmYY6U4f2h9Z2ktwtNKvIdIEu137rjYbcb9ApSbVJfWxANNuiKTD/9tOKjK9qOA==", + "dependencies": { + "@babel/runtime": "^7.23.2", + "aria-query": "^5.3.0", + "array-includes": "^3.1.7", + "array.prototype.flatmap": "^1.3.2", + "ast-types-flow": "^0.0.8", + "axe-core": "=4.7.0", + "axobject-query": "^3.2.1", "damerau-levenshtein": "^1.0.8", "emoji-regex": "^9.2.2", - "has": "^1.0.3", - "jsx-ast-utils": "^3.3.3", - "language-tags": "=1.0.5", + "es-iterator-helpers": "^1.0.15", + "hasown": "^2.0.0", + "jsx-ast-utils": "^3.3.5", + "language-tags": "^1.0.9", "minimatch": "^3.1.2", - "object.entries": "^1.1.6", - "object.fromentries": "^2.0.6", - "semver": "^6.3.0" + "object.entries": "^1.1.7", + "object.fromentries": "^2.0.7" }, "engines": { "node": ">=4.0" @@ -30426,11 +30447,17 @@ "eslint": "^3 || ^4 || ^5 || ^6 || ^7 || ^8" } }, - "node_modules/eslint-plugin-jsx-a11y/node_modules/semver": { - "version": "6.3.0", - "license": "ISC", - "bin": { - "semver": "bin/semver.js" + "node_modules/eslint-plugin-jsx-a11y/node_modules/ast-types-flow": { + "version": "0.0.8", + "resolved": "https://registry.npmjs.org/ast-types-flow/-/ast-types-flow-0.0.8.tgz", + "integrity": "sha512-OH/2E5Fg20h2aPrbe+QL8JZQFko0YZaF+j4mnQ7BGhfavO7OpSLa8a0y9sBwomHdSbkhTS8TQNayBfnW5DwbvQ==" + }, + "node_modules/eslint-plugin-jsx-a11y/node_modules/axe-core": { + "version": "4.7.0", + "resolved": "https://registry.npmjs.org/axe-core/-/axe-core-4.7.0.tgz", + "integrity": "sha512-M0JtH+hlOL5pLQwHOLNYZaXuhqmvS8oExsqB1SBYgA4Dk7u/xx+YdGHXaK5pyUfed5mYXdlYiphWq3G8cRi5JQ==", + "engines": { + "node": ">=4" } }, "node_modules/eslint-plugin-react": { @@ -31723,8 +31750,12 @@ } }, "node_modules/function-bind": { - "version": "1.1.1", - "license": "MIT" + "version": "1.1.2", + "resolved": "https://registry.npmjs.org/function-bind/-/function-bind-1.1.2.tgz", + "integrity": "sha512-7XHNxH7qX9xG5mIwxkhumTox/MIRNcOgDrxWsMt2pAr23WHp6MrRlN7FBSFpCpr+oVO0F744iUgR82nJMfG2SA==", + "funding": { + "url": "https://github.com/sponsors/ljharb" + } }, "node_modules/function.prototype.name": { "version": "1.1.6", @@ -32354,6 +32385,17 @@ "minimalistic-assert": "^1.0.1" } }, + "node_modules/hasown": { + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/hasown/-/hasown-2.0.0.tgz", + "integrity": "sha512-vUptKVTpIJhcczKBbgnS+RtcuYMB8+oNzPK2/Hp3hanz8JmpATdmmgLgSaadVREkDm+e2giHwY3ZRkyjSIDDFA==", + "dependencies": { + "function-bind": "^1.1.2" + }, + "engines": { + "node": ">= 0.4" + } + }, "node_modules/hast-util-parse-selector": { "version": "2.2.5", "license": "MIT", @@ -33317,6 +33359,20 @@ "version": "0.2.1", "license": "MIT" }, + "node_modules/is-async-function": { + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/is-async-function/-/is-async-function-2.0.0.tgz", + "integrity": "sha512-Y1JXKrfykRJGdlDwdKlLpLyMIiWqWvuSd17TvZk68PLAOGOoF4Xyav1z0Xhoi+gCYjZVeC5SI+hYFOfvXmGRCA==", + "dependencies": { + "has-tostringtag": "^1.0.0" + }, + "engines": { + "node": ">= 0.4" + }, + "funding": { + "url": "https://github.com/sponsors/ljharb" + } + }, "node_modules/is-bigint": { "version": "1.0.4", "license": "MIT", @@ -33503,6 +33559,17 @@ "node": ">=0.10.0" } }, + "node_modules/is-finalizationregistry": { + "version": "1.0.2", + "resolved": "https://registry.npmjs.org/is-finalizationregistry/-/is-finalizationregistry-1.0.2.tgz", + "integrity": "sha512-0by5vtUJs8iFQb5TYUHHPudOR+qXYIMKtiUzvLIZITZUjknFmziyBJuLhVRc+Ds0dREFlskDNJKYIdIzu/9pfw==", + "dependencies": { + "call-bind": "^1.0.2" + }, + "funding": { + "url": "https://github.com/sponsors/ljharb" + } + }, "node_modules/is-fullwidth-code-point": { "version": "3.0.0", "license": "MIT", @@ -33521,6 +33588,20 @@ "node": ">=6" } }, + "node_modules/is-generator-function": { + "version": "1.0.10", + "resolved": "https://registry.npmjs.org/is-generator-function/-/is-generator-function-1.0.10.tgz", + "integrity": "sha512-jsEjy9l3yiXEQ+PsXdmBwEPcOxaXWLspKdplFUVI9vq1iZgIekeC0L167qeu86czQaxed3q/Uzuw0swL0irL8A==", + "dependencies": { + "has-tostringtag": "^1.0.0" + }, + "engines": { + "node": ">= 0.4" + }, + "funding": { + "url": "https://github.com/sponsors/ljharb" + } + }, "node_modules/is-glob": { "version": "4.0.3", "license": "MIT", @@ -33772,7 +33853,8 @@ }, "node_modules/is-weakmap": { "version": "2.0.1", - "license": "MIT", + "resolved": "https://registry.npmjs.org/is-weakmap/-/is-weakmap-2.0.1.tgz", + "integrity": "sha512-NSBR4kH5oVj1Uwvv970ruUkCV7O1mzgVFO4/rev2cLRda9Tm9HrL70ZPut4rOHgY0FNrUu9BCbXA2sdQ+x0chA==", "funding": { "url": "https://github.com/sponsors/ljharb" } @@ -33789,7 +33871,8 @@ }, "node_modules/is-weakset": { "version": "2.0.2", - "license": "MIT", + "resolved": "https://registry.npmjs.org/is-weakset/-/is-weakset-2.0.2.tgz", + "integrity": "sha512-t2yVvttHkQktwnNNmBQ98AhENLdPUTDTE21uPqAQ0ARwQfGeQKRVS0NNurH7bTf7RrvcVn1OOge45CnBeHCSmg==", "dependencies": { "call-bind": "^1.0.2", "get-intrinsic": "^1.1.1" @@ -33926,6 +34009,18 @@ "url": "https://github.com/sponsors/ljharb" } }, + "node_modules/iterator.prototype": { + "version": "1.1.2", + "resolved": "https://registry.npmjs.org/iterator.prototype/-/iterator.prototype-1.1.2.tgz", + "integrity": "sha512-DR33HMMr8EzwuRL8Y9D3u2BMj8+RqSE850jfGu59kS7tbmPLzGkZmVSfyCFSDxuZiEY6Rzt3T2NA/qU+NwVj1w==", + "dependencies": { + "define-properties": "^1.2.1", + "get-intrinsic": "^1.2.1", + "has-symbols": "^1.0.3", + "reflect.getprototypeof": "^1.0.4", + "set-function-name": "^2.0.1" + } + }, "node_modules/jake": { "version": "10.8.7", "license": "Apache-2.0", @@ -36250,11 +36345,14 @@ } }, "node_modules/jsx-ast-utils": { - "version": "3.3.3", - "license": "MIT", + "version": "3.3.5", + "resolved": "https://registry.npmjs.org/jsx-ast-utils/-/jsx-ast-utils-3.3.5.tgz", + "integrity": "sha512-ZZow9HBI5O6EPgSJLUb8n2NKgmVWTwCvHGwFuJlMjvLFqlGG6pjirPhtdsseaLZjSibD8eegzmYpUZwoIlj2cQ==", "dependencies": { - "array-includes": "^3.1.5", - "object.assign": "^4.1.3" + "array-includes": "^3.1.6", + "array.prototype.flat": "^1.3.1", + "object.assign": "^4.1.4", + "object.values": "^1.1.6" }, "engines": { "node": ">=4.0" @@ -36323,13 +36421,18 @@ }, "node_modules/language-subtag-registry": { "version": "0.3.22", - "license": "CC0-1.0" + "resolved": "https://registry.npmjs.org/language-subtag-registry/-/language-subtag-registry-0.3.22.tgz", + "integrity": "sha512-tN0MCzyWnoz/4nHS6uxdlFWoUZT7ABptwKPQ52Ea7URk6vll88bWBVhodtnlfEuCcKWNGoc+uGbw1cwa9IKh/w==" }, "node_modules/language-tags": { - "version": "1.0.5", - "license": "MIT", + "version": "1.0.9", + "resolved": "https://registry.npmjs.org/language-tags/-/language-tags-1.0.9.tgz", + "integrity": "sha512-MbjN408fEndfiQXbFQ1vnd+1NoLDsnQW41410oQBXiyXDMYH5z505juWa4KUE1LqxRC7DgOgZDbKLxHIwm27hA==", "dependencies": { - "language-subtag-registry": "~0.3.2" + "language-subtag-registry": "^0.3.20" + }, + "engines": { + "node": ">=0.10" } }, "node_modules/last-call-webpack-plugin": { @@ -38553,12 +38656,13 @@ } }, "node_modules/object.entries": { - "version": "1.1.6", - "license": "MIT", + "version": "1.1.7", + "resolved": "https://registry.npmjs.org/object.entries/-/object.entries-1.1.7.tgz", + "integrity": "sha512-jCBs/0plmPsOnrKAfFQXRG2NFjlhZgjjcBLSmTnEhU8U6vVTsVe8ANeQJCHTl3gSsI4J+0emOoCgoKlmQPMgmA==", "dependencies": { "call-bind": "^1.0.2", - "define-properties": "^1.1.4", - "es-abstract": "^1.20.4" + "define-properties": "^1.2.0", + "es-abstract": "^1.22.1" }, "engines": { "node": ">= 0.4" @@ -38568,12 +38672,13 @@ "version": "1.0.1" }, "node_modules/object.fromentries": { - "version": "2.0.6", - "license": "MIT", + "version": "2.0.7", + "resolved": "https://registry.npmjs.org/object.fromentries/-/object.fromentries-2.0.7.tgz", + "integrity": "sha512-UPbPHML6sL8PI/mOqPwsH4G6iyXcCGzLin8KvEPenOZN5lpCNBZZQ+V62vdjB1mQHrmqGQt5/OJzemUA+KJmEA==", "dependencies": { "call-bind": "^1.0.2", - "define-properties": "^1.1.4", - "es-abstract": "^1.20.4" + "define-properties": "^1.2.0", + "es-abstract": "^1.22.1" }, "engines": { "node": ">= 0.4" @@ -43238,6 +43343,25 @@ "redux": "^4" } }, + "node_modules/reflect.getprototypeof": { + "version": "1.0.4", + "resolved": "https://registry.npmjs.org/reflect.getprototypeof/-/reflect.getprototypeof-1.0.4.tgz", + "integrity": "sha512-ECkTw8TmJwW60lOTR+ZkODISW6RQ8+2CL3COqtiJKLd6MmB45hN51HprHFziKLGkAuTGQhBb91V8cy+KHlaCjw==", + "dependencies": { + "call-bind": "^1.0.2", + "define-properties": "^1.2.0", + "es-abstract": "^1.22.1", + "get-intrinsic": "^1.2.1", + "globalthis": "^1.0.3", + "which-builtin-type": "^1.1.3" + }, + "engines": { + "node": ">= 0.4" + }, + "funding": { + "url": "https://github.com/sponsors/ljharb" + } + }, "node_modules/refractor": { "version": "2.10.1", "license": "MIT", @@ -43749,6 +43873,12 @@ "uuid": "bin/uuid" } }, + "node_modules/requestidlecallback": { + "version": "0.3.0", + "resolved": "https://registry.npmjs.org/requestidlecallback/-/requestidlecallback-0.3.0.tgz", + "integrity": "sha512-TWHFkT7S9p7IxLC5A1hYmAYQx2Eb9w1skrXmQ+dS1URyvR8tenMLl4lHbqEOUnpEYxNKpkVMXUgknVpBZWXXfQ==", + "dev": true + }, "node_modules/require-directory": { "version": "2.1.1", "license": "MIT", @@ -48571,9 +48701,35 @@ "url": "https://github.com/sponsors/ljharb" } }, + "node_modules/which-builtin-type": { + "version": "1.1.3", + "resolved": "https://registry.npmjs.org/which-builtin-type/-/which-builtin-type-1.1.3.tgz", + "integrity": "sha512-YmjsSMDBYsM1CaFiayOVT06+KJeXf0o5M/CAd4o1lTadFAtacTUM49zoYxr/oroopFDfhvN6iEcBxUyc3gvKmw==", + "dependencies": { + "function.prototype.name": "^1.1.5", + "has-tostringtag": "^1.0.0", + "is-async-function": "^2.0.0", + "is-date-object": "^1.0.5", + "is-finalizationregistry": "^1.0.2", + "is-generator-function": "^1.0.10", + "is-regex": "^1.1.4", + "is-weakref": "^1.0.2", + "isarray": "^2.0.5", + "which-boxed-primitive": "^1.0.2", + "which-collection": "^1.0.1", + "which-typed-array": "^1.1.9" + }, + "engines": { + "node": ">= 0.4" + }, + "funding": { + "url": "https://github.com/sponsors/ljharb" + } + }, "node_modules/which-collection": { "version": "1.0.1", - "license": "MIT", + "resolved": "https://registry.npmjs.org/which-collection/-/which-collection-1.0.1.tgz", + "integrity": "sha512-W8xeTUwaln8i3K/cY1nGXzdnVZlidBcagyNFtBdD5kxnb4TvGKR7FfSIS3mYpwWS1QUCutfKz8IY8RjftB0+1A==", "dependencies": { "is-map": "^2.0.1", "is-set": "^2.0.1", diff --git a/package.json b/package.json index cef7c7ec..61424c15 100644 --- a/package.json +++ b/package.json @@ -70,6 +70,7 @@ ] }, "devDependencies": { + "@axe-core/react": "^4.8.1", "@types/lodash": "^4.14.198", "@types/node": "^20.4.0", "@types/redux": "^3.6.0", @@ -80,6 +81,7 @@ "eslint": "^8.40.0", "eslint-config-airbnb": "^19.0.4", "eslint-config-airbnb-typescript": "^17.0.0", + "eslint-plugin-jsx-a11y": "^6.8.0", "typescript": "^5.0.4" } } diff --git a/src/components/Footer/FooterDesktop.tsx b/src/components/Footer/FooterDesktop.tsx index b217fa20..57461f26 100644 --- a/src/components/Footer/FooterDesktop.tsx +++ b/src/components/Footer/FooterDesktop.tsx @@ -2,7 +2,7 @@ import React, { useState, useRef } from 'react'; import styled from 'styled-components'; import FooterData from '../../config/globalFooterData'; -const FooterStyled = styled.footer` +const FooterStyled = styled.div` background-color: #1B496E; border-top: 1px solid #6C727B; bottom: 0; @@ -15,7 +15,7 @@ const FooterContainer = styled.div` padding: 2rem 2rem 2rem 2rem; max-width: 1400px; margin-left: auto; - margin-right: auto; + margin-right: auto; display: flex; justify-content: space-between; @@ -215,7 +215,7 @@ const BottomFooter = styled.div` font-family: 'Open Sans'; font-style: normal; font-weight: 400; - font-size: 14px; + font-size: 14px; line-height: 1.6; text-align: right; color: #FFFFFF; diff --git a/src/components/Footer/index.tsx b/src/components/Footer/index.tsx index 018ffc14..cd735331 100644 --- a/src/components/Footer/index.tsx +++ b/src/components/Footer/index.tsx @@ -4,7 +4,7 @@ import FooterDesktop from './FooterDesktop'; import FooterTablet from './FooterTablet'; import FooterMobile from './FooterMobile'; -const FooterContainer = styled.div` +const FooterContainer = styled.footer` @media (min-width: 1024px) { .desktop { display: block; diff --git a/src/components/Header/index.tsx b/src/components/Header/index.tsx index 934b8fbb..7ed4bb39 100644 --- a/src/components/Header/index.tsx +++ b/src/components/Header/index.tsx @@ -6,7 +6,7 @@ import USABanner from './USABanner'; import GenericAlert from '../GenericAlert'; import { useAuthContext } from '../Contexts/AuthContext'; -const HeaderContainer = styled.div` +const HeaderContainer = styled.header` @media (min-width: 1024px) { .desktop { display: block; diff --git a/src/components/ScrollButton/ScrollButtonStyles.css b/src/components/ScrollButton/ScrollButtonStyles.css index 71dfb631..2a66d001 100644 --- a/src/components/ScrollButton/ScrollButtonStyles.css +++ b/src/components/ScrollButton/ScrollButtonStyles.css @@ -17,7 +17,7 @@ text-decoration: none; line-height: 1.2; transition: all 0.25s ease-out; - z-index:10; + z-index:999; } #stt:active { diff --git a/src/components/ScrollButton/ScrollButtonView.tsx b/src/components/ScrollButton/ScrollButtonView.tsx index e5f62ea3..bb0ce165 100644 --- a/src/components/ScrollButton/ScrollButtonView.tsx +++ b/src/components/ScrollButton/ScrollButtonView.tsx @@ -3,7 +3,7 @@ import "./ScrollButtonStyles.css"; const ScrollButton = () => { const [scroll, setScroll] = useState(0); - const clickToTopRef = useRef(null); + const clickToTopRef = useRef(null); const updateScroll = () => { setScroll(window.scrollY); @@ -25,7 +25,8 @@ const ScrollButton = () => { }, []); return ( - { } > BACK TO TOP - + ); }; diff --git a/src/index.tsx b/src/index.tsx index 2f44267a..e9a099ef 100644 --- a/src/index.tsx +++ b/src/index.tsx @@ -2,15 +2,21 @@ import React from 'react'; import ReactDOM from 'react-dom/client'; import { HelmetProvider } from 'react-helmet-async'; import { ApolloProvider } from '@apollo/client'; +import axe from '@axe-core/react'; import App from './App'; import client from './client'; import * as serviceWorker from './serviceWorker'; import reportWebVitals from './reportWebVitals'; import { AuthProvider } from './components/Contexts/AuthContext'; +if (process.env.NODE_ENV !== "production") { + axe(React, ReactDOM, 1000); +} + const root = ReactDOM.createRoot( document.getElementById('root') as HTMLElement ); + root.render( diff --git a/src/layouts/index.tsx b/src/layouts/index.tsx index a721ae82..7132f68a 100644 --- a/src/layouts/index.tsx +++ b/src/layouts/index.tsx @@ -9,7 +9,7 @@ import ScrollButton from '../components/ScrollButton/ScrollButtonView'; import OverlayWindow from '../components/SystemUseWarningOverlay/OverlayWindow'; import InactivityDialog from '../components/InactivityDialog/InactivityDialog'; -const StyledWrapper = styled("div")(() => ({ +const StyledWrapper = styled("main")(() => ({ minHeight: "400px", })); @@ -41,9 +41,9 @@ const Layout: FC = ({ children }) => ( {children || } +