diff --git a/frontend/package-lock.json b/frontend/package-lock.json index 2c6477337b..3f00a8129e 100644 --- a/frontend/package-lock.json +++ b/frontend/package-lock.json @@ -99,7 +99,6 @@ "xterm-addon-search": "^0.9.0" }, "devDependencies": { - "@axe-core/react": "^4.3.2", "@storybook/addon-actions": "7.6.7", "@storybook/addon-essentials": "7.6.7", "@storybook/addon-interactions": "7.6.20", @@ -256,17 +255,6 @@ "x-default-browser": "bin/x-default-browser.js" } }, - "node_modules/@axe-core/react": { - "version": "4.9.1", - "resolved": "https://registry.npmjs.org/@axe-core/react/-/react-4.9.1.tgz", - "integrity": "sha512-DibuylB94B2200NjfbfVrQODWqVdqkSjdgvaHDAwrBRSNdI4ZbPwGNL1kicnh2W9EgOQ4MFFbkWvM23h0Z1bVg==", - "dev": true, - "license": "MPL-2.0", - "dependencies": { - "axe-core": "~4.9.1", - "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", @@ -11324,6 +11312,7 @@ "resolved": "https://registry.npmjs.org/axe-core/-/axe-core-4.9.1.tgz", "integrity": "sha512-QbUdXJVTpvUTHU7871ppZkdOLBeGUKBQWHkHrvN2V9IQWGMt61zf3B45BtzjxEJzYuj0JBjBZP/hmYS/R9pmAw==", "license": "MPL-2.0", + "peer": true, "engines": { "node": ">=4" } @@ -24276,13 +24265,6 @@ "node": ">= 10" } }, - "node_modules/requestidlecallback": { - "version": "0.3.0", - "resolved": "https://registry.npmjs.org/requestidlecallback/-/requestidlecallback-0.3.0.tgz", - "integrity": "sha512-TWHFkT7S9p7IxLC5A1hYmAYQx2Eb9w1skrXmQ+dS1URyvR8tenMLl4lHbqEOUnpEYxNKpkVMXUgknVpBZWXXfQ==", - "dev": true, - "license": "MIT" - }, "node_modules/require-directory": { "version": "2.1.1", "resolved": "https://registry.npmjs.org/require-directory/-/require-directory-2.1.1.tgz", diff --git a/frontend/package.json b/frontend/package.json index 35ce480992..10438ee3db 100644 --- a/frontend/package.json +++ b/frontend/package.json @@ -178,7 +178,6 @@ }, "prettier": "@kinvolk/eslint-config/prettier-config", "devDependencies": { - "@axe-core/react": "^4.3.2", "@storybook/addon-actions": "7.6.7", "@storybook/addon-essentials": "7.6.7", "@storybook/addon-interactions": "7.6.20", diff --git a/frontend/src/index.tsx b/frontend/src/index.tsx index 61a9fcad3e..8306472f63 100644 --- a/frontend/src/index.tsx +++ b/frontend/src/index.tsx @@ -4,66 +4,8 @@ import App from './App'; ReactDOM.render(, document.getElementById('root')); -async function loadAxe() { - if (import.meta.env.DEV) { - let alreadyWarned = false; - let axe: any = await import('@axe-core/react'); - if (axe.default) { - axe = axe.default; //changed to esm module sometimes? - } - const axeCore = await import('axe-core'); - - if (import.meta.env.REACT_APP_SKIP_A11Y === 'false') { - function filterFalsePositives(results: typeof axeCore.AxeResults) { - // React changes the dom quickly, but axe-core notices missing main in between rendering - results.violations = results.violations.filter((v: any) => v.id !== 'landmark-one-main'); - - // Monaco has an issue with duplicate status. - // Apparently they've tested it's not an issue in practice. - // https://github.com/microsoft/monaco-editor/issues/2448 - results.violations = results.violations.filter( - (v: any) => - !(v.id === 'landmark-unique' && v.nodes[0].html.indexOf('monaco-status') !== -1) - ); - - // tooltips have role="tooltip", but should be in a landmark. - // This would need to be fixed within Material UI ToolTip component. - results.violations = results.violations.filter( - (v: any) => !(v.id === 'region' && v.nodes[0].html.indexOf('role="tooltip"') !== -1) - ); - - // Tooltips do an opacity transition, which causes a color contrast issue. - // But it's not an issue in practice, because the animation is quick. - // The final tooltip contrast is fine. - results.violations = results.violations.filter( - (v: any) => - !(v.id === 'color-contrast' && v.nodes[0].html.indexOf('MuiTooltip-tooltip') !== -1) - ); - - return results; - } - axe(React, ReactDOM, 500, undefined, undefined, (results: typeof axeCore.AxeResults) => { - const filteredResults = filterFalsePositives(results); - - if (filteredResults.violations.length > 0) { - console.error('axe results', filteredResults); - if (!alreadyWarned) { - alreadyWarned = true; - alert( - 'Accessibility issues found. See developer console. ' + - '`REACT_APP_SKIP_A11Y=false make run-frontend` to enable alert.' - ); - } - } - }).then(() => { - // Show the logs at end of other console logs (and after the alert). - // So they are easier to read. - axe(React, ReactDOM, 500, { disableDeduplicate: true }); - }); - } else { - // Only show the logs. - axe(React, ReactDOM, 500); - } - } -} -loadAxe(); +/** + * We used to have axe a11y check here + * TODO: Integrate a11y check in e2e tests + * https://playwright.dev/docs/accessibility-testing + */ diff --git a/plugins/headlamp-plugin/package-lock.json b/plugins/headlamp-plugin/package-lock.json index bc4e052903..6d2c4ccdd4 100644 --- a/plugins/headlamp-plugin/package-lock.json +++ b/plugins/headlamp-plugin/package-lock.json @@ -12,7 +12,6 @@ "dependencies": { "@apidevtools/json-schema-ref-parser": "9.0.9", "@apidevtools/swagger-parser": "^10.0.3", - "@axe-core/react": "^4.3.2", "@babel/cli": "^7.17.10", "@babel/core": "^7.11.1", "@babel/plugin-proposal-class-properties": "^7.10.4", @@ -294,15 +293,6 @@ "x-default-browser": "bin/x-default-browser.js" } }, - "node_modules/@axe-core/react": { - "version": "4.5.0", - "resolved": "https://registry.npmjs.org/@axe-core/react/-/react-4.5.0.tgz", - "integrity": "sha512-dH810c1PDuq2ZPK9ESPr5mJtxTU9CL/gpVl1oMgQiMKY2430nCDbaacmJVSbXQW0oWUEErE32eQ9vLfr2YP5eQ==", - "dependencies": { - "axe-core": "^4.5.0", - "requestidlecallback": "^0.3.0" - } - }, "node_modules/@babel/cli": { "version": "7.19.3", "resolved": "https://registry.npmjs.org/@babel/cli/-/cli-7.19.3.tgz", @@ -32180,11 +32170,6 @@ "node": ">= 10" } }, - "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", @@ -36504,15 +36489,6 @@ "default-browser-id": "3.0.0" } }, - "@axe-core/react": { - "version": "4.5.0", - "resolved": "https://registry.npmjs.org/@axe-core/react/-/react-4.5.0.tgz", - "integrity": "sha512-dH810c1PDuq2ZPK9ESPr5mJtxTU9CL/gpVl1oMgQiMKY2430nCDbaacmJVSbXQW0oWUEErE32eQ9vLfr2YP5eQ==", - "requires": { - "axe-core": "^4.5.0", - "requestidlecallback": "^0.3.0" - } - }, "@babel/cli": { "version": "7.19.3", "resolved": "https://registry.npmjs.org/@babel/cli/-/cli-7.19.3.tgz", @@ -59129,11 +59105,6 @@ "resolved": "https://registry.npmjs.org/replace-ext/-/replace-ext-2.0.0.tgz", "integrity": "sha512-UszKE5KVK6JvyD92nzMn9cDapSk6w/CaFZ96CnmDMUqH9oowfxF/ZjRITD25H4DnOQClLA4/j7jLGXXLVKxAug==" }, - "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/plugins/headlamp-plugin/package.json b/plugins/headlamp-plugin/package.json index 64c270597b..ad4df37bdb 100644 --- a/plugins/headlamp-plugin/package.json +++ b/plugins/headlamp-plugin/package.json @@ -16,7 +16,6 @@ "dependencies": { "@apidevtools/json-schema-ref-parser": "9.0.9", "@apidevtools/swagger-parser": "^10.0.3", - "@axe-core/react": "^4.3.2", "@babel/cli": "^7.17.10", "@babel/core": "^7.11.1", "@babel/plugin-proposal-class-properties": "^7.10.4",