fix: tearsheet with nav accessibility (#5971)

Co-authored-by: Afsal K <[email protected]>

packages/ibm-products/src/components/Tearsheet/Tearsheet.stories.jsx

@@ -19,6 +19,8 @@ import {
   FormGroup,
   Tab,
   Tabs,
+  TabPanels,
+  TabPanel,
   TabList,
   TextInput,
   unstable__Slug as Slug,
@@ -154,19 +156,6 @@ const mainContent = (
   </div>
 );
 
-const tabs = (
-  <div className="tearsheet-stories__tabs">
-    <Tabs onChange={action('Tab selection changed')}>
-      <TabList aria-label="Tab list" tabIndex={-1}>
-        <Tab>Tab 1</Tab>
-        <Tab>Tab 2</Tab>
-        <Tab>Tab 3</Tab>
-        <Tab>Tab 4</Tab>
-      </TabList>
-    </Tabs>
-  </div>
-);
-
 const title = 'Title of the tearsheet';
 
 const sampleSlug = (
@@ -231,6 +220,64 @@ const Template = ({ actions, slug, ...args }) => {
   );
 };
 
+const tabs = (
+  <div className="tearsheet-stories__tabs">
+    <TabList aria-label="Tab list">
+      <Tab>Tab 1</Tab>
+      <Tab>Tab 2</Tab>
+      <Tab>Tab 3</Tab>
+      <Tab>Tab 4</Tab>
+    </TabList>
+  </div>
+);
+
+const TemplateWithNav = ({ actions, slug, ...args }) => {
+  const [open, setOpen] = useState(false);
+
+  const wiredActions =
+    actions &&
+    Array.prototype.map.call(actions, (action) => {
+      if (action.label === 'Cancel') {
+        const previousClick = action.onClick;
+        return {
+          ...action,
+          onClick: (evt) => {
+            setOpen(false);
+            previousClick(evt);
+          },
+        };
+      }
+      return action;
+    });
+
+  const ref = useRef();
+
+  return (
+    <>
+      <style>{`.${pkg.prefix}--tearsheet { opacity: 0 }`};</style>
+      <Button onClick={() => setOpen(true)}>Open Tearsheet</Button>
+      <div ref={ref}>
+        <Tabs onChange={action('Tab selection changed')}>
+          <Tearsheet
+            {...args}
+            actions={wiredActions}
+            open={open}
+            onClose={() => setOpen(false)}
+            slug={slug && sampleSlug}
+          >
+            <TabPanels>
+              <TabPanel>Tab 1</TabPanel>
+              <TabPanel>Tab 2</TabPanel>
+              <TabPanel>Tab 3</TabPanel>
+              <TabPanel>Tab 4</TabPanel>
+            </TabPanels>
+          </Tearsheet>
+        </Tabs>
+      </div>
+    </>
+  );
+};
+
 const ReturnFocusTemplate = ({ actions, slug, ...args }) => {
   const [open, setOpen] = useState(false);
   const buttonRef = useRef();
@@ -514,7 +561,7 @@ tearsheet.args = {
   selectorPrimaryFocus: '#tss-ft1',
 };
 
-export const withNavigation = Template.bind({});
+export const withNavigation = TemplateWithNav.bind({});
 withNavigation.storyName = 'Tearsheet with navigation';
 withNavigation.args = {
   closeIconDescription,
@@ -560,7 +607,7 @@ firstElementDisabled.args = {
   selectorPrimaryFocus: '#tss-ft1',
 };
 
-export const fullyLoaded = Template.bind({});
+export const fullyLoaded = TemplateWithNav.bind({});
 fullyLoaded.storyName = 'Tearsheet with all header items and influencer';
 fullyLoaded.args = {
   closeIconDescription,