Revert "Accessibility: Nesting headingLevel 3 mini tocs (github#23663)…

…" (github#23759) This reverts commit 41c7f58.
fpehar · Dec 15, 2021 · 9e21836 · 9e21836
1 parent 45f1a41
commit 9e21836
Show file tree

Hide file tree

Showing 2 changed files with 6 additions and 18 deletions.
diff --git a/components/article/ArticlePage.tsx b/components/article/ArticlePage.tsx
@@ -1,9 +1,8 @@
 import { useRouter } from 'next/router'
-import { useState } from 'react'
 import cx from 'classnames'
 import { ActionList, Heading } from '@primer/components'
 
-import { ChevronDownIcon, ZapIcon, InfoIcon, ShieldLockIcon } from '@primer/octicons-react'
+import { ZapIcon, InfoIcon, ShieldLockIcon } from '@primer/octicons-react'
 import { Callout } from 'components/ui/Callout'
 
 import { Link } from 'components/Link'
@@ -61,9 +60,8 @@ export const ArticlePage = () => {
   } = useArticleContext()
   const { t } = useTranslation('pages')
   const currentPath = router.asPath.split('?')[0]
-  const [isActive, setActive] = useState(-1)
 
-  const renderTocItem = (item: MiniTocItem, index: number) => {
+  const renderTocItem = (item: MiniTocItem) => {
     return (
       <ActionList.Item
         as="li"
@@ -72,19 +70,9 @@ export const ArticlePage = () => {
         sx={{ listStyle: 'none', padding: '2px' }}
       >
         <div className={cx('lh-condensed d-block width-full')}>
-          <div className="d-inline-flex" dangerouslySetInnerHTML={{ __html: item.contents }} />
-          {item.items && item.items.length > 0 && (
-            <button
-              className="color-bg-default border-0 ml-1"
-              onClick={() => setActive(index === isActive ? -1 : index)}
-            >
-              {<ChevronDownIcon />}
-            </button>
-          )}
+          <div dangerouslySetInnerHTML={{ __html: item.contents }} />
           {item.items && item.items.length > 0 ? (
-            <ul className={index === isActive ? 'ml-3' : 'd-none'}>
-              {item.items.map(renderTocItem)}
-            </ul>
+            <ul className="ml-3">{item.items.map(renderTocItem)}</ul>
           ) : null}
         </div>
       </ActionList.Item>
@@ -158,7 +146,7 @@ export const ArticlePage = () => {
                       return {
                         key: title + i,
                         text: title,
-                        renderItem: () => <ul>{renderTocItem(items, i)}</ul>,
+                        renderItem: () => <ul>{renderTocItem(items)}</ul>,
                       }
                     })}
                   />

diff --git a/tests/rendering/server.js b/tests/rendering/server.js
@@ -344,7 +344,7 @@ describe('server', () => {
       )
       expect($('h2#in-this-article').length).toBe(1)
       expect($('h2#in-this-article + div div ul').length).toBeGreaterThan(0) // non-indented items
-      expect($('h2#in-this-article + div div ul li div div div ul li').length).toBeGreaterThan(0) // indented items
+      expect($('h2#in-this-article + div div ul li div div div ul.ml-3').length).toBeGreaterThan(0) // indented items
     })
 
     test('does not render mini TOC in articles with only one heading', async () => {