diff --git a/.github/renovate.json b/.github/renovate.json
index 4d14d0e333e..d3b598a90cb 100644
--- a/.github/renovate.json
+++ b/.github/renovate.json
@@ -1,7 +1,7 @@
 {
   "extends": ["config:base"],
   "rebaseStalePrs": true,
-  "ignorePaths": ["**/node_modules/**", "packages/dropdowns"],
+  "ignorePaths": ["**/node_modules/**", "packages/dropdowns/**"],
   "schedule": ["on Monday every 9 weeks of the year starting on the 5th week"],
   "labels": ["PR: Internal :seedling:"],
   "postUpdateOptions": ["npmDedupe"],
diff --git a/package-lock.json b/package-lock.json
index 0b68dec429d..20e35a2c830 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -11083,12 +11083,12 @@
       }
     },
     "node_modules/@zendeskgarden/container-accordion": {
-      "version": "3.0.4",
-      "resolved": "https://registry.npmjs.org/@zendeskgarden/container-accordion/-/container-accordion-3.0.4.tgz",
-      "integrity": "sha512-ZTO0rdkThMCv0hbyzpRNgTGlMSzMIPWfB4K/kBRGU728ZepJ1iz5qPCrFRNXYT8aPDJAIvS7hju5ttF0cX0LAQ==",
+      "version": "3.0.8",
+      "resolved": "https://registry.npmjs.org/@zendeskgarden/container-accordion/-/container-accordion-3.0.8.tgz",
+      "integrity": "sha512-gCU+mdiXDKK+uVTIj1kNgJ6UlVXHQGXUSCOhh1uvwSLeVq8CGmjZ+2Y5QFHSbl6bupBTAUnHkn100YRcUV2IYQ==",
       "dependencies": {
         "@babel/runtime": "^7.8.4",
-        "@zendeskgarden/container-utilities": "^1.0.12"
+        "@zendeskgarden/container-utilities": "^2.0.0"
       },
       "peerDependencies": {
         "prop-types": "^15.6.1",
@@ -11096,19 +11096,6 @@
         "react-dom": ">=16.8.0"
       }
     },
-    "node_modules/@zendeskgarden/container-accordion/node_modules/@zendeskgarden/container-utilities": {
-      "version": "1.0.14",
-      "resolved": "https://registry.npmjs.org/@zendeskgarden/container-utilities/-/container-utilities-1.0.14.tgz",
-      "integrity": "sha512-iJO+26d0kaC4gj5kM9cSDFEbjoNTUYk9M3KyiusY3e093ZQkp2AAhIdX1KIsnHzWfueupITTQUbOQPa7PYP8lQ==",
-      "dependencies": {
-        "@babel/runtime": "^7.8.4",
-        "@reach/auto-id": "^0.18.0"
-      },
-      "peerDependencies": {
-        "react": ">=16.8.0",
-        "react-dom": ">=16.8.0"
-      }
-    },
     "node_modules/@zendeskgarden/container-breadcrumb": {
       "version": "1.0.7",
       "resolved": "https://registry.npmjs.org/@zendeskgarden/container-breadcrumb/-/container-breadcrumb-1.0.7.tgz",
@@ -55019,7 +55006,7 @@
       "version": "8.74.0",
       "license": "Apache-2.0",
       "dependencies": {
-        "@zendeskgarden/container-accordion": "^2.0.0",
+        "@zendeskgarden/container-accordion": "^3.0.4",
         "@zendeskgarden/container-utilities": "^2.0.0",
         "dom-helpers": "^5.2.1",
         "polished": "^4.0.0",
@@ -55037,34 +55024,6 @@
         "styled-components": "^4.2.0 || ^5.0.0"
       }
     },
