Enable accessibilityAudit on `client/web/src/integration/extension-re…

…gistry.test.ts` (#33668)

Co-authored-by: gitstart-sourcegraph <[email protected]>

client/web/src/components/Sidebar.tsx

@@ -6,7 +6,7 @@ import MenuDownIcon from 'mdi-react/MenuDownIcon'
 import MenuUpIcon from 'mdi-react/MenuUpIcon'
 import { useRouteMatch } from 'react-router-dom'
 
-import { AnchorLink, ButtonLink, Icon, Collapse, CollapseHeader, CollapsePanel } from '@sourcegraph/wildcard'
+import { AnchorLink, ButtonLink, Icon, Collapse, CollapseHeader, CollapsePanel, H2, H3 } from '@sourcegraph/wildcard'
 
 import styles from './Sidebar.module.scss'
 
@@ -40,7 +40,7 @@ export const SidebarNavItem: React.FunctionComponent<{
  *
  * Header of a `SideBarGroup`
  */
-export const SidebarGroupHeader: React.FunctionComponent<{ label: string }> = ({ label }) => <h3>{label}</h3>
+export const SidebarGroupHeader: React.FunctionComponent<{ label: string }> = ({ label }) => <H3 as={H2}>{label}</H3>
 
 /**
  * Sidebar with collapsible items

client/web/src/extensions/ExtensionRegistrySidenav.tsx

@@ -4,7 +4,7 @@ import classNames from 'classnames'
 import MenuDownIcon from 'mdi-react/MenuDownIcon'
 
 import { EXTENSION_CATEGORIES } from '@sourcegraph/shared/src/schema/extensionSchema'
-import { Button, Link, Menu, MenuButton, MenuDivider, MenuItem, MenuList, Icon } from '@sourcegraph/wildcard'
+import { Button, Link, Menu, MenuButton, MenuDivider, MenuItem, MenuList, Icon, H3, H4 } from '@sourcegraph/wildcard'
 
 import { SidebarGroup, SidebarGroupHeader } from '../components/Sidebar'
 
@@ -115,7 +115,9 @@ const ExtensionSidenavBanner: React.FunctionComponent = () => (
     <div className={classNames(styles.banner, 'mx-2')}>
         <img className={classNames(styles.bannerIcon, 'mb-2')} src={extensionBannerIconURL} alt="" />
         {/* Override h4 font-weight */}
-        <h4 className="mt-2 font-weight-bold">Create custom extensions!</h4>
+        <H4 as={H3} className="mt-2 font-weight-bold">
+            Create custom extensions!
+        </H4>
         <small>
             You can improve your workflow by creating custom extensions. See{' '}
             <Link

client/web/src/integration/extension-registry.test.ts

@@ -1,6 +1,7 @@
 import assert from 'assert'
 
 import { ExtensionsResult } from '@sourcegraph/shared/src/graphql-operations'
+import { accessibilityAudit } from '@sourcegraph/shared/src/testing/accessibility'
 import { createDriverForTest, Driver } from '@sourcegraph/shared/src/testing/driver'
 import { afterEachSaveScreenshotIfFailed } from '@sourcegraph/shared/src/testing/screenshotReporter'
 
@@ -229,6 +230,7 @@ describe('Extension Registry', () => {
         await driver.page.waitForSelector('[data-testid="extension-toggle-sqs/word-count"]')
 
         await percySnapshotWithVariants(driver.page, 'Extension registry page')
+        await accessibilityAudit(driver.page)
     })
 
     describe('filtering by category', () => {