From 6a746267283487d7f84eb3a2e699f908ec0953ac Mon Sep 17 00:00:00 2001
From: gitstart-sourcegraph <gitstart@users.noreply.github.com>
Date: Sun, 3 Apr 2022 15:14:54 +0000
Subject: [PATCH 1/7] test: enable and fix accessibilityAudit test issues in
 batches.test.ts

---
 .../shared/src/commandPalette/CommandList.tsx |  1 +
 .../ActivationDropdown.test.tsx.snap          |  4 ++--
 .../AppRouterContainer/AppRouterContainer.tsx |  5 ++--
 .../batches/list/GettingStarted.tsx           |  8 ++++++-
 .../ExtensionRegistrySidenav.test.tsx.snap    |  4 ++--
 client/web/src/integration/batches.test.ts    |  2 ++
 client/web/src/nav/NavBar/NavDropdown.tsx     |  1 +
 client/web/src/nav/StatusMessagesNavItem.tsx  |  7 +++++-
 .../__snapshots__/GlobalNavbar.test.tsx.snap  | 10 ++++----
 .../__snapshots__/MenuNavItem.test.tsx.snap   |  4 ++--
 .../StatusMessagesNavItem.test.tsx.snap       |  7 ++++++
 .../__snapshots__/UserNavItem.test.tsx.snap   |  4 ++--
 client/wildcard/src/components/Menu/Menu.tsx  | 11 +++++----
 .../src/components/Menu/MenuButton.tsx        | 23 ++++++++++++++-----
 .../src/components/PageHeader/PageHeader.tsx  |  7 +++++-
 .../__snapshots__/PageHeader.test.tsx.snap    |  2 +-
 16 files changed, 72 insertions(+), 28 deletions(-)

diff --git a/client/shared/src/commandPalette/CommandList.tsx b/client/shared/src/commandPalette/CommandList.tsx
index bfbe661bfdfcd..b46427b38af2c 100644
--- a/client/shared/src/commandPalette/CommandList.tsx
+++ b/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" />
 
diff --git a/client/web/src/components/ActivationDropdown/__snapshots__/ActivationDropdown.test.tsx.snap b/client/web/src/components/ActivationDropdown/__snapshots__/ActivationDropdown.test.tsx.snap
index afcbe81a3de1a..767d9acdb821d 100644
--- a/client/web/src/components/ActivationDropdown/__snapshots__/ActivationDropdown.test.tsx.snap
+++ b/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
diff --git a/client/web/src/components/AppRouterContainer/AppRouterContainer.tsx b/client/web/src/components/AppRouterContainer/AppRouterContainer.tsx
index ae7cc9c456eca..f3943f924f964 100644
--- a/client/web/src/components/AppRouterContainer/AppRouterContainer.tsx
+++ b/client/web/src/components/AppRouterContainer/AppRouterContainer.tsx
@@ -14,10 +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.
+            - `role="main"` to fix rule: "landmark-one-main" (Document should have one main landmark)
          */}
-        <div data-layout={true} className={classNames(styles.appRouterContainer, className)} {...rest}>
+        <div role="main" data-layout={true} className={classNames(styles.appRouterContainer, className)} {...rest}>
             {children}
         </div>
     </ElementScroller>
diff --git a/client/web/src/enterprise/batches/list/GettingStarted.tsx b/client/web/src/enterprise/batches/list/GettingStarted.tsx
index d274e21e6f418..e9c02681c3a88 100644
--- a/client/web/src/enterprise/batches/list/GettingStarted.tsx
+++ b/client/web/src/enterprise/batches/list/GettingStarted.tsx
@@ -149,7 +149,13 @@ 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)
+                            There are a lot of `Link` usages in `--color-bg-2=--gray-03` container, to fix this issue
+                            we can use `--gray-02` or find another color for `--link-color`
+                        */}
+                        <Link to="https://about.sourcegraph.com/batch-changes" rel="noopener" className="a11y-ignore">
                             Batch Changes marketing page
                         </Link>
                     </CardBody>
diff --git a/client/web/src/extensions/__snapshots__/ExtensionRegistrySidenav.test.tsx.snap b/client/web/src/extensions/__snapshots__/ExtensionRegistrySidenav.test.tsx.snap
index 2913231be4d61..d3081b41b9c30 100644
--- a/client/web/src/extensions/__snapshots__/ExtensionRegistrySidenav.test.tsx.snap
+++ b/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 
diff --git a/client/web/src/integration/batches.test.ts b/client/web/src/integration/batches.test.ts
index 8ba483dd64371..fde277d675fc0 100644
--- a/client/web/src/integration/batches.test.ts
+++ b/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)
         })
     })
 
