[a11y]: Tearsheet selectorPrimaryFocus broken

[wkeese]

Package

@carbon/ibm-products

Browser

Chrome

Operating System

MacOS

Package version

v2.37.0

React version

v18

Automated testing tool and ruleset

manual tests and jest tests

Assistive technology

no

Description

selectorPrimaryFocus is broken with the latest @carbon/ibm-products. It regressed somewhere between 2.15 and 2.37. (It was working in 2.15 except for #3988.)

ComposedModal.js correctly sets focus to the element specified by selectorPrimaryFocus.

But immediately after that, TearsheetShell's handleStackChange.claimFocus() code moves focus to the first element, i.e. to the Tearsheet’s close button.

TearsheetShell.js also has some other code in useEffect() to do that.

All this code breaks the work done by ComposedModal.js.

WCAG 2.1 Violation

No response

Reproduction/example

https://codesandbox.io/p/live/7215b329-7aa2-4c32-8858-cb36287ce0ef
https://codesandbox.io/p/devbox/tearsheet-example-wrq59h

Steps to reproduce

Just click the "open tearsheet" button and watch where focus goes. It should go to the <a> but it goes to the close button instead.

The key facets of the test case are:

1. hasCloseIcon={true} - This makes the first focusable element the close icon.
2. selectorPrimaryFocus="a" - This tells Tearsheet that it should focus the <a> instead of the close icon.
3. Make Tearsheet content include Focus should go <a href="#">here</a>

Code of Conduct

• I agree to follow this project's Code of Conduct
• I checked the current issues for duplicate problems

[matthewgallo]

Hey @wkeese, thanks for the detailed issue, very helpful for us! The code sandbox included above might have permission issues, I get a 404 when trying to access it. I also am not seeing the issues with selectorPrimaryFocus. The first story for the tearsheet includes selectorPrimaryFocus and the focus moves directly to the input that was passed to that prop.

Can you double check the code sandbox permissions? Maybe that will highlight the difference in behavior, thanks!

[wkeese]

Woops, does https://codesandbox.io/p/devbox/tearsheet-example-wrq59h work for you?

The problem with https://carbon-for-ibm-products.netlify.app/?path=/story/ibm-products-components-tearsheet--tearsheet&globals=viewport:basic is that it doesn't have a close button (in the upper right), so it's not a good test.

Also, here's the code from TearsheetShell.tsx:

    // Callback to give the tearsheet the opportunity to claim focus
    handleStackChange.claimFocus = function () {
      firstElement?.focus();
    };

It should be clear how that's focusing the first element rather than selectorPrimaryFocus (assuming they are different). So at best, you have a race condition.

[matthewgallo]

Ahh yes, it works now. Right, forgot that story excludes the close icon. Thanks for the extra clarification @wkeese