feat(fuselage): improve Toastbar accessibility (#1880)

Author: juliajforesti

.changeset/lucky-bottles-sleep.md

@@ -0,0 +1,5 @@
+---
+'@rocket.chat/fuselage': minor
+---
+
+feat(fuselage): improve `Toastbar` accessibility

packages/fuselage-toastbar/src/ToastBar.spec.tsx

@@ -29,7 +29,7 @@ const topStartStyle = {
 describe('[fuselage-toastbar rendering]', () => {
   test('should display ToastBar on the top right of the screen by default', async () => {
     render(<TopEnd />);
-    const toast = screen.queryByRole('alert');
+    const toast = screen.queryByRole('status');
     const toastContainer = toast?.parentElement?.parentElement?.parentElement;
 
     expect(toastContainer).toHaveStyle(topEndStyle);
@@ -38,7 +38,7 @@ describe('[fuselage-toastbar rendering]', () => {
   test('should display ToastBar on the top right of the screen', async () => {
     document.body.setAttribute('dir', 'ltr');
     render(<TopEnd />);
-    const toast = screen.queryByRole('alert');
+    const toast = screen.queryByRole('status');
     const toastContainer = toast?.parentElement?.parentElement?.parentElement;
 
     expect(toastContainer).toHaveStyle(topEndStyle);
@@ -47,7 +47,7 @@ describe('[fuselage-toastbar rendering]', () => {
   test('should display ToastBar on the top left of the screen', async () => {
     document.body.setAttribute('dir', 'rtl');
     render(<TopEnd />);
-    const toast = screen.queryByRole('alert');
+    const toast = screen.queryByRole('status');
     const toastContainer = toast?.parentElement?.parentElement?.parentElement;
 
     expect(toastContainer).toHaveStyle(topStartStyle);

packages/fuselage/src/components/ToastBar/ToastBar.spec.tsx

@@ -3,6 +3,7 @@ import { axe } from 'jest-axe';
 
 import { render } from '../../testing';
 
+import ToastBar from './ToastBar';
 import * as stories from './ToastBar.stories';
 
 const testCases = Object.values(composeStories(stories)).map((Story) => [
@@ -29,3 +30,35 @@ describe('[ToastBar Rendering]', () => {
     },
   );
 });
+
+describe('[ToastBar Roles]', () => {
+  it('should use role="status" for `info` variant (polite announcement)', () => {
+    const { getByRole } = render(
+      <ToastBar variant='info'>Info message</ToastBar>,
+    );
+    expect(getByRole('status')).toBeInTheDocument();
+    expect(getByRole('status')).toHaveTextContent('Info message');
+  });
+
+  it('should use role="status" for `success` variant (polite announcement)', () => {
+    const { getByRole } = render(
+      <ToastBar variant='success'>Success message</ToastBar>,
+    );
+    expect(getByRole('status')).toBeInTheDocument();
+    expect(getByRole('status')).toHaveTextContent('Success message');
+  });
+
+  it('should use role="alert" for `error` variant (assertive announcement)', () => {
+    const { getByRole } = render(
+      <ToastBar variant='error'>Error message</ToastBar>,
+    );
+    expect(getByRole('alert')).toBeInTheDocument();
+    expect(getByRole('alert')).toHaveTextContent('Error message');
+  });
+
+  it('should default to role="status" when no variant is specified', () => {
+    const { getByRole } = render(<ToastBar>Default message</ToastBar>);
+    expect(getByRole('status')).toBeInTheDocument();
+    expect(getByRole('status')).toHaveTextContent('Default message');
+  });
+});

packages/fuselage/src/components/ToastBar/ToastBar.tsx

@@ -70,6 +70,8 @@ function ToastBar({
   const uniqueId = useId();
   const toastId = id || uniqueId;
 
+  const role = variant === 'error' ? 'alert' : 'status';
+
   return (
     <Box
       className={[
@@ -86,7 +88,7 @@ function ToastBar({
           size='x20'
           name={iconName}
         />
-        <div role='alert' className='rcx-toastbar_content'>
+        <div role={role} className='rcx-toastbar_content'>
           {children}
         </div>
         {onClose && (

packages/fuselage/src/components/ToastBar/__snapshots__/ToastBar.spec.tsx.snap

@@ -17,7 +17,7 @@ exports[`[ToastBar Rendering] renders Default without crashing 1`] = `
         </i>
         <div
           class="rcx-toastbar_content"
-          role="alert"
+          role="status"
         >
           Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
   tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
@@ -81,7 +81,7 @@ exports[`[ToastBar Rendering] renders Success without crashing 1`] = `
         </i>
         <div
           class="rcx-toastbar_content"
-          role="alert"
+          role="status"
         >
           Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
   tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
@@ -113,7 +113,7 @@ exports[`[ToastBar Rendering] renders TinyText without crashing 1`] = `
         </i>
         <div
           class="rcx-toastbar_content"
-          role="alert"
+          role="status"
         >
           Lorem ipsum dolor sit amet
         </div>
@@ -143,7 +143,7 @@ exports[`[ToastBar Rendering] renders WithCloseButton without crashing 1`] = `
         </i>
         <div
           class="rcx-toastbar_content"
-          role="alert"
+          role="status"
         >
           Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
   tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,