[SG-33093] Enable accessibilityAudit on client/web/src/integration/batches.test.ts

client/shared/src/commandPalette/CommandList.tsx

@@ -401,6 +401,7 @@ export const CommandListPopoverButton: React.FunctionComponent<CommandListPopove
             onClick={toggleIsOpen}
             className={classNames(styles.popoverButton, buttonClassName, isOpen && buttonOpenClassName)}
             variant={variant}
+            aria-label="Command list"
         >
             <Icon as={ConsoleIcon} size="md" />
 

client/web/src/components/ActivationDropdown/__snapshots__/ActivationDropdown.test.tsx.snap

@@ -3,11 +3,11 @@
 exports[`ActivationDropdown renders the activation dropdown 1`] = `
 <DocumentFragment>
   <button
-    aria-controls="menu--2"
+    aria-controls=""
     aria-haspopup="true"
     class="bg-transparent align-items-center test-activation-nav-item-toggle activationDropdownButton"
     data-reach-menu-button=""
-    id="menu-button--menu"
+    id="menu-button-2"
     type="button"
   >
     <div

client/web/src/components/AppRouterContainer/AppRouterContainer.tsx

@@ -14,11 +14,11 @@ export const AppRouterContainer: React.FunctionComponent<AppRouterContainerProps
 }) => (
     <ElementScroller scrollKey="app-router-container">
         {/*
-            Data Layout data attribute is used to get access to the main layout scroll element (the div element below).
+            - Data Layout data attribute is used to get access to the main layout scroll element (the div element below).
             from child levels in order to handle or react on this container scroll or other important events.
          */}
-        <div data-layout={true} className={classNames(styles.appRouterContainer, className)} {...rest}>
+        <main data-layout={true} className={classNames(styles.appRouterContainer, className)} {...rest}>
             {children}
-        </div>
+        </main>
     </ElementScroller>
 )

client/web/src/enterprise/batches/list/GettingStarted.tsx

@@ -149,7 +149,12 @@ export const GettingStarted: React.FunctionComponent<GettingStartedProps> = ({ f
                             View the product marketing page for a high-level overview of benefits and customer use
                             cases.
                         </p>
-                        <Link to="https://about.sourcegraph.com/batch-changes" rel="noopener">
+                        {/*
+                            a11y-ignore
+                            Rule: "color-contrast" (Elements must have sufficient color contrast)
+                            GitHub issue: https://github.com/sourcegraph/sourcegraph/issues/33343
+                        */}
+                        <Link to="https://about.sourcegraph.com/batch-changes" rel="noopener" className="a11y-ignore">
                             Batch Changes marketing page
                         </Link>
                     </CardBody>

client/web/src/extensions/__snapshots__/ExtensionRegistrySidenav.test.tsx.snap

@@ -72,11 +72,11 @@ exports[`ExtensionsQueryInputToolbar renders 1`] = `
       class="my-3 divider"
     />
     <button
-      aria-controls="menu--1"
+      aria-controls=""
       aria-haspopup="true"
       class="btn btnOutlineSecondary btnSm"
       data-reach-menu-button=""
-      id="menu-button--menu"
+      id="menu-button-2"
       type="button"
     >
       Show all 

client/web/src/integration/batches.test.ts

@@ -8,6 +8,7 @@ import {
     ExternalServiceKind,
     SharedGraphQlOperations,
 } 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'
 
@@ -472,6 +473,7 @@ describe('Batches', () => {
             await driver.page.click('[data-testid="test-getting-started-btn"]')
             await driver.page.waitForSelector('[data-testid="test-getting-started"]')
             await percySnapshotWithVariants(driver.page, 'Batch changes getting started page')
+            await accessibilityAudit(driver.page)
         })
     })
 

client/web/src/integration/repository.test.ts

