[SG-33093.7] Enable accessibilityAudit on `client/web/src/integration…

…/repository.test.ts` file (#33861)

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

client/search-ui/src/input/SearchBox.tsx

@@ -101,7 +101,11 @@ export const SearchBox: React.FunctionComponent<SearchBoxProps> = props => {
                         <div className={styles.searchBoxSeparator} />
                     </>
                 )}
-                <div className={classNames(styles.searchBoxFocusContainer, 'flex-shrink-past-contents')}>
+                {/*
+                    To fix Rule: "region" (All page content should be contained by landmarks)
+                    Added role attribute to the following element to satisfy the rule.
+                */}
+                <div className={classNames(styles.searchBoxFocusContainer, 'flex-shrink-past-contents')} role="search">
                     <LazyMonacoQueryInput
                         {...props}
                         onHandleFuzzyFinder={props.onHandleFuzzyFinder}

client/web/src/extensions/components/ActionItemsBar.tsx

@@ -321,7 +321,7 @@ export const ActionItemsToggle: React.FunctionComponent<ActionItemsToggleProps>
 
     return barInPage ? (
         <>
-            <div className={styles.dividerVertical} />
+            <li className={styles.dividerVertical} />
             <li className={classNames('nav-item mr-2', className)}>
                 <div className={classNames(styles.toggleContainer, isOpen && styles.toggleContainerOpen)}>
                     <ButtonLink
@@ -345,5 +345,5 @@ export const ActionItemsToggle: React.FunctionComponent<ActionItemsToggleProps>
 }
 
 const ActionItemsDivider: React.FunctionComponent<{ className?: string }> = ({ className }) => (
-    <li className={classNames('position-relative rounded-sm d-flex', styles.dividerHorizontal, className)} />
+    <div className={classNames('position-relative rounded-sm d-flex', styles.dividerHorizontal, className)} />
 )

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

@@ -8,6 +8,7 @@ import { ExtensionManifest } from '@sourcegraph/shared/src/extensions/extensionM
 import { SharedGraphQlOperations } from '@sourcegraph/shared/src/graphql-operations'
 import { ExternalServiceKind } from '@sourcegraph/shared/src/schema'
 import { Settings } from '@sourcegraph/shared/src/settings/settings'
+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'
 
@@ -405,6 +406,7 @@ describe('Repository', () => {
             await driver.page.waitForSelector('[data-testid="action-items-toggle-open"]')
 
             await percySnapshotWithVariants(driver.page, 'Repository index page')
+            await accessibilityAudit(driver.page)
 
             const numberOfFileEntries = await driver.page.evaluate(
                 () => document.querySelectorAll<HTMLButtonElement>('.test-tree-entry-file')?.length

client/web/src/repo/RepoRevisionSidebar.tsx

@@ -124,11 +124,7 @@ export const RepoRevisionSidebar: React.FunctionComponent<Props> = props => {
                             <span className="tablist-wrapper--tab-label">Symbols</span>
                         </Tab>
                     </TabList>
-                    <div
-                        aria-hidden={true}
-                        className={classNames('flex w-100 overflow-auto explorer', styles.tabpanels)}
-                        tabIndex={-1}
-                    >
+                    <div className={classNames('flex w-100 overflow-auto explorer', styles.tabpanels)} tabIndex={-1}>
                         <TabPanels>
                             <TabPanel>
                                 <Tree

client/web/src/repo/commits/GitCommitNode.tsx

@@ -112,6 +112,7 @@ export const GitCommitNode: React.FunctionComponent<GitCommitNodeProps> = ({
                     onClick={toggleShowCommitMessageBody}
                     variant="secondary"
                     size="sm"
+                    aria-label={showCommitMessageBody ? 'Hide commit message body' : 'Show commit message body'}
                 >
                     <Icon as={DotsHorizontalIcon} />
                 </Button>

client/web/src/repo/tree/TreePageContent.tsx

@@ -223,6 +223,7 @@ export const TreePageContent: React.FunctionComponent<TreePageContentProps> = ({
                     hideSearch={true}
                     emptyElement={emptyElement}
                     totalCountSummaryComponent={TotalCountSummary}
+                    listComponent="div"
                 />
             </div>
         </>