Accessibility Issue: Focus Not Transferred to AboutModal Dialog on activation

[bogy0]

What package(s) are you using?

• Carbon for IBM Products (or Carbon for IBM Cloud & Cognitive)
• Legacy/CDAI
• Legacy/Security

Detailed description

We have identified an accessibility issue with the <AboutModal /> component. When the modal is triggered to open, the focus remains on the last element that was focused before the modal opened, instead of being transferred to the modal dialog itself. This behavior can cause confusion for keyboard users and is not compliant with WCAG 2.1 success criteria, particularly 2.4.3 Focus Order and 2.4.7 Focus Visible.

Expected Behavior:

When the AboutModal is activated (opened), the focus should automatically move to the modal dialog. Ideally, the focus should be placed on the first interactive element within the dialog, such as a close button or the first link. If no interactive elements are present, the focus should be placed on the container element of the dialog with a tabindex="-1" attribute to ensure it is programmatically focusable.

Current Behavior:

Upon activating the AboutModal, the focus remains on the element that was focused before opening the modal. This behavior forces screen reader users and those relying on keyboard navigation to tab through potentially irrelevant content to reach the modal, undermining the usability and accessibility of the application.

Browser: All

Package: "@carbon/ibm-products": "2.9.0"

Steps to Reproduce:

1. Navigate to the page with the AboutModal component using a keyboard or screen reader.
2. Activate the AboutModal button to open the dialog.
3. Observe that the focus does not move to the open modal dialog, but remains on the previously focused element.

Potential Solution:

Ensure that when the modal opens, focus management is implemented to shift focus to the dialog. This can be achieved by setting the focus programmatically to the dialog's container or the first interactive element within the modal upon opening. Additionally, consider trapping focus within the modal while it is open to improve navigation for keyboard and screen reader users.

[elycheea]

Are you able to use data-modal-primary-focus?

[sstrubberg]

Closing for now. Happy to re-open if needed!

[LiaTsernant]

@elycheea according to AVT the best practice is to move focus on modal's close button. Since the close button is a part of the component, I don't think there's a way for developers to provide data-modal-primary-focus to that element.
I would be happy if there's a way tho. Please let me know if I am missing something.

@sstrubberg Can this issue be reopened since my IBM team is also having a problem with it?
My team has a workaround to move focus but it would be nice if the component had a prop that takes care of it. Similar to Carbon v11's modal selectorPrimaryFocus and launcherButtonRef

Right now our workaround for moving the focus is this snippet:

// Automatically moving focus to the close button when modal opens so users don't need to tab twice
  useEffect(() => {
    if (isOpen) {
      /**
       * setTimeout with no delay ensures that the code will be executed in the next event cycle
       * It prevents race conditions and ensures the close button will always be found when modal opens
       * Carbon uses it for launcherButtonRef: https://github.com/carbon-design-system/carbon/blob/main/packages/react/src/components/Modal/Modal.tsx
       */
      setTimeout(() => {
        const closeButtonFocusSelector = `.${getCarbonClass('modal-close')}`;
        const initialFocusElement = document.querySelector(`#${componentId} ${closeButtonFocusSelector}`);
        if (initialFocusElement) {
          // Cast as HTMLElement since .focus() property does not exist on type 'Element'
          (initialFocusElement as HTMLElement).focus();
        }
      });
    }
  }, [isOpen]);

Thanks for your help!

[makafsal]

@elycheea The AboutModal modal is a passive ComposedModal. This issue seems to be an issue with the Carbon ComposedModal component because, in a passive ComposedModal, it is not focusing on the Close button.

https://react.carbondesignsystem.com/?path=/story/components-composedmodal--passive-modal

[makafsal]

@elycheea Raised an issue in Carbon
carbon-design-system/carbon#16650

[makafsal]

@elycheea Implemented useFocus() hook in the AboutModal component.