diff --git a/client/web/src/nav/NavBar/NavDropdown.tsx b/client/web/src/nav/NavBar/NavDropdown.tsx
index bc0f96761382f..71dc668c60849 100644
--- a/client/web/src/nav/NavBar/NavDropdown.tsx
+++ b/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
diff --git a/client/web/src/nav/StatusMessagesNavItem.tsx b/client/web/src/nav/StatusMessagesNavItem.tsx
index 89e5980bd74dc..00902364cfb9b 100644
--- a/client/web/src/nav/StatusMessagesNavItem.tsx
+++ b/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 tasks status message' : 'Show tasks status message'}
+                >
                     {this.renderIcon()}
                 </PopoverTrigger>
 
diff --git a/client/web/src/nav/__snapshots__/GlobalNavbar.test.tsx.snap b/client/web/src/nav/__snapshots__/GlobalNavbar.test.tsx.snap
index d3dec4bf8aed0..d901113b29200 100644
--- a/client/web/src/nav/__snapshots__/GlobalNavbar.test.tsx.snap
+++ b/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
diff --git a/client/web/src/nav/__snapshots__/MenuNavItem.test.tsx.snap b/client/web/src/nav/__snapshots__/MenuNavItem.test.tsx.snap
index 9295ff1333a0a..64b246dc28d21 100644
--- a/client/web/src/nav/__snapshots__/MenuNavItem.test.tsx.snap
+++ b/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
diff --git a/client/web/src/nav/__snapshots__/StatusMessagesNavItem.test.tsx.snap b/client/web/src/nav/__snapshots__/StatusMessagesNavItem.test.tsx.snap
index 9aad3b77744ff..ade334ee40ef9 100644
--- a/client/web/src/nav/__snapshots__/StatusMessagesNavItem.test.tsx.snap
+++ b/client/web/src/nav/__snapshots__/StatusMessagesNavItem.test.tsx.snap
@@ -3,6 +3,7 @@
 exports[`StatusMessagesNavItem no messages 1`] = `
 <DocumentFragment>
   <button
+    aria-label="Show tasks status message"
     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 tasks status message"
     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 tasks status message"
     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 tasks status message"
     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 tasks status message"
     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 tasks status message"
     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 tasks status message"
     class="btn btnLink nav-link py-0 px-0 percy-hide chromatic-ignore"
     type="button"
   >
diff --git a/client/web/src/nav/__snapshots__/UserNavItem.test.tsx.snap b/client/web/src/nav/__snapshots__/UserNavItem.test.tsx.snap
index 10d4845d1c834..1daa178bd9da8 100644
--- a/client/web/src/nav/__snapshots__/UserNavItem.test.tsx.snap
+++ b/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
diff --git a/client/wildcard/src/components/Menu/Menu.tsx b/client/wildcard/src/components/Menu/Menu.tsx
index 15ee7d3c2e92a..0e581df9fae8c 100644
--- a/client/wildcard/src/components/Menu/Menu.tsx
+++ b/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}
diff --git a/client/wildcard/src/components/Menu/MenuButton.tsx b/client/wildcard/src/components/Menu/MenuButton.tsx
index aa38a334ce937..db3b2de3b1bd8 100644
--- a/client/wildcard/src/components/Menu/MenuButton.tsx
+++ b/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,21 @@ 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])
+
+    // aria-controls="" to fix "aria-valid-attr-value" since current version of
+    // Popover removes contents from DOM, it causes `aria-controls="menu-*"` invalid
+    // since `menu-*` doesn't exit on DOM
+
+    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} />
diff --git a/client/wildcard/src/components/PageHeader/PageHeader.tsx b/client/wildcard/src/components/PageHeader/PageHeader.tsx
index 2d32bfb863774..d30e0860cf8cd 100644
--- a/client/wildcard/src/components/PageHeader/PageHeader.tsx
+++ b/client/wildcard/src/components/PageHeader/PageHeader.tsx
@@ -51,8 +51,13 @@ export const PageHeader: React.FunctionComponent<Props> = ({
         return null
     }
 
+    /// a11y-ignore
+    /// Rule: "landmark-banner-is-top-level" (Banner landmark should not be contained in another landmark)
+    // We should think about stop using `header` here since we couldn't make it be be top-level
+    // with current usages
+
     return (
-        <header className={classNames(styles.container, className)}>
+        <header className={classNames(styles.container, className, 'a11y-ignore')}>
             <div>
                 {annotation && <small className={styles.annotation}>{annotation}</small>}
                 <HeadingX className={styles.heading}>
diff --git a/client/wildcard/src/components/PageHeader/__snapshots__/PageHeader.test.tsx.snap b/client/wildcard/src/components/PageHeader/__snapshots__/PageHeader.test.tsx.snap
index 39420231b990b..fb913c4b10107 100644
--- a/client/wildcard/src/components/PageHeader/__snapshots__/PageHeader.test.tsx.snap
+++ b/client/wildcard/src/components/PageHeader/__snapshots__/PageHeader.test.tsx.snap
@@ -4,7 +4,7 @@ exports[`PageHeader renders correctly 1`] = `
 <body>
   <div>
     <header
