mirrors/posthog
0
0
Fork 0
mirror of https://github.com/PostHog/posthog.git synced 2024-11-24 18:07:17 +01:00
Code Issues Releases Activity

fix: home accessibility (#11211)

Browse Source 
* 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
This commit is contained in:
Paul D'Ambra 2022-08-09 20:01:58 +01:00 committed by GitHub
parent 0a6d99c0a6
commit 36622515f1
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
7 changed files with 161 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
.storybook/main.js
View File

@ -21,6 +21,7 @@ module.exports = {
optimizationLevel: 3,
},
},
'@storybook/addon-a11y',
],
staticDirs: ['public'],
babel: async () => {

4
cypress/support/accessibility.js
View File

@ -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
)
}

1
frontend/src/layout/navigation/SideBar/SideBar.tsx
View File

@ -72,6 +72,7 @@ function Pages(): JSX.Element {
identifier={Scene.ProjectHomepage}
to={urls.projectHomepage()}
sideAction={{
'aria-label': 'switch project',
onClick: () => toggleProjectSwitcher(),
popup: {
visible: isProjectSwitcherShown,

7
frontend/src/lib/components/LemonButton/LemonButton.tsx
View File

@ -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 = (
<ButtonComponent
type={htmlType}
@ -119,7 +124,7 @@ export const LemonButton = React.forwardRef(LemonButtonInternal)
export type SideAction = Pick<
LemonButtonProps,
'onClick' | 'to' | 'disabled' | 'icon' | 'type' | 'tooltip' | 'data-attr'
'onClick' | 'to' | 'disabled' | 'icon' | 'type' | 'tooltip' | 'data-attr' | 'aria-label'
> & {
popup?: LemonButtonPopup
}

1
frontend/src/lib/components/LemonButton/More.tsx
View File

@ -11,6 +11,7 @@ export interface MoreProps extends Partial<Pick<PopupProps, 'overlay' | 'placeme
export function More({ overlay, placement = 'bottom-end', 'data-tooltip': dataTooltip }: MoreProps): JSX.Element {
return (
<LemonButtonWithPopup
aria-label="more"
data-attr="more-button"
data-tooltip={dataTooltip}
icon={<IconEllipsis />}

1
package.json
View File

@ -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",

150
yarn.lock
View File

@ -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"