@@ -396,7 +396,7 @@ describe('Repository', () => {
 
             await driver.page.goto(driver.sourcegraphBaseUrl + '/' + repositoryName)
 
-            await driver.page.waitForSelector('header.test-tree-page-title')
+            await driver.page.waitForSelector('div.test-tree-page-title')
 
             // Assert that the directory listing displays properly
             await driver.page.waitForSelector('.test-tree-entries')
@@ -433,8 +433,8 @@ describe('Repository', () => {
             await driver.page.waitForSelector('.test-repo-header-repo-link')
             await driver.page.click('.test-repo-header-repo-link')
 
-            await driver.page.waitForSelector('header.test-tree-page-title')
-            await assertSelectorHasText('header.test-tree-page-title', shortRepositoryName)
+            await driver.page.waitForSelector('div.test-tree-page-title')
+            await assertSelectorHasText('div.test-tree-page-title', shortRepositoryName)
             await driver.assertWindowLocation(repositorySourcegraphUrl)
 
             await driver.findElementWithText(clickedCommit, {
@@ -570,8 +570,8 @@ describe('Repository', () => {
 
             await driver.page.goto(driver.sourcegraphBaseUrl + repositorySourcegraphUrl)
 
-            await driver.page.waitForSelector('header.test-tree-page-title')
-            await assertSelectorHasText('header.test-tree-page-title', shortRepositoryName)
+            await driver.page.waitForSelector('div.test-tree-page-title')
+            await assertSelectorHasText('div.test-tree-page-title', shortRepositoryName)
             await assertSelectorHasText('.test-tree-entry-file', 'readme.md')
 
             await driver.page.waitForSelector('#monaco-query-input .view-lines')
@@ -618,8 +618,8 @@ describe('Repository', () => {
 
             await driver.page.goto(driver.sourcegraphBaseUrl + repositorySourcegraphUrl)
 
-            await driver.page.waitForSelector('header.test-tree-page-title')
-            await assertSelectorHasText('header.test-tree-page-title', 'my org/repo with spaces')
+            await driver.page.waitForSelector('div.test-tree-page-title')
+            await assertSelectorHasText('div.test-tree-page-title', 'my org/repo with spaces')
             await assertSelectorHasText('.test-tree-entry-file', 'readme.md')
 
             // page.click() fails for some reason with Error: Node is either not visible or not an HTMLElement

client/web/src/nav/NavBar/NavDropdown.tsx

@@ -136,6 +136,7 @@ export const NavDropdown: React.FunctionComponent<NavDropdownProps> = ({ toggleI
                                             navItemStyles.itemFocusable
                                         )}
                                         ref={menuButtonReference}
+                                        aria-label={isExpanded ? 'Hide search menu' : 'Show search menu'}
                                     >
                                         <span className={navItemStyles.itemFocusableContent}>
                                             <Icon

client/web/src/nav/StatusMessagesNavItem.tsx

@@ -475,7 +475,12 @@ export class StatusMessagesNavItem extends React.PureComponent<Props, State> {
 
         return (
             <Popover isOpen={this.state.isOpen} onOpenChange={event => this.setState({ isOpen: event.isOpen })}>
-                <PopoverTrigger className="nav-link py-0 px-0 percy-hide chromatic-ignore" as={Button} variant="link">
+                <PopoverTrigger
+                    className="nav-link py-0 px-0 percy-hide chromatic-ignore"
+                    as={Button}
+                    variant="link"
+                    aria-label={this.state.isOpen ? 'Hide status messages' : 'Show status messages'}
+                >
                     {this.renderIcon()}
                 </PopoverTrigger>
 

client/web/src/nav/__snapshots__/GlobalNavbar.test.tsx.snap

@@ -91,11 +91,12 @@ exports[`GlobalNavbar default 1`] = `
                 </span>
               </a>
               <button
-                aria-controls="menu--1"
+                aria-controls=""
                 aria-haspopup="true"
+                aria-label="Show search menu"
                 class="btn navDropdownIconButton itemFocusable"
                 data-reach-menu-button=""
-                id="menu-button--menu"
+                id="menu-button-2"
                 type="button"
               >
                 <span
@@ -349,11 +350,12 @@ exports[`GlobalNavbar low-profile 1`] = `
                 </span>
               </a>
               <button
-                aria-controls="menu--3"
+                aria-controls=""
                 aria-haspopup="true"
+                aria-label="Show search menu"
                 class="btn navDropdownIconButton itemFocusable"
                 data-reach-menu-button=""
-                id="menu-button--menu--3"
+                id="menu-button-4"
                 type="button"
               >
                 <span

client/web/src/nav/__snapshots__/MenuNavItem.test.tsx.snap

@@ -3,11 +3,11 @@
 exports[`MenuNavItem add menu children 1`] = `
 <DocumentFragment>
   <button
-    aria-controls="menu--1"
+    aria-controls=""
     aria-haspopup="true"
     class="bg-transparent menuNavItem"
     data-reach-menu-button=""
-    id="menu-button--menu"
+    id="menu-button-2"
     type="button"
   >
     <svg

client/web/src/nav/__snapshots__/StatusMessagesNavItem.test.tsx.snap

@@ -3,6 +3,7 @@
 exports[`StatusMessagesNavItem no messages 1`] = `
 <DocumentFragment>
   <button
+    aria-label="Show status messages"
     class="btn btnLink nav-link py-0 px-0 percy-hide chromatic-ignore"
     type="button"
   >
@@ -43,6 +44,7 @@ exports[`StatusMessagesNavItem no messages 1`] = `
 exports[`StatusMessagesNavItem one CloningProgress message as non-site admin 1`] = `
 <DocumentFragment>
   <button
+    aria-label="Show status messages"
     class="btn btnLink nav-link py-0 px-0 percy-hide chromatic-ignore"
     type="button"
   >
@@ -83,6 +85,7 @@ exports[`StatusMessagesNavItem one CloningProgress message as non-site admin 1`]
 exports[`StatusMessagesNavItem one CloningProgress message as site admin 1`] = `
 <DocumentFragment>
   <button
+    aria-label="Show status messages"
     class="btn btnLink nav-link py-0 px-0 percy-hide chromatic-ignore"
     type="button"
   >
@@ -123,6 +126,7 @@ exports[`StatusMessagesNavItem one CloningProgress message as site admin 1`] = `
 exports[`StatusMessagesNavItem one ExternalServiceSyncError message as non-site admin 1`] = `
 <DocumentFragment>
   <button
+    aria-label="Show status messages"
     class="btn btnLink nav-link py-0 px-0 percy-hide chromatic-ignore"
     type="button"
   >
@@ -163,6 +167,7 @@ exports[`StatusMessagesNavItem one ExternalServiceSyncError message as non-site
 exports[`StatusMessagesNavItem one ExternalServiceSyncError message as site admin 1`] = `
 <DocumentFragment>
   <button
+    aria-label="Show status messages"
     class="btn btnLink nav-link py-0 px-0 percy-hide chromatic-ignore"
     type="button"
   >
@@ -203,6 +208,7 @@ exports[`StatusMessagesNavItem one ExternalServiceSyncError message as site admi
 exports[`StatusMessagesNavItem one SyncError message as non-site admin 1`] = `
 <DocumentFragment>
   <button
+    aria-label="Show status messages"
     class="btn btnLink nav-link py-0 px-0 percy-hide chromatic-ignore"
     type="button"
   >
@@ -243,6 +249,7 @@ exports[`StatusMessagesNavItem one SyncError message as non-site admin 1`] = `
 exports[`StatusMessagesNavItem one SyncError message as site admin 1`] = `
 <DocumentFragment>
   <button
+    aria-label="Show status messages"
     class="btn btnLink nav-link py-0 px-0 percy-hide chromatic-ignore"
     type="button"
   >

client/web/src/nav/__snapshots__/UserNavItem.test.tsx.snap

@@ -3,11 +3,11 @@
 exports[`UserNavItem simple 1`] = `
 <DocumentFragment>
   <button
-    aria-controls="menu--1"
+    aria-controls=""
     aria-haspopup="true"
     class="d-flex align-items-center text-decoration-none test-user-nav-item-toggle menuButton"
     data-reach-menu-button=""
-    id="menu-button--menu"
+    id="menu-button-2"
     type="button"
   >
     <div

client/wildcard/src/components/Menu/Menu.tsx

@@ -1,7 +1,7 @@
-import React, { ComponentType, forwardRef } from 'react'
+import React, { ComponentType, forwardRef, useMemo } from 'react'
 
 import { Menu as ReachMenu, MenuProps as ReachMenuProps } from '@reach/menu-button'
-import { isFunction, noop } from 'lodash'
+import { isFunction, noop, uniqueId } from 'lodash'
 
 import { ForwardReferenceComponent } from '../..'
 import { Popover } from '../Popover'
@@ -20,10 +20,13 @@ export type MenuProps = ReachMenuProps & {
  * @see — Docs https://reach.tech/menu-button#menu
  */
 export const Menu = forwardRef((props, reference) => {
-    const { children, as: Component, ...rest } = props
+    const { children, as: Component, id, ...rest } = props
+    // To fix Rule: "aria-valid-attr-value"
+    // Invalid ARIA attribute value: aria-controls="menu--1"
+    const uniqueAriaControlId = useMemo(() => id ?? uniqueId('menu-'), [id])
 
     return (
-        <ReachMenu as={Component} ref={reference} {...rest}>
+        <ReachMenu as={Component} ref={reference} id={uniqueAriaControlId} {...rest}>
             {({ isExpanded }) => (
                 <Popover isOpen={isExpanded} onOpenChange={noop}>
                     {isFunction(children) ? children({ isExpanded, isOpen: isExpanded }) : children}

client/wildcard/src/components/Menu/MenuButton.tsx

@@ -1,6 +1,7 @@
-import React from 'react'
+import React, { useMemo } from 'react'
 
 import { MenuButton as ReachMenuButton } from '@reach/menu-button'
+import { uniqueId } from 'lodash'
 
 import { ForwardReferenceComponent } from '../../types'
 import { Button, ButtonProps } from '../Button'
@@ -14,11 +15,19 @@ export type MenuButtonProps = Omit<ButtonProps, 'as'>
  *
  * @see — Docs https://reach.tech/menu-button#menubutton
  */
-export const MenuButton = React.forwardRef(({ children, ...props }, reference) => (
-    <ReachMenuButton ref={reference} as={PopoverTriggerButton} {...props}>
-        {children}
-    </ReachMenuButton>
-)) as ForwardReferenceComponent<'button', MenuButtonProps>
+export const MenuButton = React.forwardRef(({ children, id, ...props }, reference) => {
+    // To fix rule: "duplicate-id-active"
+    // Document has active elements with the same id attribute: menu-button--menu
+    const uniqueMenuId = useMemo(() => id ?? uniqueId('menu-button-'), [id])
+
+    // We unset aria-controls as it causes accessibility issues if the Menu is not yet rendered in the DOM.
+    // aria-controls has low support across screen readers so this shouldn't be an issue: https://github.com/w3c/aria/issues/995
+    return (
+        <ReachMenuButton ref={reference} as={PopoverTriggerButton} id={uniqueMenuId} {...props} aria-controls="">
+            {children}
+        </ReachMenuButton>
+    )
+}) as ForwardReferenceComponent<'button', MenuButtonProps>
 
 const PopoverTriggerButton = React.forwardRef((props, reference) => (
     <PopoverTrigger ref={reference} as={Button} {...props} />