fix(SidePanel): resolve focus wrap issue when first element is disabled

e2e/components/SidePanel/SidePanel-test.avt.e2e.js

@@ -71,4 +71,26 @@ test.describe('SidePanel @avt', () => {
     await page.getByLabel('Close').click();
     await expect(page.getByText('Open side panel')).toBeFocused();
   });
+
+  test('@avt-first-element-disabled', async ({ page }) => {
+    await visitStory(page, {
+      component: 'SidePanel',
+      // This used to be a specific story but using a default story to test the focus trap
+      id: 'ibm-products-components-side-panel-sidepanel--first-element-disabled',
+      globals: {
+        carbonTheme: 'white',
+      },
+    });
+
+    // Open side panel
+    await page.getByText('Open side panel').click();
+    // Expect close button to be focused
+    await expect(page.getByLabel('Close')).toBeFocused();
+
+    // Move focus to next element
+    await page.keyboard.press('Tab');
+
+    // Expect the second input to be focus as the first input is disabled
+    await expect(page.locator('#side-panel-story-text-input-b')).toBeFocused();
+  });
 });

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

@@ -453,6 +453,69 @@ const SlideOverTemplate = ({ minimalContent, actions, slug, ...args }) => {
   );
 };
 
+const FirstElementDisabledTemplate = ({
+  minimalContent,
+  actions,
+  slug,
+  ...args
+}) => {
+  const [open, setOpen] = useState(false);
+  const testRef = useRef();
+  const buttonRef = useRef();
+
+  return (
+    <>
+      <Button
+        ref={buttonRef}
+        onClick={() => setOpen(!open)}
+        className={`${prefix}toggle`}
+      >
+        {open ? 'Close side panel' : 'Open side panel'}
+      </Button>
+      <SidePanel
+        {...args}
+        open={open}
+        onRequestClose={() => setOpen(false)}
+        actions={actionSets[actions]}
+        ref={testRef}
+        slug={slug && sampleSlug}
+        launcherButtonRef={buttonRef}
+      >
+        {!minimalContent && (
+          <div className={`${prefix}body-content`}>
+            <h3 className={`${prefix}body-subheading`}>Section</h3>
+            <div className={`${prefix}text-inputs`}>
+              <TextInput
+                labelText="Input A"
+                id="side-panel-story-text-input-a"
+                className={`${prefix}text-input`}
+                disabled
+              />
+              <TextInput
+                labelText="Input B"
+                id="side-panel-story-text-input-b"
+                className={`${prefix}text-input`}
+              />
+            </div>
+            <div className={`${prefix}text-inputs`}>
+              <TextInput
+                labelText="Input C"
+                id="side-panel-story-text-input-c"
+                className={`${prefix}text-input`}
+              />
+              <TextInput
+                labelText="Input D"
+                id="side-panel-story-text-input-d"
+                className={`${prefix}text-input`}
+              />
+            </div>
+          </div>
+        )}
+      </SidePanel>
+    </>
+  );
+};
+
 // eslint-disable-next-line react/prop-types
 const StepTemplate = ({ actions, slug, ...args }) => {
   const [open, setOpen] = useState(false);
@@ -585,6 +648,14 @@ WithStaticTitle.args = {
   includeOverlay: true,
 };
 
+export const FirstElementDisabled = FirstElementDisabledTemplate.bind({});
+FirstElementDisabled.args = {
+  ...defaultStoryProps,
+  actions: 0,
+  animateTitle: false,
+  includeOverlay: true,
+};
+
 export const WithStaticTitleAndActionToolbar = SlideOverTemplate.bind({});
 WithStaticTitleAndActionToolbar.args = {
   ...defaultStoryProps,

packages/ibm-products/src/components/SidePanel/SidePanel.tsx

@@ -39,6 +39,7 @@ import { moderate02 } from '@carbon/motion';
 import pconsole from '../../global/js/utils/pconsole';
 import { pkg } from '../../settings';
 import usePrefersReducedMotion from '../../global/js/hooks/usePrefersReducedMotion';
+import { getSpecificElement } from '../../global/js/hooks/useFocus';
 
 const blockClass = `${pkg.prefix}--side-panel`;
 const componentName = 'SidePanel';
@@ -265,7 +266,7 @@ export let SidePanel = React.forwardRef(
   ) => {
     const [animationComplete, setAnimationComplete] = useState(false);
     const localRef = useRef<HTMLDivElement>(null);
-    const sidePanelRef = ref || localRef;
+    const sidePanelRef = (ref || localRef) as MutableRefObject<HTMLDivElement>;
     const overlayRef = useRef<HTMLDivElement>(null);
     const innerContentRef = useRef<HTMLDivElement>(null);
     const closeRef = useRef<HTMLButtonElement>(null);
@@ -278,8 +279,7 @@ export let SidePanel = React.forwardRef(
     const [scrollAnimationDistance, setScrollAnimationDistance] = useState(-1);
     const [doAnimateTitle, setDoAnimateTitle] = useState(true);
     const { firstElement, keyDownListener } = useFocus(sidePanelRef);
-    const panelRefValue = (sidePanelRef as MutableRefObject<HTMLDivElement>)
-      .current;
+    const panelRefValue = sidePanelRef.current;
     const previousOpen = usePreviousValue(open);
 
     const shouldReduceMotion = usePrefersReducedMotion();
@@ -456,10 +456,7 @@ export let SidePanel = React.forwardRef(
     };
 
     useEffect(() => {
-      if (
-        !doAnimateTitle &&
-        (sidePanelRef as MutableRefObject<HTMLDivElement>).current
-      ) {
+      if (!doAnimateTitle && sidePanelRef.current) {
         panelRefValue?.style.setProperty(
           `--${blockClass}--scroll-animation-progress`,
           '0'
@@ -622,17 +619,33 @@ export let SidePanel = React.forwardRef(
     useEffect(() => {
       if (open) {
         setTimeout(() => {
-          if (selectorPrimaryFocus) {
-            const primeFocusEl = document?.querySelector(selectorPrimaryFocus);
-            if (primeFocusEl) {
+          if (
+            selectorPrimaryFocus &&
+            getSpecificElement(sidePanelRef?.current, selectorPrimaryFocus)
+          ) {
+            const primeFocusEl = getSpecificElement(
+              sidePanelRef?.current,
+              selectorPrimaryFocus
+            );
+            if (
+              primeFocusEl &&
+              window?.getComputedStyle(primeFocusEl)?.display !== 'none'
+            ) {
               (primeFocusEl as HTMLElement)?.focus();
             }
           } else if (!slideIn) {
             firstElement?.focus();
           }
         }, 0);
       }
-    }, [animationComplete, firstElement, open, selectorPrimaryFocus, slideIn]);
+    }, [
+      animationComplete,
+      firstElement,
+      open,
+      selectorPrimaryFocus,
+      sidePanelRef,
+      slideIn,
+    ]);
 
     const primaryActionContainerClassNames = cx([
       `${blockClass}__actions-container`,