When closing a SidePanel or Tearsheet, focus isn't returned to the element which triggered opening the dialog, and there is no way to choose an element to return focus to in the component API.
Compare this to the Carbon 11 Modal (see https://react.carbondesignsystem.com/?path=/docs/components-modal--overview), which returns focus to the button on close. Note that this is accomplished by the prop launcherButtonRef, which allows a user to specify a ref to return focus to once the dialog is closed.
Package
@carbon/ibm-products
Browser
Chrome, Firefox
Operating System
Windows
Package version
v2.35.0
React version
No response
Automated testing tool and ruleset
IBM Accessibility Requirements
Assistive technology
No response
Description
When closing a
SidePanelorTearsheet, focus isn't returned to the element which triggered opening the dialog, and there is no way to choose an element to return focus to in the component API.WCAG 2.1 Violation
2.4.3 Focus Order: https://www.ibm.com/able/requirements/requirements/#2_4_3
Reproduction/example
https://codesandbox.io/p/devbox/great-architecture-hec6vl?file=%2Fsrc%2FExample%2FExample.jsx
Steps to reproduce
Open the
SidePanelvia the button, and then close it. Notice that focus isn't returned to the button. The same behavior can be seen on the Tearsheet codesandbox (https://codesandbox.io/p/devbox/silly-euler-3q1l14?file=%2Fsrc%2FExample%2FExample.jsx).Compare this to the Carbon 11
Modal(see https://react.carbondesignsystem.com/?path=/docs/components-modal--overview), which returns focus to the button on close. Note that this is accomplished by the proplauncherButtonRef, which allows a user to specify a ref to return focus to once the dialog is closed.Code of Conduct