Improve Accessibility: Focus Management on Snackbar Close

This commit enhances the accessibility of the snackbar component by implementing advanced focus management when the snackbar is manually closed. Upon closure, the component now attempts to return focus to the last element that was focused before the snackbar opened. If this element no longer exists or is not focusable, the focus is automatically shifted to the first focusable element on the page. This improvement ensures a more seamless and accessible user experience by maintaining logical focus flow, thereby aiding users who rely on keyboard navigation and screen readers.

Author: Kubit

src/components/snackbar/__tests__/snackbar.test.tsx

@@ -1,4 +1,4 @@
-import { fireEvent, screen } from '@testing-library/react';
+import { act, fireEvent, screen } from '@testing-library/react';
 import * as React from 'react';
 
 import { axe } from 'jest-axe';
@@ -11,6 +11,7 @@ import { Snackbar, SnackbarMessageType } from '../index';
 
 const MOCK = {
   variant: 'DEFAULT',
+  ref: jest.fn(),
   onSecondaryActionClick: jest.fn(),
   open: true,
   closeIcon: {
@@ -82,6 +83,75 @@ describe('Snackbar component', () => {
     expect(screen.queryAllByText('button')).toHaveLength(0);
   });
 
+  const MockSnackbarFocusLastElement = () => {
+    const [open, setOpen] = React.useState(false);
+    return (
+      <div>
+        <button data-testid="firstPageElement">First Page Element</button>
+        <button data-testid="openSnackbar" onClick={() => setOpen(true)}>
+          Open Snackbar
+        </button>
+        <Snackbar {...MOCK} closeIcon={{ icon: 'UNICORN' }} open={open} />
+      </div>
+    );
+  };
+  it('after closing manually, if the element foucsed before the snackbar is open exist, this element will be focused', () => {
+    renderProvider(<MockSnackbarFocusLastElement />);
+
+    act(() => {
+      // Focus the button
+      screen.getByTestId('openSnackbar').focus();
+    });
+
+    act(() => {
+      // Open snackbar bar
+      fireEvent.click(screen.getByTestId('openSnackbar'));
+    });
+
+    act(() => {
+      // Close snackbar bar
+      fireEvent.click(screen.getByTestId(`${MOCK.dataTestId}Icon`));
+    });
+    // open snackbar should have the focus back
+    expect(screen.getByTestId('openSnackbar')).toHaveFocus();
+  });
+
+  const MockSnackbarCloseManuallyFocusFirstDescentand = () => {
+    const [open, setOpen] = React.useState(false);
+    return (
+      <div>
+        <button data-testid="firstPageElement">First Page Element</button>
+        {!open && (
+          <button data-testid="openSnackbar" onClick={() => setOpen(true)}>
+            Open Snackbar
+          </button>
+        )}
+        <Snackbar {...MOCK} closeIcon={{ icon: 'UNICORN' }} open={open} />
+      </div>
+    );
+  };
+  it('after closing manually, if the element that opens the snackbar does not exist, first element of the page should have the focus', () => {
+    renderProvider(<MockSnackbarCloseManuallyFocusFirstDescentand />);
+
+    act(() => {
+      // Focus the button
+      screen.getByTestId('openSnackbar').focus();
+    });
+
+    act(() => {
+      // Open snackbar bar
+      fireEvent.click(screen.getByTestId('openSnackbar'));
+    });
+
+    act(() => {
+      // Close snackbar bar
+      fireEvent.click(screen.getByTestId(`${MOCK.dataTestId}Icon`));
+    });
+
+    // first element of the page should have the focus
+    expect(screen.getByTestId('firstPageElement')).toHaveFocus();
+  });
+
   it('Should render icon, link, button and description when passed props', async () => {
     const { container } = renderProvider(
       <Snackbar {...mockWithDescription}>Snackbar Content</Snackbar>
@@ -109,7 +179,7 @@ describe('Snackbar component', () => {
     expect(results).toHaveNoViolations();
   });
 
-  test('Snackbar call the onOpenClose function, when the functions is provider and the snackbar closes automatically due to the closeTimeOut if neither focus or hovering', () => {
+  it('Snackbar call the onOpenClose function, when the functions is provider and the snackbar closes automatically due to the closeTimeOut if neither focus or hovering', () => {
     jest.useFakeTimers();
     const mockOpenClose = jest.fn();
     renderProvider(<Snackbar {...MOCK} closeTimeout={3000} onOpenClose={mockOpenClose} />);
@@ -122,7 +192,7 @@ describe('Snackbar component', () => {
     expect(mockOpenClose).toHaveBeenCalled();
   });
 
-  test('Snackbar will not call the onOpenClose function if the closeTimeOut set, but the user is hovering the snackbar', () => {
+  it('Snackbar will not call the onOpenClose function if the closeTimeOut set, but the user is hovering the snackbar', () => {
     jest.useFakeTimers();
     const mockOpenClose = jest.fn();
     renderProvider(<Snackbar {...MOCK} closeTimeout={3000} onOpenClose={mockOpenClose} />);
@@ -136,7 +206,7 @@ describe('Snackbar component', () => {
     expect(mockOpenClose).toHaveBeenCalled();
   });
 
-  test('Snackbar will not call the onOpenClose function if the closeTimeOut set, but the user is focusing the snackbar', () => {
+  it('Snackbar will not call the onOpenClose function if the closeTimeOut set, but the user is focusing the snackbar', () => {
     jest.useFakeTimers();
     const mockOpenClose = jest.fn();
     renderProvider(<Snackbar {...MOCK} closeTimeout={3000} onOpenClose={mockOpenClose} />);

src/components/snackbar/snackbarUnControlled.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react';
 
-import { focusFirstDescendant } from '@/utils';
+import { focusFirstDescendantV2 } from '@/utils/focusHandlers/focusHandlers';
 
 import { SnackbarControlled } from './snackbarControlled';
 import { ISnackbarUnControlled } from './types';
@@ -21,6 +21,10 @@ const SnackbarUnControlledComponent = <V extends string | unknown>(
   const closeSnackbarTimeOut = React.useRef<ReturnType<typeof setTimeout> | null>(null);
   const hover = React.useRef(false);
   const focus = React.useRef(false);
+  const innerRef = React.useRef<HTMLDivElement>(null);
+  const lastFocusedElement = React.useRef<Element | null>(null);
+
+  React.useImperativeHandle(ref, () => innerRef?.current as HTMLDivElement, []);
 
   /**
    * Only start timeout if closeTimeOut is defined, and if the snackbar is not hovered or focused
@@ -43,6 +47,7 @@ const SnackbarUnControlledComponent = <V extends string | unknown>(
 
   React.useEffect(() => {
     if (open) {
+      lastFocusedElement.current = document.activeElement;
       startCloseSnackbarTimeout();
     } else {
       clearCloseSnackbarTimeout();
@@ -55,8 +60,20 @@ const SnackbarUnControlledComponent = <V extends string | unknown>(
   const handleCloseButton: (_open: boolean) => React.MouseEventHandler<HTMLButtonElement> =
     _open => event => {
       props.onOpenClose?.(_open, event);
-      // Only after the user closes the snackbar manually, the focus will be set to the first focusable element of the page
-      focusFirstDescendant(document.body);
+      // After manually closing the popover, focus the last focused element
+      // If the last focused element is not available, focus the first focusable element
+      if (
+        lastFocusedElement.current instanceof HTMLElement &&
+        document.contains(lastFocusedElement.current) &&
+        document.body !== lastFocusedElement.current
+      ) {
+        lastFocusedElement.current.focus();
+        return;
+      }
+      focusFirstDescendantV2({
+        element: document.body,
+        elementsToOmit: innerRef.current ? [innerRef.current] : [],
+      });
     };
 
   const handleMouseEnter = (event: React.MouseEvent<HTMLDivElement>) => {
@@ -95,7 +112,7 @@ const SnackbarUnControlledComponent = <V extends string | unknown>(
   return (
     <SnackbarControlled
       {...props}
-      ref={ref}
+      ref={innerRef}
       open={open}
       variant={variant}
       onBlur={handleBlur}