fix(Tearsheet): implement focus trapping within tearsheets

[makafsal]

Contributes to #3499

This is to fix the focus trap issue in the Tearsheet component

What did you change?

1. File: packages/ibm-products/src/components/Tearsheet/TearsheetShell.js

Implement a 'keydown' event handler handleKeyDown() function that handles the 'Tab' key operations. The function checks for focusable elements inside the Tearsheet component and properly navigates the users to the focusable elements in the Tearsheet.

Change in the logic of focus claim function claimFocus()

2. File: packages/ibm-products/src/components/CreateTearsheet/preview-components/MultiStepWithIntro.js

Add tabIndex property conditionally to the RadioTile component

How did you test and verify your work?

Storybook tested in Chrome, Safari, Firefox, and Edge

[netlify]

✅ Deploy Preview for carbon-for-ibm-products ready!

Name	Link
🔨 Latest commit	7be0c42
🔍 Latest deploy log	https://app.netlify.com/sites/carbon-for-ibm-products/deploys/65c538b60c83560008ea2f23
😎 Deploy Preview	https://deploy-preview-4129--carbon-for-ibm-products.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site configuration.

[amal-k-joy]

Code looks fine and seems to be working.

[Ratheeshrajan]

@amal-k-joy @makafsal worth checking this utility https://github.com/carbon-design-system/ibm-products/blob/431e041534aa1151e2f3b622e111c97c4591cbfc/packages/ibm-products/src/global/js/utils/wrapFocus.js. This is used in SidePanel https://github.com/carbon-design-system/ibm-products/blob/8589f2ef537d2001f1a04cb98b8dddb915f20ef8/packages/ibm-products/src/components/SidePanel/SidePanel.js

[makafsal]

@Ratheeshrajan @elycheea @lee-chase

I have tried this wrapFocus() utility function. Here are my observations from that:

1. When using the usePortalTarget hook to render the ComposedModal component, the onBlur() event is not firing, so I used the onKeydown() event to experiment with the wrapFocus() function. It is working in a few cases, but it is not solving the issue in stacked narrow tearsheet and tearsheet with error state.
2. In addition, focusing on dummy 'focus sentinal' elements may confuse users using screen readers.

However, I am trying to improve my current solution to make it more efficient, and reusable. We can hold this PR till I refactor and improve the code.

[makafsal]

@elycheea @matthewgallo @Ratheeshrajan @amal-k-joy @lee-chase
Reworked the entire code 🥳 and created a useFocus() hook. So we can reuse the hook with the SidePanel component as well. I've tried it with SidePanel, and it works perfectly! 🤩.

How to use the hook:

    import { useFocus } from '../../global/js/hooks/useFocus';

    export const TearsheetShell = React.forwardRef(
    ...
        // call the hook like this
        const { firstElement, keyDownListener } = useFocus(modalRef);
    ...
        // to focus the first element
        useEffect(() => {
            if (open) {
                setTimeout(() => {
                    firstElement?.focus();
                }, 0);
            }
        }, [open, firstElement]);
    ...
        <ComposedModal
            ...
            // just call the listener in the onKeyDown event
            onKeyDown={keyDownListener}
        >
        ...
        </ComposedModal>