diff --git a/packages/fuselage/package.json b/packages/fuselage/package.json index c61ed2bfb9..0a1d39b40c 100644 --- a/packages/fuselage/package.json +++ b/packages/fuselage/package.json @@ -94,6 +94,7 @@ "@testing-library/user-event": "~14.4.3", "@types/invariant": "^2.2.35", "@types/jest": "~29.5.0", + "@types/jest-axe": "~3.5.5", "autoprefixer": "~10.4.14", "babel-loader": "~9.1.2", "bump": "workspace:~", @@ -106,6 +107,7 @@ "eslint-mdx": "~2.0.5", "eslint-plugin-mdx": "~2.0.5", "jest": "~29.5.0", + "jest-axe": "~8.0.0", "lint-all": "workspace:~", "lint-staged": "~13.2.1", "mini-css-extract-plugin": "~2.7.6", diff --git a/packages/fuselage/src/components/ToastBar/ToastBar.spec.tsx b/packages/fuselage/src/components/ToastBar/ToastBar.spec.tsx index 9fd0b8c564..acdbd086a9 100644 --- a/packages/fuselage/src/components/ToastBar/ToastBar.spec.tsx +++ b/packages/fuselage/src/components/ToastBar/ToastBar.spec.tsx @@ -1,10 +1,20 @@ import { render } from '@testing-library/react'; +import { axe, toHaveNoViolations } from 'jest-axe'; import React from 'react'; import { ToastBar } from '.'; +expect.extend(toHaveNoViolations); + describe('[ToastBar Component]', () => { it('renders without crashing', () => { render(); }); + + it('should have no a11y violations', async () => { + const { container } = render(); + + const results = await axe(container); + expect(results).toHaveNoViolations(); + }); }); diff --git a/packages/fuselage/src/components/ToastBar/ToastBar.tsx b/packages/fuselage/src/components/ToastBar/ToastBar.tsx index 65951f7d99..5753eb12ff 100644 --- a/packages/fuselage/src/components/ToastBar/ToastBar.tsx +++ b/packages/fuselage/src/components/ToastBar/ToastBar.tsx @@ -1,6 +1,6 @@ import { css, keyframes } from '@rocket.chat/css-in-js'; import { useUniqueId } from '@rocket.chat/fuselage-hooks'; -import type { ReactNode } from 'react'; +import type { ReactNode, AllHTMLAttributes } from 'react'; import React from 'react'; import Box from '../Box'; @@ -14,7 +14,8 @@ export type ToastBarProps = { time?: number; id?: string; onClose?: (id: string) => void; -}; + buttonLabel?: string; +} & Omit, 'is'>; export function ToastBar({ children, @@ -23,6 +24,8 @@ export function ToastBar({ time = 5, id, onClose, + buttonLabel = 'Close', + ...props }: ToastBarProps) { const iconName = (variant === 'success' && 'circle-check') || @@ -64,32 +67,36 @@ export function ToastBar({ return ( - -
- -
- {children} -
- {onClose && ( -
- onClose(toastId)} icon='cross' /> -
- )} +
+ +
+ {children}
- - + {onClose && ( +
+ onClose(toastId)} + icon='cross' + aria-label={buttonLabel} + /> +
+ )} +
+ ); } diff --git a/yarn.lock b/yarn.lock index 346e2a3cb8..0054c854e8 100644 --- a/yarn.lock +++ b/yarn.lock @@ -2234,6 +2234,15 @@ __metadata: languageName: node linkType: hard +"@jest/schemas@npm:^29.6.0": + version: 29.6.0 + resolution: "@jest/schemas@npm:29.6.0" + dependencies: + "@sinclair/typebox": ^0.27.8 + checksum: c00511c69cf89138a7d974404d3a5060af375b5a52b9c87215d91873129b382ca11c1ff25bd6d605951404bb381ddce5f8091004a61e76457da35db1f5c51365 + languageName: node + linkType: hard + "@jest/source-map@npm:^29.4.3": version: 29.4.3 resolution: "@jest/source-map@npm:29.4.3" @@ -6259,6 +6268,7 @@ __metadata: "@testing-library/user-event": ~14.4.3 "@types/invariant": ^2.2.35 "@types/jest": ~29.5.0 + "@types/jest-axe": ~3.5.5 autoprefixer: ~10.4.14 babel-loader: ~9.1.2 bump: "workspace:~" @@ -6272,6 +6282,7 @@ __metadata: eslint-plugin-mdx: ~2.0.5 invariant: ^2.2.4 jest: ~29.5.0 + jest-axe: ~8.0.0 lint-all: "workspace:~" lint-staged: ~13.2.1 mini-css-extract-plugin: ~2.7.6 @@ -6845,6 +6856,13 @@ __metadata: languageName: node linkType: hard +"@sinclair/typebox@npm:^0.27.8": + version: 0.27.8 + resolution: "@sinclair/typebox@npm:0.27.8" + checksum: 00bd7362a3439021aa1ea51b0e0d0a0e8ca1351a3d54c606b115fdcc49b51b16db6e5f43b4fe7a28c38688523e22a94d49dd31168868b655f0d4d50f032d07a1 + languageName: node + linkType: hard + "@sindresorhus/is@npm:^4.0.0": version: 4.6.0 resolution: "@sindresorhus/is@npm:4.6.0" @@ -8912,6 +8930,16 @@ __metadata: languageName: node linkType: hard +"@types/jest-axe@npm:~3.5.5": + version: 3.5.5 + resolution: "@types/jest-axe@npm:3.5.5" + dependencies: + "@types/jest": "*" + axe-core: ^3.5.5 + checksum: 535038968034fe80fb466dcd5939ea5d9e9adb3ef00852ded3e41c62536c05137eb30bcbfd608142d2bc571d65c20b8e3563181674fb48594c2662d340bb4da5 + languageName: node + linkType: hard + "@types/jest@npm:*, @types/jest@npm:>=26.0.0, @types/jest@npm:~29.5.0": version: 29.5.0 resolution: "@types/jest@npm:29.5.0" @@ -10697,13 +10725,20 @@ __metadata: languageName: node linkType: hard -"axe-core@npm:^4.2.0": +"axe-core@npm:4.7.2, axe-core@npm:^4.2.0": version: 4.7.2 resolution: "axe-core@npm:4.7.2" checksum: 5d86fa0f45213b0e54cbb5d713ce885c4a8fe3a72b92dd915a47aa396d6fd149c4a87fec53aa978511f6d941402256cfeb26f2db35129e370f25a453c688655a languageName: node linkType: hard +"axe-core@npm:^3.5.5": + version: 3.5.6 + resolution: "axe-core@npm:3.5.6" + checksum: 000777d2b6bf1f390beb1fb4b8714ed9127797c021c345b032db0c144e07320dbbe8cb0bcb7688b90b79cfbd3cdc1f27a4dc857804e3c61d7e0defb34deeb830 + languageName: node + linkType: hard + "babel-jest@npm:^29.5.0": version: 29.5.0 resolution: "babel-jest@npm:29.5.0" @@ -11716,6 +11751,16 @@ __metadata: languageName: node linkType: hard +"chalk@npm:4.1.2, chalk@npm:^4.0.0, chalk@npm:^4.0.2, chalk@npm:^4.1.0, chalk@npm:^4.1.2": + version: 4.1.2 + resolution: "chalk@npm:4.1.2" + dependencies: + ansi-styles: ^4.1.0 + supports-color: ^7.1.0 + checksum: fe75c9d5c76a7a98d45495b91b2172fa3b7a09e0cc9370e5c8feb1c567b85c4288e2b3fded7cfdd7359ac28d6b3844feb8b82b8686842e93d23c827c417e83fc + languageName: node + linkType: hard + "chalk@npm:5.2.0, chalk@npm:^5.2.0": version: 5.2.0 resolution: "chalk@npm:5.2.0" @@ -11744,16 +11789,6 @@ __metadata: languageName: node linkType: hard -"chalk@npm:^4.0.0, chalk@npm:^4.0.2, chalk@npm:^4.1.0, chalk@npm:^4.1.2": - version: 4.1.2 - resolution: "chalk@npm:4.1.2" - dependencies: - ansi-styles: ^4.1.0 - supports-color: ^7.1.0 - checksum: fe75c9d5c76a7a98d45495b91b2172fa3b7a09e0cc9370e5c8feb1c567b85c4288e2b3fded7cfdd7359ac28d6b3844feb8b82b8686842e93d23c827c417e83fc - languageName: node - linkType: hard - "change-case@npm:^3.1.0": version: 3.1.0 resolution: "change-case@npm:3.1.0" @@ -17960,6 +17995,18 @@ fsevents@^1.2.7: languageName: node linkType: hard +"jest-axe@npm:~8.0.0": + version: 8.0.0 + resolution: "jest-axe@npm:8.0.0" + dependencies: + axe-core: 4.7.2 + chalk: 4.1.2 + jest-matcher-utils: 29.2.2 + lodash.merge: 4.6.2 + checksum: 895501afa6ac6c49e5e45ee1cd4a8e923589f220f6f950a8f5366cc3f3636aaee9c9d501a469f9658185e7a5928b59a337d4b4f1c7bb3f4b3b5ba8b3811c9f15 + languageName: node + linkType: hard + "jest-changed-files@npm:^29.5.0": version: 29.5.0 resolution: "jest-changed-files@npm:29.5.0" @@ -18063,6 +18110,18 @@ fsevents@^1.2.7: languageName: node linkType: hard +"jest-diff@npm:^29.2.1": + version: 29.6.2 + resolution: "jest-diff@npm:29.6.2" + dependencies: + chalk: ^4.0.0 + diff-sequences: ^29.4.3 + jest-get-type: ^29.4.3 + pretty-format: ^29.6.2 + checksum: 0effd66a0c23f8c139ebf7ca99ed30b479b86fff66f19ad4869f130aaf7ae6a24ca1533f697b7e4930cbe2ddffc85387723fcca673501c653fb77a38f538e959 + languageName: node + linkType: hard + "jest-diff@npm:^29.5.0": version: 29.5.0 resolution: "jest-diff@npm:29.5.0" @@ -18132,7 +18191,7 @@ fsevents@^1.2.7: languageName: node linkType: hard -"jest-get-type@npm:^29.4.3": +"jest-get-type@npm:^29.2.0, jest-get-type@npm:^29.4.3": version: 29.4.3 resolution: "jest-get-type@npm:29.4.3" checksum: 6ac7f2dde1c65e292e4355b6c63b3a4897d7e92cb4c8afcf6d397f2682f8080e094c8b0b68205a74d269882ec06bf696a9de6cd3e1b7333531e5ed7b112605ce @@ -18197,6 +18256,18 @@ fsevents@^1.2.7: languageName: node linkType: hard +"jest-matcher-utils@npm:29.2.2": + version: 29.2.2 + resolution: "jest-matcher-utils@npm:29.2.2" + dependencies: + chalk: ^4.0.0 + jest-diff: ^29.2.1 + jest-get-type: ^29.2.0 + pretty-format: ^29.2.1 + checksum: 97ef2638ab826c25f84bfedea231cef091820ae0876ba316922da81145e950d2b9d2057d3645813b5ee880bb975ed4f22e228dda5d0d26a20715e575b675357d + languageName: node + linkType: hard + "jest-matcher-utils@npm:^29.5.0": version: 29.5.0 resolution: "jest-matcher-utils@npm:29.5.0" @@ -19165,7 +19236,7 @@ fsevents@^1.2.7: languageName: node linkType: hard -"lodash.merge@npm:^4.6.2": +"lodash.merge@npm:4.6.2, lodash.merge@npm:^4.6.2": version: 4.6.2 resolution: "lodash.merge@npm:4.6.2" checksum: ad580b4bdbb7ca1f7abf7e1bce63a9a0b98e370cf40194b03380a46b4ed799c9573029599caebc1b14e3f24b111aef72b96674a56cfa105e0f5ac70546cdc005 @@ -23070,6 +23141,17 @@ fsevents@^1.2.7: languageName: node linkType: hard +"pretty-format@npm:^29.2.1, pretty-format@npm:^29.6.2": + version: 29.6.2 + resolution: "pretty-format@npm:29.6.2" + dependencies: + "@jest/schemas": ^29.6.0 + ansi-styles: ^5.0.0 + react-is: ^18.0.0 + checksum: a0f972a44f959023c0df9cdfe9eed7540264d7f7ddf74667db8a5294444d5aa153fd47d20327df10ae86964e2ceec10e46ea06b1a5c9c12e02348b78c952c9fc + languageName: node + linkType: hard + "pretty-hrtime@npm:^1.0.3": version: 1.0.3 resolution: "pretty-hrtime@npm:1.0.3"