From 1f9c7b4a606982e0e5bcaaf2f618ddec2f3272ed Mon Sep 17 00:00:00 2001 From: Rick Date: Fri, 4 Oct 2024 19:41:35 -0500 Subject: [PATCH 1/3] chore(deps): adds axe-core for WCAG --- package-lock.json | 30 ++++++++++++++++++++++++++++++ package.json | 6 +++++- src/index.js | 5 +++++ 3 files changed, 40 insertions(+), 1 deletion(-) diff --git a/package-lock.json b/package-lock.json index 18f7640..204a15b 100644 --- a/package-lock.json +++ b/package-lock.json @@ -8,6 +8,7 @@ "name": "mansfield_portfolio", "version": "0.1.1", "dependencies": { + "@axe-core/react": "^4.10.0", "react": "^18.3.1", "react-dom": "^18.3.1", "react-icons": "^5.2.1", @@ -19,6 +20,7 @@ "web-vitals": "^4.2.2" }, "devDependencies": { + "eslint-plugin-jsx-a11y": "^6.10.0", "standard-version": "^9.5.0" }, "engines": { @@ -48,6 +50,15 @@ "node": ">=6.0.0" } }, + "node_modules/@axe-core/react": { + "version": "4.10.0", + "resolved": "https://registry.npmjs.org/@axe-core/react/-/react-4.10.0.tgz", + "integrity": "sha512-gpFj1+G0zabbd0ZDum1N5FPJtUOfPIfslXNH58WuR7opSK0WTwPJ49ZlYr/Wg2fA4VGI5lfkG5fAZSG9p8ecKw==", + "dependencies": { + "axe-core": "~4.10.0", + "requestidlecallback": "^0.3.0" + } + }, "node_modules/@babel/code-frame": { "version": "7.24.7", "resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.24.7.tgz", @@ -15858,6 +15869,11 @@ "strip-ansi": "^6.0.1" } }, + "node_modules/requestidlecallback": { + "version": "0.3.0", + "resolved": "https://registry.npmjs.org/requestidlecallback/-/requestidlecallback-0.3.0.tgz", + "integrity": "sha512-TWHFkT7S9p7IxLC5A1hYmAYQx2Eb9w1skrXmQ+dS1URyvR8tenMLl4lHbqEOUnpEYxNKpkVMXUgknVpBZWXXfQ==" + }, "node_modules/require-directory": { "version": "2.1.1", "resolved": "https://registry.npmjs.org/require-directory/-/require-directory-2.1.1.tgz", @@ -19215,6 +19231,15 @@ "@jridgewell/trace-mapping": "^0.3.24" } }, + "@axe-core/react": { + "version": "4.10.0", + "resolved": "https://registry.npmjs.org/@axe-core/react/-/react-4.10.0.tgz", + "integrity": "sha512-gpFj1+G0zabbd0ZDum1N5FPJtUOfPIfslXNH58WuR7opSK0WTwPJ49ZlYr/Wg2fA4VGI5lfkG5fAZSG9p8ecKw==", + "requires": { + "axe-core": "~4.10.0", + "requestidlecallback": "^0.3.0" + } + }, "@babel/code-frame": { "version": "7.24.7", "resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.24.7.tgz", @@ -30302,6 +30327,11 @@ "strip-ansi": "^6.0.1" } }, + "requestidlecallback": { + "version": "0.3.0", + "resolved": "https://registry.npmjs.org/requestidlecallback/-/requestidlecallback-0.3.0.tgz", + "integrity": "sha512-TWHFkT7S9p7IxLC5A1hYmAYQx2Eb9w1skrXmQ+dS1URyvR8tenMLl4lHbqEOUnpEYxNKpkVMXUgknVpBZWXXfQ==" + }, "require-directory": { "version": "2.1.1", "resolved": "https://registry.npmjs.org/require-directory/-/require-directory-2.1.1.tgz", diff --git a/package.json b/package.json index e2697eb..9e0c2f8 100644 --- a/package.json +++ b/package.json @@ -3,6 +3,7 @@ "version": "0.1.1", "private": true, "dependencies": { + "@axe-core/react": "^4.10.0", "react": "^18.3.1", "react-dom": "^18.3.1", "react-icons": "^5.2.1", @@ -26,7 +27,8 @@ "eslintConfig": { "extends": [ "react-app", - "react-app/jest" + "react-app/jest", + "plugin:jsx-a11y/recommended" ] }, "browserslist": { @@ -42,6 +44,8 @@ ] }, "devDependencies": { + "eslint-plugin-jsx-a11y": "^6.10.0", "standard-version": "^9.5.0" } + } diff --git a/src/index.js b/src/index.js index 7998135..e6db511 100644 --- a/src/index.js +++ b/src/index.js @@ -3,6 +3,11 @@ import ReactDOM from 'react-dom'; import App from './App'; import reportWebVitals from './reportWebVitals'; +if (process.env.NODE_ENV !== 'production') { + const axe = require('@axe-core/react'); + axe(React, ReactDOM, 1000); +} + ReactDOM.render( From 01be18939f05bfb707ef1356d271bfde38cd126c Mon Sep 17 00:00:00 2001 From: Rick Date: Fri, 4 Oct 2024 19:52:48 -0500 Subject: [PATCH 2/3] refactor(reactDOM): update router to 18 --- src/index.js | 17 +++++++---------- 1 file changed, 7 insertions(+), 10 deletions(-) diff --git a/src/index.js b/src/index.js index e6db511..99ca1e0 100644 --- a/src/index.js +++ b/src/index.js @@ -1,21 +1,18 @@ import React from 'react'; -import ReactDOM from 'react-dom'; +import ReactDOM from 'react-dom/client'; +import './index.css'; import App from './App'; import reportWebVitals from './reportWebVitals'; -if (process.env.NODE_ENV !== 'production') { - const axe = require('@axe-core/react'); - axe(React, ReactDOM, 1000); -} - -ReactDOM.render( +const root = ReactDOM.createRoot(document.getElementById('root')); +root.render( - , - document.getElementById('root') + ); // If you want to start measuring performance in your app, pass a function // to log results (for example: reportWebVitals(console.log)) // or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals -reportWebVitals(); +// reportWebVitals(console.log); +reportWebVitals(); \ No newline at end of file From 00e64bbbba6bdba9e609ba25494ad3567b743b30 Mon Sep 17 00:00:00 2001 From: Rick Date: Fri, 4 Oct 2024 20:04:31 -0500 Subject: [PATCH 3/3] fix(Linting): adds required listener --- src/components/project.js | 33 +++++++++++++++++++++++++++------ 1 file changed, 27 insertions(+), 6 deletions(-) diff --git a/src/components/project.js b/src/components/project.js index 5775c0c..de6b56e 100644 --- a/src/components/project.js +++ b/src/components/project.js @@ -12,12 +12,33 @@ export default function Project({ proj, onClick, handleExit, isFadingIn }) { } = proj; return ( -
+
{ + if (e.key === 'Enter' || e.key === ' ') { + onClick(e); + } + }} + tabIndex={0} + role="button" + > {handleExit && ( -
{ - e.stopPropagation(); - handleExit(); - }}> +
{ + e.stopPropagation(); + handleExit(); + }} + onKeyDown={(e) => { + if (e.key === 'Enter' || e.key === ' ') { + e.stopPropagation(); + handleExit(); + } + }} + tabIndex={0} + role="button" + >
)} @@ -61,4 +82,4 @@ export default function Project({ proj, onClick, handleExit, isFadingIn }) { )}
); -} +} \ No newline at end of file