From 36622515f12b5c63e77e4eb99c1f023fa60c06bd Mon Sep 17 00:00:00 2001 From: Paul D'Ambra Date: Tue, 9 Aug 2022 20:01:58 +0100 Subject: [PATCH] fix: home accessibility (#11211) * feat: test a11y with Cypress * axe test more pages * archive a11y violations on success too * remove date from file path * don't warn if no accessibility files to upload... they're not on all test jobs * support switching accessibility tests to failing * support aria label on lemon buttons * add story book axe add-on * Defuckulate the tests * oops * can't stop skipping a11y failures for home just yet --- .storybook/main.js | 1 + cypress/support/accessibility.js | 4 +- .../src/layout/navigation/SideBar/SideBar.tsx | 1 + .../components/LemonButton/LemonButton.tsx | 7 +- .../src/lib/components/LemonButton/More.tsx | 1 + package.json | 1 + yarn.lock | 150 +++++++++++++++++- 7 files changed, 161 insertions(+), 4 deletions(-) diff --git a/.storybook/main.js b/.storybook/main.js index 45c98fc18eb..79dc1e31312 100644 --- a/.storybook/main.js +++ b/.storybook/main.js @@ -21,6 +21,7 @@ module.exports = { optimizationLevel: 3, }, }, + '@storybook/addon-a11y', ], staticDirs: ['public'], babel: async () => { diff --git a/cypress/support/accessibility.js b/cypress/support/accessibility.js index c419184ee63..0947ca2c62c 100644 --- a/cypress/support/accessibility.js +++ b/cypress/support/accessibility.js @@ -1,4 +1,4 @@ -export const reportA11y = (options, tag) => { +export const reportA11y = (options, tag, skipFailures = true) => { if (typeof tag !== undefined) { tag += '-' } @@ -12,6 +12,6 @@ export const reportA11y = (options, tag) => { cy.writeFile(`a11y/${tag}accessibility-violations.json`, JSON.stringify(violations)) }, - true + skipFailures ) } diff --git a/frontend/src/layout/navigation/SideBar/SideBar.tsx b/frontend/src/layout/navigation/SideBar/SideBar.tsx index 22d161241fb..5790bdecdc8 100644 --- a/frontend/src/layout/navigation/SideBar/SideBar.tsx +++ b/frontend/src/layout/navigation/SideBar/SideBar.tsx @@ -72,6 +72,7 @@ function Pages(): JSX.Element { identifier={Scene.ProjectHomepage} to={urls.projectHomepage()} sideAction={{ + 'aria-label': 'switch project', onClick: () => toggleProjectSwitcher(), popup: { visible: isProjectSwitcherShown, diff --git a/frontend/src/lib/components/LemonButton/LemonButton.tsx b/frontend/src/lib/components/LemonButton/LemonButton.tsx index 64014e682c6..3693476ea7e 100644 --- a/frontend/src/lib/components/LemonButton/LemonButton.tsx +++ b/frontend/src/lib/components/LemonButton/LemonButton.tsx @@ -40,6 +40,7 @@ export interface LemonButtonPropsBase size?: 'small' | 'medium' | 'large' 'data-attr'?: string 'data-tooltip'?: string + 'aria-label'?: string } export interface LemonButtonProps extends LemonButtonPropsBase { @@ -76,6 +77,10 @@ function LemonButtonInternal( const ButtonComponent = to || href ? Link : 'button' + if (ButtonComponent === 'button' && !buttonProps['aria-label'] && typeof tooltip === 'string') { + buttonProps['aria-label'] = tooltip + } + let workingButton = ( & { popup?: LemonButtonPopup } diff --git a/frontend/src/lib/components/LemonButton/More.tsx b/frontend/src/lib/components/LemonButton/More.tsx index 0a9b9d77066..d32fd8dfecd 100644 --- a/frontend/src/lib/components/LemonButton/More.tsx +++ b/frontend/src/lib/components/LemonButton/More.tsx @@ -11,6 +11,7 @@ export interface MoreProps extends Partial} diff --git a/package.json b/package.json index 0a3615c5ff1..5e6019ab6b3 100644 --- a/package.json +++ b/package.json @@ -127,6 +127,7 @@ "@babel/preset-typescript": "^7.16.7", "@cypress/webpack-preprocessor": "^5.12.0", "@hot-loader/react-dom": "^16.13.0", + "@storybook/addon-a11y": "^6.5.10", "@storybook/addon-actions": "^6.5.9", "@storybook/addon-essentials": "^6.5.9", "@storybook/addon-links": "^6.5.9", diff --git a/yarn.lock b/yarn.lock index bd4e3768e4c..4d713931235 100644 --- a/yarn.lock +++ b/yarn.lock @@ -3109,6 +3109,28 @@ dependencies: "@sinonjs/commons" "^1.7.0" +"@storybook/addon-a11y@^6.5.10": + version "6.5.10" + resolved "https://registry.yarnpkg.com/@storybook/addon-a11y/-/addon-a11y-6.5.10.tgz#a907cbd3f1889ba367828435a58ecc9dac42f6ba" + integrity sha512-BnDbLg7YEAX1aEyiB+gDFYMXIbiSFH/M0CdwPCq7T7o8cqULKOHtQkndMja1soMxsqHAVH8AGvVVZ8VlaxaJ3Q== + dependencies: + "@storybook/addons" "6.5.10" + "@storybook/api" "6.5.10" + "@storybook/channels" "6.5.10" + "@storybook/client-logger" "6.5.10" + "@storybook/components" "6.5.10" + "@storybook/core-events" "6.5.10" + "@storybook/csf" "0.0.2--canary.4566f4d.1" + "@storybook/theming" "6.5.10" + axe-core "^4.2.0" + core-js "^3.8.2" + global "^4.4.0" + lodash "^4.17.21" + react-sizeme "^3.0.1" + regenerator-runtime "^0.13.7" + ts-dedent "^2.0.0" + util-deprecate "^1.0.2" + "@storybook/addon-actions@6.5.9", "@storybook/addon-actions@^6.5.9": version "6.5.9" resolved "https://registry.yarnpkg.com/@storybook/addon-actions/-/addon-actions-6.5.9.tgz#d50d65631403e1a5b680961429d9c0d7bd383e68" @@ -3323,6 +3345,23 @@ prop-types "^15.7.2" regenerator-runtime "^0.13.7" +"@storybook/addons@6.5.10": + version "6.5.10" + resolved "https://registry.yarnpkg.com/@storybook/addons/-/addons-6.5.10.tgz#bff2f8fb8453e9df04fa6dbc41341fd05f4cdeba" + integrity sha512-VD4tBCQ23PkSeDoxuHcKy0RfhIs3oMYjBacOZx7d0bvOzK9WjPyvE2ysDAh7r/ceqnwmWHAScIpE+I1RU7gl+g== + dependencies: + "@storybook/api" "6.5.10" + "@storybook/channels" "6.5.10" + "@storybook/client-logger" "6.5.10" + "@storybook/core-events" "6.5.10" + "@storybook/csf" "0.0.2--canary.4566f4d.1" + "@storybook/router" "6.5.10" + "@storybook/theming" "6.5.10" + "@types/webpack-env" "^1.16.0" + core-js "^3.8.2" + global "^4.4.0" + regenerator-runtime "^0.13.7" + "@storybook/addons@6.5.9": version "6.5.9" resolved "https://registry.yarnpkg.com/@storybook/addons/-/addons-6.5.9.tgz#5a9d7395c579a9cbc44dfc122362fb3c95dfb9d5" @@ -3340,6 +3379,29 @@ global "^4.4.0" regenerator-runtime "^0.13.7" +"@storybook/api@6.5.10": + version "6.5.10" + resolved "https://registry.yarnpkg.com/@storybook/api/-/api-6.5.10.tgz#215623844648f0da2ac646fdcdd1345c2e1a8490" + integrity sha512-AkmgSPNEGdKp4oZA4KQ+RJsacw7GwfvjsVDnCkcXqS9zmSr/RNL0fhpcd60KKkmx/hGKPTDFpK3ZayxDrJ/h4A== + dependencies: + "@storybook/channels" "6.5.10" + "@storybook/client-logger" "6.5.10" + "@storybook/core-events" "6.5.10" + "@storybook/csf" "0.0.2--canary.4566f4d.1" + "@storybook/router" "6.5.10" + "@storybook/semver" "^7.3.2" + "@storybook/theming" "6.5.10" + core-js "^3.8.2" + fast-deep-equal "^3.1.3" + global "^4.4.0" + lodash "^4.17.21" + memoizerific "^1.11.3" + regenerator-runtime "^0.13.7" + store2 "^2.12.0" + telejson "^6.0.8" + ts-dedent "^2.0.0" + util-deprecate "^1.0.2" + "@storybook/api@6.5.9": version "6.5.9" resolved "https://registry.yarnpkg.com/@storybook/api/-/api-6.5.9.tgz#303733214c9de0422d162f7c54ae05d088b89bf9" @@ -3440,6 +3502,15 @@ global "^4.4.0" telejson "^6.0.8" +"@storybook/channels@6.5.10": + version "6.5.10" + resolved "https://registry.yarnpkg.com/@storybook/channels/-/channels-6.5.10.tgz#fca5b0d1ea8d30b022e805301ed436407c867ac4" + integrity sha512-lo26YZ6kWpHXLhuHJF4P/bICY7jD/rXEZqReKtGOSk1Lv99/xvG6pqmcy3hWLf3v3Dy/8otjRPSR7izFVIIZgQ== + dependencies: + core-js "^3.8.2" + ts-dedent "^2.0.0" + util-deprecate "^1.0.2" + "@storybook/channels@6.5.9": version "6.5.9" resolved "https://registry.yarnpkg.com/@storybook/channels/-/channels-6.5.9.tgz#abfab89a6587a2688e9926d4aafeb11c9d8b2e79" @@ -3475,6 +3546,14 @@ ts-dedent "^2.0.0" util-deprecate "^1.0.2" +"@storybook/client-logger@6.5.10": + version "6.5.10" + resolved "https://registry.yarnpkg.com/@storybook/client-logger/-/client-logger-6.5.10.tgz#cfea823a5b8444409daa74f854c5d05367986b34" + integrity sha512-/xA0MHOevXev68hyLMQw8Qo8KczSIdXOxliAgrycMTkDmw5eKeA8TP7B8zP3wGuq/e3MrdD9/8MWhb/IQBNC3w== + dependencies: + core-js "^3.8.2" + global "^4.4.0" + "@storybook/client-logger@6.5.9": version "6.5.9" resolved "https://registry.yarnpkg.com/@storybook/client-logger/-/client-logger-6.5.9.tgz#dc1669abe8c45af1cc38f74c6f4b15ff33e63014" @@ -3483,6 +3562,20 @@ core-js "^3.8.2" global "^4.4.0" +"@storybook/components@6.5.10": + version "6.5.10" + resolved "https://registry.yarnpkg.com/@storybook/components/-/components-6.5.10.tgz#268e1269bc3d262f7dcec13f96c3b844919687b8" + integrity sha512-9OhgB8YQfGwOKjo/N96N5mrtJ6qDVVoEM1zuhea32tJUd2eYf0aSWpryA9VnOM0V1q/8DAoCg5rPBMYWMBU5uw== + dependencies: + "@storybook/client-logger" "6.5.10" + "@storybook/csf" "0.0.2--canary.4566f4d.1" + "@storybook/theming" "6.5.10" + core-js "^3.8.2" + memoizerific "^1.11.3" + qs "^6.10.0" + regenerator-runtime "^0.13.7" + util-deprecate "^1.0.2" + "@storybook/components@6.5.9": version "6.5.9" resolved "https://registry.yarnpkg.com/@storybook/components/-/components-6.5.9.tgz#97e07ffe11ab76c01ccee380888991bd161f75b2" @@ -3581,6 +3674,13 @@ util-deprecate "^1.0.2" webpack "4" +"@storybook/core-events@6.5.10": + version "6.5.10" + resolved "https://registry.yarnpkg.com/@storybook/core-events/-/core-events-6.5.10.tgz#66d87c8ea18db8e448018a16a3d0198ddbcbc683" + integrity sha512-EVb1gO1172klVIAABLOoigFMx0V88uctY0K/qVCO8n6v+wd2+0Ccn63kl+gTxsAC3WZ8XhXh9q2w5ImHklVECw== + dependencies: + core-js "^3.8.2" + "@storybook/core-events@6.5.9": version "6.5.9" resolved "https://registry.yarnpkg.com/@storybook/core-events/-/core-events-6.5.9.tgz#5b0783c7d22a586c0f5e927a61fe1b1223e19637" @@ -3846,6 +3946,17 @@ util-deprecate "^1.0.2" webpack ">=4.43.0 <6.0.0" +"@storybook/router@6.5.10": + version "6.5.10" + resolved "https://registry.yarnpkg.com/@storybook/router/-/router-6.5.10.tgz#b0c342e080c1d2b5344603bc43a6c75734a4a879" + integrity sha512-O+vNW/eEpYFF8eCg5jZjNQ6q2DKQVxqDRPCy9pJdEbvavMDZn6AFYgVK+VJe5F4211WW2yncOu922xObCxXJYg== + dependencies: + "@storybook/client-logger" "6.5.10" + core-js "^3.8.2" + memoizerific "^1.11.3" + qs "^6.10.0" + regenerator-runtime "^0.13.7" + "@storybook/router@6.5.9": version "6.5.9" resolved "https://registry.yarnpkg.com/@storybook/router/-/router-6.5.9.tgz#4740248f8517425b2056273fb366ace8a17c65e8" @@ -3920,6 +4031,16 @@ read-pkg-up "^7.0.1" regenerator-runtime "^0.13.7" +"@storybook/theming@6.5.10": + version "6.5.10" + resolved "https://registry.yarnpkg.com/@storybook/theming/-/theming-6.5.10.tgz#052100979c1270fc8f60653c1a13a6f047318109" + integrity sha512-BvTQBBcSEwKKcsVmF+Ol6v0RIQUr+bxP7gb10wtfBd23mZTEFA0C1N5FnZr/dDeiBKG1pvf1UKvoYA731y0BsA== + dependencies: + "@storybook/client-logger" "6.5.10" + core-js "^3.8.2" + memoizerific "^1.11.3" + regenerator-runtime "^0.13.7" + "@storybook/theming@6.5.9": version "6.5.9" resolved "https://registry.yarnpkg.com/@storybook/theming/-/theming-6.5.9.tgz#13f60a3a3cd73ceb5caf9f188e1627e79f1891aa" @@ -5779,7 +5900,7 @@ aws4@^1.8.0: resolved "https://registry.yarnpkg.com/aws4/-/aws4-1.11.0.tgz#d61f46d83b2519250e2784daf5b09479a8b41c59" integrity sha512-xh1Rl34h6Fi1DC2WWKfxUTVqRsNnr6LsKz2+hfwDxQJWmrx8+c7ylaqBMcHfl1U1r2dsifOvKX3LQuLNZ+XSvA== -axe-core@^4.4.3: +axe-core@^4.2.0, axe-core@^4.4.3: version "4.4.3" resolved "https://registry.yarnpkg.com/axe-core/-/axe-core-4.4.3.tgz#11c74d23d5013c0fa5d183796729bc3482bd2f6f" integrity sha512-32+ub6kkdhhWick/UjvEwRchgoetXqTK14INLqbGm5U2TzBkBNF3nQtLYm8ovxSkQWArjEQvftCKryjZaATu3w== @@ -6061,6 +6182,11 @@ base@^0.11.1: mixin-deep "^1.2.0" pascalcase "^0.1.1" +batch-processor@1.0.0: + version "1.0.0" + resolved "https://registry.yarnpkg.com/batch-processor/-/batch-processor-1.0.0.tgz#75c95c32b748e0850d10c2b168f6bdbe9891ace8" + integrity sha512-xoLQD8gmmR32MeuBHgH0Tzd5PuSZx71ZsbhVxOCRbgktZEPe4SQy7s9Z50uPp0F/f7iw2XmkHN2xkgbMfckMDA== + bcrypt-pbkdf@^1.0.0: version "1.0.2" resolved "https://registry.yarnpkg.com/bcrypt-pbkdf/-/bcrypt-pbkdf-1.0.2.tgz#a4301d389b6a43f9b67ff3ca11a3f6637e360e9e" @@ -8447,6 +8573,13 @@ electron-to-chromium@^1.4.172: resolved "https://registry.yarnpkg.com/electron-to-chromium/-/electron-to-chromium-1.4.176.tgz#61ab2a1de3b5072ee31881a937c08ac6780d1cfa" integrity sha512-92JdgyRlcNDwuy75MjuFSb3clt6DGJ2IXSpg0MCjKd3JV9eSmuUAIyWiGAp/EtT0z2D4rqbYqThQLV90maH3Zw== +element-resize-detector@^1.2.2: + version "1.2.4" + resolved "https://registry.yarnpkg.com/element-resize-detector/-/element-resize-detector-1.2.4.tgz#3e6c5982dd77508b5fa7e6d5c02170e26325c9b1" + integrity sha512-Fl5Ftk6WwXE0wqCgNoseKWndjzZlDCwuPTcoVZfCP9R3EHQF8qUtr3YUPNETegRBOKqQKPW3n4kiIWngGi8tKg== + dependencies: + batch-processor "1.0.0" + elliptic@^6.5.3: version "6.5.3" resolved "https://registry.yarnpkg.com/elliptic/-/elliptic-6.5.3.tgz#cb59eb2efdaf73a0bd78ccd7015a62ad6e0f93d6" @@ -15105,6 +15238,16 @@ react-shadow@^18.4.2: humps "^2.0.1" react-use "^15.3.3" +react-sizeme@^3.0.1: + version "3.0.2" + resolved "https://registry.yarnpkg.com/react-sizeme/-/react-sizeme-3.0.2.tgz#4a2f167905ba8f8b8d932a9e35164e459f9020e4" + integrity sha512-xOIAOqqSSmKlKFJLO3inBQBdymzDuXx4iuwkNcJmC96jeiOg5ojByvL+g3MW9LPEsojLbC6pf68zOfobK8IPlw== + dependencies: + element-resize-detector "^1.2.2" + invariant "^2.2.4" + shallowequal "^1.1.0" + throttle-debounce "^3.0.1" + react-sortable-hoc@^1.11.0: version "1.11.0" resolved "https://registry.yarnpkg.com/react-sortable-hoc/-/react-sortable-hoc-1.11.0.tgz#fe4022362bbafc4b836f5104b9676608a40a278f" @@ -16990,6 +17133,11 @@ throttle-debounce@^2.1.0: resolved "https://registry.yarnpkg.com/throttle-debounce/-/throttle-debounce-2.3.0.tgz#fd31865e66502071e411817e241465b3e9c372e2" integrity sha512-H7oLPV0P7+jgvrk+6mwwwBDmxTaxnu9HMXmloNLXwnNO0ZxZ31Orah2n8lU1eMPvsaowP2CX+USCgyovXfdOFQ== +throttle-debounce@^3.0.1: + version "3.0.1" + resolved "https://registry.yarnpkg.com/throttle-debounce/-/throttle-debounce-3.0.1.tgz#32f94d84dfa894f786c9a1f290e7a645b6a19abb" + integrity sha512-dTEWWNu6JmeVXY0ZYoPuH5cRIwc0MeGbJwah9KUNYSJwommQpCzTySTpEe8Gs1J23aeWEuAobe4Ag7EHVt/LOg== + throttleit@^1.0.0: version "1.0.0" resolved "https://registry.yarnpkg.com/throttleit/-/throttleit-1.0.0.tgz#9e785836daf46743145a5984b6268d828528ac6c"