-    "packages/chrome/node_modules/@zendeskgarden/container-accordion": {
-      "version": "2.0.8",
-      "resolved": "https://registry.npmjs.org/@zendeskgarden/container-accordion/-/container-accordion-2.0.8.tgz",
-      "integrity": "sha512-6AK2AgCP2mLP5qzYMZcn6qF/FchzFFm3Npn32NeR2vwc+XmK16GbFejYdrvB0vuUpKzMUOPifwGawGGihlUwVA==",
-      "dependencies": {
-        "@babel/runtime": "^7.8.4",
-        "@zendeskgarden/container-utilities": "^1.0.8",
-        "react-uid": "^2.2.0"
-      },
-      "peerDependencies": {
-        "prop-types": "^15.6.1",
-        "react": ">=16.8.0",
-        "react-dom": ">=16.8.0"
-      }
-    },
-    "packages/chrome/node_modules/@zendeskgarden/container-accordion/node_modules/@zendeskgarden/container-utilities": {
-      "version": "1.0.14",
-      "resolved": "https://registry.npmjs.org/@zendeskgarden/container-utilities/-/container-utilities-1.0.14.tgz",
-      "integrity": "sha512-iJO+26d0kaC4gj5kM9cSDFEbjoNTUYk9M3KyiusY3e093ZQkp2AAhIdX1KIsnHzWfueupITTQUbOQPa7PYP8lQ==",
-      "dependencies": {
-        "@babel/runtime": "^7.8.4",
-        "@reach/auto-id": "^0.18.0"
-      },
-      "peerDependencies": {
-        "react": ">=16.8.0",
-        "react-dom": ">=16.8.0"
-      }
-    },
     "packages/colorpickers": {
       "name": "@zendeskgarden/react-colorpickers",
       "version": "8.74.0",
diff --git a/packages/chrome/package.json b/packages/chrome/package.json
index 98768d4f615..9dee9239c90 100644
--- a/packages/chrome/package.json
+++ b/packages/chrome/package.json
@@ -21,7 +21,7 @@
   "sideEffects": false,
   "types": "dist/typings/index.d.ts",
   "dependencies": {
-    "@zendeskgarden/container-accordion": "^2.0.0",
+    "@zendeskgarden/container-accordion": "^3.0.4",
     "@zendeskgarden/container-utilities": "^2.0.0",
     "dom-helpers": "^5.2.1",
     "polished": "^4.0.0",
diff --git a/packages/chrome/src/elements/subnav/CollapsibleSubNavItem.tsx b/packages/chrome/src/elements/subnav/CollapsibleSubNavItem.tsx
index daffb7a78bc..7b69d8667b5 100644
--- a/packages/chrome/src/elements/subnav/CollapsibleSubNavItem.tsx
+++ b/packages/chrome/src/elements/subnav/CollapsibleSubNavItem.tsx
@@ -5,7 +5,7 @@
  * found at http://www.apache.org/licenses/LICENSE-2.0.
  */
 
-import React, { useEffect, useRef, useState } from 'react';
+import React, { ButtonHTMLAttributes, HTMLAttributes, createRef, useEffect, useState } from 'react';
 import PropTypes from 'prop-types';
 import { useAccordion } from '@zendeskgarden/container-accordion';
 import { getControlledValue } from '@zendeskgarden/container-utilities';
@@ -24,12 +24,14 @@ import { useChromeContext } from '../../utils/useChromeContext';
 export const CollapsibleSubNavItem = React.forwardRef<HTMLDivElement, ICollapsibleSubNavItemProps>(
   ({ header, children, isExpanded: controlledExpanded, onChange, ...other }, ref) => {
     const { isDark, isLight } = useChromeContext();
-    const panelRef = useRef<HTMLDivElement>();
+    const panelRef = createRef<HTMLDivElement>();
     const [internalExpanded, setInternalExpanded] = useState(controlledExpanded);
     const expanded = getControlledValue(controlledExpanded, internalExpanded);
-    const expandedSections = expanded ? [0] : [];
+    const value = 0;
+    const expandedSections = expanded ? [value] : [];
 
     const { getHeaderProps, getTriggerProps, getPanelProps } = useAccordion({
+      sections: [value],
       expandedSections,
       onChange: () => {
         const isExpanded = expandedSections.length === 0;
@@ -46,21 +48,22 @@ export const CollapsibleSubNavItem = React.forwardRef<HTMLDivElement, ICollapsib
       if (expanded && panelRef.current) {
         panelRef.current.style.maxHeight = `${panelRef.current.scrollHeight}px`;
       }
-    }, [expanded, children]);
+    }, [expanded, children, panelRef]);
 
     return (
       <div ref={ref}>
-        <div {...getHeaderProps({ ariaLevel: 2 })}>
+        <div {...getHeaderProps({ 'aria-level': 2 })}>
           <StyledSubNavItemHeader
             isDark={isDark}
             isLight={isLight}
-            {...getTriggerProps({
-              isExpanded: expanded,
-              index: 0,
+            isExpanded={expanded}
+            {...(getTriggerProps({
+              ...other,
               role: null,
-              tabIndex: null,
-              ...other
-            })}
+              tabIndex: null as any,
+              value
+            }) as ButtonHTMLAttributes<HTMLButtonElement>)}
+            type="button"
           >
             <>
               {header}
@@ -71,11 +74,11 @@ export const CollapsibleSubNavItem = React.forwardRef<HTMLDivElement, ICollapsib
           </StyledSubNavItemHeader>
         </div>
         <StyledSubNavPanel
-          {...getPanelProps({
-            index: 0,
-            isHidden: !expanded,
-            ref: panelRef
-          })}
+          isHidden={!expanded}
+          {...(getPanelProps({
+            ref: panelRef,
+            value
+          }) as HTMLAttributes<HTMLDivElement>)}
         >
           {children}
         </StyledSubNavPanel>