chore(fuselage): Toastbar a11y (RocketChat#1130)

paviad · Aug 11, 2023 · 10faaf9 · 10faaf9
1 parent ab73172
commit 10faaf9
Show file tree

Hide file tree

Showing 4 changed files with 139 additions and 38 deletions.
diff --git 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
@@ -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(<ToastBar />);
   });
+
+  it('should have no a11y violations', async () => {
+    const { container } = render(<ToastBar />);
+
+    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
@@ -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<AllHTMLAttributes<HTMLElement>, '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 (
     <Box
-      className={['rcx-toastbar-wrapper', toastBarAnimation]}
+      className={[
+        `rcx-toastbar rcx-toastbar--${variant} ${className}`,
+        toastBarAnimation,
+      ]}
+      elevation='2nb'
+      borderRadius='x4'
       role='alert'
-      aria-labelledby={toastId}
+      {...props}
     >
-      <Box
-        className={`rcx-toastbar rcx-toastbar--${variant} ${className}`}
-        elevation='2nb'
-        borderRadius='x4'
-      >
-        <div className='rcx-toastbar_inner'>
-          <Icon
-            className={`rcx-toastbar_icon--${variant}`}
-            size='x20'
-            name={iconName}
-          />
-          <div className='rcx-toastbar_content' id={toastId}>
-            {children}
-          </div>
-          {onClose && (
-            <div className='rcx-toastbar-close'>
-              <IconButton tiny onClick={() => onClose(toastId)} icon='cross' />
-            </div>
-          )}
+      <div className='rcx-toastbar_inner'>
+        <Icon
+          className={`rcx-toastbar_icon--${variant}`}
+          size='x20'
+          name={iconName}
+        />
+        <div className='rcx-toastbar_content' id={toastId}>
+          {children}
         </div>
-        <Box className={[progressBarAnimation, 'rcx-toastbar_progressbar']} />
-      </Box>
+        {onClose && (
+          <div className='rcx-toastbar-close'>
+            <IconButton
+              tiny
+              onClick={() => onClose(toastId)}
+              icon='cross'
+              aria-label={buttonLabel}
+            />
+          </div>
+        )}
+      </div>
+      <Box className={[progressBarAnimation, 'rcx-toastbar_progressbar']} />
     </Box>
   );
 }
diff --git 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"