-      class="container"
+      class="container a11y-ignore"
     >
       <div>
         <h1

From a509d35d8ff0d2c0e23efa743724824268d08f01 Mon Sep 17 00:00:00 2001
From: gitstart-sourcegraph <gitstart@users.noreply.github.com>
Date: Mon, 4 Apr 2022 15:57:17 +0000
Subject: [PATCH 2/7] chore: apply request changes

---
 .../AppRouterContainer/AppRouterContainer.tsx      |  4 ++--
 .../src/enterprise/batches/list/GettingStarted.tsx |  3 +--
 client/web/src/nav/StatusMessagesNavItem.tsx       |  2 +-
 .../StatusMessagesNavItem.test.tsx.snap            | 14 +++++++-------
 client/wildcard/src/components/Menu/MenuButton.tsx |  6 ++----
 5 files changed, 13 insertions(+), 16 deletions(-)

diff --git a/client/web/src/components/AppRouterContainer/AppRouterContainer.tsx b/client/web/src/components/AppRouterContainer/AppRouterContainer.tsx
index f3943f924f964..67937ab669bfd 100644
--- a/client/web/src/components/AppRouterContainer/AppRouterContainer.tsx
+++ b/client/web/src/components/AppRouterContainer/AppRouterContainer.tsx
@@ -18,8 +18,8 @@ export const AppRouterContainer: React.FunctionComponent<AppRouterContainerProps
             from child levels in order to handle or react on this container scroll or other important events.
             - `role="main"` to fix rule: "landmark-one-main" (Document should have one main landmark)
          */}
-        <div role="main" data-layout={true} className={classNames(styles.appRouterContainer, className)} {...rest}>
+        <main data-layout={true} className={classNames(styles.appRouterContainer, className)} {...rest}>
             {children}
-        </div>
+        </main>
     </ElementScroller>
 )
