fix(16781): fixes Tab focus issue on accordion (#17120)

carbon-design-system · Aug 12, 2024 · 9b737e8 · 9b737e8
1 parent 4f4c48e
commit 9b737e8
Show file tree

Hide file tree

Showing 3 changed files with 5 additions and 0 deletions.
diff --git a/packages/react/src/components/Accordion/AccordionItem.tsx b/packages/react/src/components/Accordion/AccordionItem.tsx
@@ -196,6 +196,7 @@ function AccordionItem({
       </Toggle>
       <div
         ref={content}
+        hidden={!isOpen}
         className={`${prefix}--accordion__wrapper`}
         onTransitionEnd={onAnimationEnd}>
         <div id={id} className={`${prefix}--accordion__content`}>

diff --git a/packages/react/src/components/Accordion/__tests__/__snapshots__/Accordion-test.js.snap b/packages/react/src/components/Accordion/__tests__/__snapshots__/Accordion-test.js.snap
@@ -38,6 +38,7 @@ exports[`Accordion should render 1`] = `
       </button>
       <div
         class="cds--accordion__wrapper"
+        hidden=""
       >
         <div
           class="cds--accordion__content"
@@ -80,6 +81,7 @@ exports[`Accordion should render 1`] = `
       </button>
       <div
         class="cds--accordion__wrapper"
+        hidden=""
       >
         <div
           class="cds--accordion__content"
@@ -122,6 +124,7 @@ exports[`Accordion should render 1`] = `
       </button>
       <div
         class="cds--accordion__wrapper"
+        hidden=""
       >
         <div
           class="cds--accordion__content"

diff --git a/packages/react/src/components/Accordion/__tests__/__snapshots__/AccordionItem-test.js.snap b/packages/react/src/components/Accordion/__tests__/__snapshots__/AccordionItem-test.js.snap
@@ -35,6 +35,7 @@ exports[`AccordionItem renders as expected - Component API should render and mat
     </button>
     <div
       class="cds--accordion__wrapper"
+      hidden=""
     >
       <div
         class="cds--accordion__content"