diff --git a/client/web/src/enterprise/batches/list/GettingStarted.tsx b/client/web/src/enterprise/batches/list/GettingStarted.tsx
index e9c02681c3a88..15f8849f702bf 100644
--- a/client/web/src/enterprise/batches/list/GettingStarted.tsx
+++ b/client/web/src/enterprise/batches/list/GettingStarted.tsx
@@ -152,8 +152,7 @@ export const GettingStarted: React.FunctionComponent<GettingStartedProps> = ({ f
                         {/*
                             a11y-ignore
                             Rule: "color-contrast" (Elements must have sufficient color contrast)
-                            There are a lot of `Link` usages in `--color-bg-2=--gray-03` container, to fix this issue
-                            we can use `--gray-02` or find another color for `--link-color`
+                            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
diff --git a/client/web/src/nav/StatusMessagesNavItem.tsx b/client/web/src/nav/StatusMessagesNavItem.tsx
index 00902364cfb9b..d50e81f79466c 100644
--- a/client/web/src/nav/StatusMessagesNavItem.tsx
+++ b/client/web/src/nav/StatusMessagesNavItem.tsx
@@ -479,7 +479,7 @@ export class StatusMessagesNavItem extends React.PureComponent<Props, State> {
                     className="nav-link py-0 px-0 percy-hide chromatic-ignore"
                     as={Button}
                     variant="link"
-                    aria-label={this.state.isOpen ? 'Hide tasks status message' : 'Show tasks status message'}
+                    aria-label={this.state.isOpen ? 'Hide status messages' : 'Show status messages'}
                 >
                     {this.renderIcon()}
                 </PopoverTrigger>
diff --git a/client/web/src/nav/__snapshots__/StatusMessagesNavItem.test.tsx.snap b/client/web/src/nav/__snapshots__/StatusMessagesNavItem.test.tsx.snap
index ade334ee40ef9..9ff7eb83523e3 100644
--- a/client/web/src/nav/__snapshots__/StatusMessagesNavItem.test.tsx.snap
+++ b/client/web/src/nav/__snapshots__/StatusMessagesNavItem.test.tsx.snap
@@ -3,7 +3,7 @@
 exports[`StatusMessagesNavItem no messages 1`] = `
 <DocumentFragment>
   <button
-    aria-label="Show tasks status message"
+    aria-label="Show status messages"
     class="btn btnLink nav-link py-0 px-0 percy-hide chromatic-ignore"
     type="button"
   >
@@ -44,7 +44,7 @@ exports[`StatusMessagesNavItem no messages 1`] = `
 exports[`StatusMessagesNavItem one CloningProgress message as non-site admin 1`] = `
 <DocumentFragment>
   <button
-    aria-label="Show tasks status message"
+    aria-label="Show status messages"
     class="btn btnLink nav-link py-0 px-0 percy-hide chromatic-ignore"
     type="button"
   >
@@ -85,7 +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 tasks status message"
+    aria-label="Show status messages"
     class="btn btnLink nav-link py-0 px-0 percy-hide chromatic-ignore"
     type="button"
   >
@@ -126,7 +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 tasks status message"
+    aria-label="Show status messages"
     class="btn btnLink nav-link py-0 px-0 percy-hide chromatic-ignore"
     type="button"
   >
@@ -167,7 +167,7 @@ exports[`StatusMessagesNavItem one ExternalServiceSyncError message as non-site
 exports[`StatusMessagesNavItem one ExternalServiceSyncError message as site admin 1`] = `
 <DocumentFragment>
   <button
-    aria-label="Show tasks status message"
+    aria-label="Show status messages"
     class="btn btnLink nav-link py-0 px-0 percy-hide chromatic-ignore"
     type="button"
   >
@@ -208,7 +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 tasks status message"
+    aria-label="Show status messages"
     class="btn btnLink nav-link py-0 px-0 percy-hide chromatic-ignore"
     type="button"
   >
@@ -249,7 +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 tasks status message"
+    aria-label="Show status messages"
     class="btn btnLink nav-link py-0 px-0 percy-hide chromatic-ignore"
     type="button"
   >
diff --git a/client/wildcard/src/components/Menu/MenuButton.tsx b/client/wildcard/src/components/Menu/MenuButton.tsx
index db3b2de3b1bd8..f37d6d18d9116 100644
--- a/client/wildcard/src/components/Menu/MenuButton.tsx
+++ b/client/wildcard/src/components/Menu/MenuButton.tsx
@@ -20,10 +20,8 @@ export const MenuButton = React.forwardRef(({ children, id, ...props }, referenc
     // Document has active elements with the same id attribute: menu-button--menu
     const uniqueMenuId = useMemo(() => id ?? uniqueId('menu-button-'), [id])
 
-    // aria-controls="" to fix "aria-valid-attr-value" since current version of
-    // Popover removes contents from DOM, it causes `aria-controls="menu-*"` invalid
-    // since `menu-*` doesn't exit on DOM
-
+    // 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}

From 4f9cfaf9ec7dca6af2557d79df4847e3d00ee8f0 Mon Sep 17 00:00:00 2001
From: gitstart-sourcegraph <sourcegraph@gitstart.com>
Date: Mon, 4 Apr 2022 23:56:10 +0700
Subject: [PATCH 3/7] chore: update snapshot

---
 .../__snapshots__/NavMenu.test.tsx.snap       | 26 +++++++++----------
 1 file changed, 13 insertions(+), 13 deletions(-)

diff --git a/client/wildcard/src/components/NavMenu/__snapshots__/NavMenu.test.tsx.snap b/client/wildcard/src/components/NavMenu/__snapshots__/NavMenu.test.tsx.snap
index ef16c429454cb..5b8d9f226920f 100644
--- a/client/wildcard/src/components/NavMenu/__snapshots__/NavMenu.test.tsx.snap
+++ b/client/wildcard/src/components/NavMenu/__snapshots__/NavMenu.test.tsx.snap
@@ -4,12 +4,12 @@ exports[`<NavMenu /> Should render Menu Items Correctly 1`] = `
 <body>
   <div>
     <button
-      aria-controls="menu--1"
+      aria-controls=""
       aria-expanded="true"
       aria-haspopup="true"
       class=""
       data-reach-menu-button=""
-      id="menu-button--menu"
+      id="menu-button-2"
       type="button"
     >
       menu trigger
@@ -17,12 +17,12 @@ exports[`<NavMenu /> Should render Menu Items Correctly 1`] = `
   </div>
   <div>
     <div
-      aria-labelledby="menu-button--menu"
+      aria-labelledby="menu-button-2"
       aria-modal="true"
       class="floatingPanel popover py-1"
       data-reach-menu-items=""
       data-reach-menu-popover=""
-      id="menu--1"
+      id="menu-1"
       role="dialog"
       tabindex="-1"
     >
@@ -38,7 +38,7 @@ exports[`<NavMenu /> Should render Menu Items Correctly 1`] = `
           data-reach-menu-link=""
           data-valuetext="Settings"
           href="/users/ralph/settings/organizations"
-          id="option-0--menu--1"
+          id="option-0--menu-1"
           role="menuitem"
           tabindex="-1"
         >
@@ -50,7 +50,7 @@ exports[`<NavMenu /> Should render Menu Items Correctly 1`] = `
           data-reach-menu-link=""
           data-valuetext="Your repositories"
           href="/users/ralph/settings/repositories"
-          id="option-1--menu--1"
+          id="option-1--menu-1"
           role="menuitem"
           tabindex="-1"
         >
@@ -62,7 +62,7 @@ exports[`<NavMenu /> Should render Menu Items Correctly 1`] = `
           data-reach-menu-link=""
           data-valuetext="Saved searches"
           href="/users/ralph/searches"
-          id="option-2--menu--1"
+          id="option-2--menu-1"
           role="menuitem"
           tabindex="-1"
         >
@@ -84,7 +84,7 @@ exports[`<NavMenu /> Should render Menu Items Correctly 1`] = `
           data-reach-menu-link=""
           data-valuetext="Sourcegraph"
           href="/users/ralph/settings/organizations"
-          id="option-3--menu--1"
+          id="option-3--menu-1"
           role="menuitem"
           tabindex="-1"
         >
@@ -96,7 +96,7 @@ exports[`<NavMenu /> Should render Menu Items Correctly 1`] = `
           data-reach-menu-link=""
           data-valuetext="Gitstart"
           href="/users/ralph/settings/repositories"
-          id="option-4--menu--1"
+          id="option-4--menu-1"
           role="menuitem"
           tabindex="-1"
         >
@@ -111,7 +111,7 @@ exports[`<NavMenu /> Should render Menu Items Correctly 1`] = `
           class="dropdown-item item"
           data-reach-menu-item=""
           data-valuetext="Keyboard shortcuts"
-          id="option-5--menu--1"
+          id="option-5--menu-1"
           role="menuitem"
           tabindex="-1"
         >
@@ -123,7 +123,7 @@ exports[`<NavMenu /> Should render Menu Items Correctly 1`] = `
           data-disabled=""
           data-reach-menu-item=""
           data-valuetext="Help"
-          id="option-6--menu--1"
+          id="option-6--menu-1"
           role="menuitem"
           tabindex="-1"
         >
@@ -140,7 +140,7 @@ exports[`<NavMenu /> Should render Menu Items Correctly 1`] = `
           data-reach-menu-link=""
           data-valuetext="About Sourcegraph"
           href="https://about.sourcegraph.com"
-          id="option-7--menu--1"
+          id="option-7--menu-1"
           role="menuitem"
           tabindex="-1"
         >
@@ -152,7 +152,7 @@ exports[`<NavMenu /> Should render Menu Items Correctly 1`] = `
           data-reach-menu-link=""
           data-valuetext="Browser Extension"
           href="https://docs.sourcegraph.com/integration/browser_extension"
-          id="option-8--menu--1"
+          id="option-8--menu-1"
           role="menuitem"
           tabindex="-1"
         >

From 8a5faacda176a73b38a8f8f5e1ac3c5f2ac7ddcf Mon Sep 17 00:00:00 2001
From: gitstart-sourcegraph <sourcegraph@gitstart.com>
Date: Tue, 5 Apr 2022 09:51:11 +0100
Subject: [PATCH 4/7] chore: Updated with requested changes

---
 .../components/AppRouterContainer/AppRouterContainer.tsx | 1 -
 client/wildcard/src/components/PageHeader/PageHeader.tsx | 9 ++-------
 2 files changed, 2 insertions(+), 8 deletions(-)

diff --git a/client/web/src/components/AppRouterContainer/AppRouterContainer.tsx b/client/web/src/components/AppRouterContainer/AppRouterContainer.tsx
index 67937ab669bfd..ce10440f42e32 100644
--- a/client/web/src/components/AppRouterContainer/AppRouterContainer.tsx
+++ b/client/web/src/components/AppRouterContainer/AppRouterContainer.tsx
@@ -16,7 +16,6 @@ export const AppRouterContainer: React.FunctionComponent<AppRouterContainerProps
         {/*
             - 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.
-            - `role="main"` to fix rule: "landmark-one-main" (Document should have one main landmark)
          */}
         <main data-layout={true} className={classNames(styles.appRouterContainer, className)} {...rest}>
             {children}
diff --git a/client/wildcard/src/components/PageHeader/PageHeader.tsx b/client/wildcard/src/components/PageHeader/PageHeader.tsx
index d30e0860cf8cd..30817c49b9031 100644
--- a/client/wildcard/src/components/PageHeader/PageHeader.tsx
+++ b/client/wildcard/src/components/PageHeader/PageHeader.tsx
@@ -51,13 +51,8 @@ export const PageHeader: React.FunctionComponent<Props> = ({
         return null
     }
 
-    /// a11y-ignore
-    /// Rule: "landmark-banner-is-top-level" (Banner landmark should not be contained in another landmark)
-    // We should think about stop using `header` here since we couldn't make it be be top-level
-    // with current usages
-
     return (
-        <header className={classNames(styles.container, className, 'a11y-ignore')}>
+        <div className={classNames(styles.container, className)}>
             <div>
                 {annotation && <small className={styles.annotation}>{annotation}</small>}
                 <HeadingX className={styles.heading}>
@@ -75,6 +70,6 @@ export const PageHeader: React.FunctionComponent<Props> = ({
                 {description && <p className={styles.description}>{description}</p>}
             </div>
             {actions && <div className={styles.actions}>{actions}</div>}
-        </header>
+        </div>
     )
 }

From 6697618a5ac4f53c3505400e5562576ead62aa33 Mon Sep 17 00:00:00 2001
From: gitstart-sourcegraph <sourcegraph@gitstart.com>
Date: Tue, 5 Apr 2022 10:27:48 +0100
Subject: [PATCH 5/7] Trigger rebuild


From 59972826639aef4907e30f8162e8cc6219f8dae5 Mon Sep 17 00:00:00 2001
From: gitstart-sourcegraph <sourcegraph@gitstart.com>
Date: Tue, 5 Apr 2022 15:30:35 +0100
Subject: [PATCH 6/7] chore: Updated snapshot

---
 .../PageHeader/__snapshots__/PageHeader.test.tsx.snap       | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/client/wildcard/src/components/PageHeader/__snapshots__/PageHeader.test.tsx.snap b/client/wildcard/src/components/PageHeader/__snapshots__/PageHeader.test.tsx.snap
index fb913c4b10107..7668cf32a07de 100644
--- a/client/wildcard/src/components/PageHeader/__snapshots__/PageHeader.test.tsx.snap
+++ b/client/wildcard/src/components/PageHeader/__snapshots__/PageHeader.test.tsx.snap
@@ -3,8 +3,8 @@
 exports[`PageHeader renders correctly 1`] = `
 <body>
   <div>
-    <header
-      class="container a11y-ignore"
+    <div
+      class="container"
     >
       <div>
         <h1
@@ -72,7 +72,7 @@ exports[`PageHeader renders correctly 1`] = `
           </span>
         </h1>
       </div>
-    </header>
+    </div>
   </div>
 </body>
 `;

From 3a669db617891f8c948556cd8202eae9d617d00b Mon Sep 17 00:00:00 2001
From: gitstart-sourcegraph <sourcegraph@gitstart.com>
Date: Tue, 5 Apr 2022 16:13:47 +0100
Subject: [PATCH 7/7] chore: Update test file with new layout of PageHeader

---
 client/web/src/integration/repository.test.ts | 14 +++++++-------
 1 file changed, 7 insertions(+), 7 deletions(-)

diff --git a/client/web/src/integration/repository.test.ts b/client/web/src/integration/repository.test.ts
index 94abe44de92f2..b18221e322137 100644
--- a/client/web/src/integration/repository.test.ts
+++ b/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