[SG-33093] Enable accessibilityAudit on create-insights.test.ts sign-in.test.ts edit-search-insights.test.ts settings.test.ts

client/web/src/auth/__snapshots__/SignInPage.test.tsx.snap

@@ -39,11 +39,11 @@ exports[`SignInPage renders sign in page (cloud) 1`] = `
           </svg>
         </a>
       </div>
-      <div
-        class="title"
+      <h1
+        class="h1 title"
       >
         Sign in to Sourcegraph Cloud
-      </div>
+      </h1>
       <div
         class="mb-4 pb-5 signinPageContainer"
       >
@@ -200,11 +200,11 @@ exports[`SignInPage renders sign in page (server) 1`] = `
           />
         </svg>
       </div>
-      <div
-        class="title"
+      <h1
+        class="h1 title"
       >
         Sign in to Sourcegraph Server
-      </div>
+      </h1>
       <div
         class="mb-4 pb-5 signinPageContainer"
       >

client/web/src/auth/__snapshots__/SignUpPage.test.tsx.snap

@@ -161,11 +161,11 @@ exports[`SignUpPage renders sign up page (server) 1`] = `
           />
         </svg>
       </div>
-      <div
-        class="title"
+      <h1
+        class="h1 title"
       >
         Sign up for Sourcegraph Server
-      </div>
+      </h1>
       <div
         class="pb-5 signupPageContainer"
       >

client/web/src/components/HeroPage.module.scss

@@ -21,8 +21,10 @@
 
 .title {
     font-size: 2rem;
-    margin-top: 1rem;
+    margin: 1rem 0 0;
     line-height: 1.5;
+    font-weight: 400;
+    letter-spacing: normal;
 }
 
 .icon {

client/web/src/components/HeroPage.tsx

@@ -2,7 +2,7 @@ import * as React from 'react'
 
 import classNames from 'classnames'
 
-import { Link } from '@sourcegraph/wildcard'
+import { H1, Link } from '@sourcegraph/wildcard'
 
 import styles from './HeroPage.module.scss'
 
@@ -39,7 +39,7 @@ export const HeroPage: React.FunctionComponent<HeroPageProps> = props => (
                 )}
             </div>
         )}
-        {props.title && <div className={styles.title}>{props.title}</div>}
+        {props.title && <H1 className={styles.title}>{props.title}</H1>}
         {props.subtitle && (
             <div data-testid="hero-page-subtitle" className={styles.subtitle}>
                 {props.subtitle}

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

@@ -10,11 +10,11 @@ exports[`ErrorBoundary passes through if non-error 1`] = `
     >
       <alertcircleicon />
     </div>
-    <div
-      class="title"
+    <h1
+      class="h1 title"
     >
       Error
-    </div>
+    </h1>
     <div
       class="subtitle"
       data-testid="hero-page-subtitle"
@@ -56,11 +56,11 @@ exports[`ErrorBoundary renders reload page if chunk error 1`] = `
     >
       <reloadicon />
     </div>
-    <div
-      class="title"
+    <h1
+      class="h1 title"
     >
       Reload required
-    </div>
+    </h1>
     <div
       class="subtitle"
       data-testid="hero-page-subtitle"

client/web/src/enterprise/insights/pages/insights/creation/intro/IntroCreationPage.tsx

@@ -69,16 +69,19 @@ export const IntroCreationPage: React.FunctionComponent<IntroCreationPageProps>
             />
 
             <div className={styles.sectionContent}>
-                <SearchInsightCard data-testid="create-search-insights" onClick={handleCreateSearchBasedInsightClick} />
+                <SearchInsightCard
+                    data-testid="create-search-insights"
+                    handleCreate={handleCreateSearchBasedInsightClick}
+                />
 
                 <CaptureGroupInsightCard
                     data-testid="create-capture-group-insight"
-                    onClick={handleCaptureGroupInsightClick}
+                    handleCreate={handleCaptureGroupInsightClick}
                 />
 
                 <LangStatsInsightCard
                     data-testid="create-lang-usage-insight"
-                    onClick={handleCreateCodeStatsInsightClick}
+                    handleCreate={handleCreateCodeStatsInsightClick}
                 />
 
                 <div className={styles.info}>
@@ -88,7 +91,7 @@ export const IntroCreationPage: React.FunctionComponent<IntroCreationPageProps>
                     </Link>
                 </div>
 
-                <ExtensionInsightsCard data-testid="explore-extensions" onClick={handleExploreExtensionsClick} />
+                <ExtensionInsightsCard data-testid="explore-extensions" handleCreate={handleExploreExtensionsClick} />
             </div>
         </CodeInsightsPage>
     )

client/web/src/enterprise/insights/pages/insights/creation/intro/cards/InsightCards.module.scss

@@ -6,16 +6,6 @@
     font-size: 0.875rem;
     text-align: start;
 
-    &:hover {
-        box-shadow: var(--dropdown-shadow);
-        border: 1px solid var(--border-color-2);
-    }
-
-    &:focus {
-        box-shadow: var(--focus-box-shadow);
-        outline: none;
-    }
-
     &--extension-card {
         background-color: transparent;
     }

client/web/src/enterprise/insights/pages/insights/creation/intro/cards/InsightCards.tsx

@@ -2,7 +2,7 @@ import React from 'react'
 
 import classNames from 'classnames'
 
-import { Link, Button, CardBody, Card } from '@sourcegraph/wildcard'
+import { Link, Button, CardBody, Card, H3, H2 } from '@sourcegraph/wildcard'
 
 import {
     CaptureGroupInsightChart,
@@ -12,25 +12,22 @@ import {
 
 import styles from './InsightCards.module.scss'
 
-interface InsightCardProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {}
+interface InsightCardProps extends React.HTMLAttributes<HTMLDivElement> {
+    handleCreate?: () => void
+}
 
 /**
  * Low-level styled component for building insight link card for
  * the creation page gallery.
  */
 const InsightCard: React.FunctionComponent<InsightCardProps> = props => {
-    const { children, ...otherProps } = props
+    const { children, onClick, handleCreate, ...otherProps } = props
 
     return (
-        <Card
-            as="button"
-            {...otherProps}
-            type="button"
-            className={classNames(styles.card, 'p-3', otherProps.className)}
-        >
+        <Card {...otherProps} className={classNames(styles.card, 'p-3', otherProps.className)}>
             {children}
 
-            <Button as="div" className="mt-3 w-100" variant="secondary" size="sm">
+            <Button className="mt-3 w-100" variant="secondary" onClick={handleCreate}>
                 Create
             </Button>
         </Card>
@@ -47,8 +44,9 @@ const InsightCardBody: React.FunctionComponent<InsightCardBodyProps> = props =>
 
     return (
         <CardBody className={classNames(styles.cardBody, className, 'flex-1')}>
-            <h3 className={styles.cardTitle}>{title}</h3>
-
+            <H3 as={H2} className={styles.cardTitle}>
+                {title}
+            </H3>
             <p className="d-flex flex-column text-muted m-0">{children}</p>
         </CardBody>
     )
@@ -121,7 +119,8 @@ export const ExtensionInsightsCard: React.FunctionComponent<InsightCardProps> =
 
         <InsightCardBody title="Based on Sourcegraph extensions">
             Enable the extension and go to the README.md to learn how to set up code insights for selected Sourcegraph
-            extensions. <Link to="/extensions?query=category:Insights&experimental=true">Explore the extensions</Link>
+            extensions.
+            <Link to="/extensions?query=category:Insights&experimental=true">Explore the extensions</Link>
         </InsightCardBody>
     </InsightCard>
 )

client/web/src/enterprise/insights/pages/insights/creation/lang-stats/components/lang-stats-insight-creation-form/LangStatsInsightCreationForm.tsx

@@ -77,6 +77,11 @@ export const LangStatsInsightCreationForm: React.FunctionComponent<LangStatsInsi
             onSubmit={handleSubmit}
             onReset={onFormReset}
         >
+            {/* 
+                a11y-ignore
+                Rule: aria-allowed-role ARIA - role should be appropriate for the element
+                Error occurs as a result of using `role=combobox` on `textarea` element.
+             */}
             <Input
                 as={RepositoryField}
                 required={true}
@@ -86,6 +91,7 @@ export const LangStatsInsightCreationForm: React.FunctionComponent<LangStatsInsi
                 placeholder="Example: github.com/sourcegraph/sourcegraph"
                 {...getDefaultInputProps(repository)}
                 className="mb-0"
+                inputClassName="a11y-ignore"
             />
 
             <Input

client/web/src/integration/insights/create-insights.test.ts

@@ -2,6 +2,7 @@ import assert from 'assert'
 
 import delay from 'delay'
 
+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'
 
@@ -49,6 +50,7 @@ describe('Code insight create insight page', () => {
         await driver.page.waitForSelector('[data-testid="explore-extensions"]')
 
         await percySnapshotWithVariants(driver.page, 'Create new insight page — Welcome popup')
+        await accessibilityAudit(driver.page)
     })
 
     it('is styled correctly, without welcome popup', async () => {
@@ -61,6 +63,7 @@ describe('Code insight create insight page', () => {
         await driver.page.waitForSelector('[data-testid="explore-extensions"]')
 
         await percySnapshotWithVariants(driver.page, 'Create new insight page')
+        await accessibilityAudit(driver.page)
     })
 
     it('should run a proper GQL mutation if code-stats insight has been created', async () => {
@@ -111,6 +114,7 @@ describe('Code insight create insight page', () => {
         await driver.page.type('input[name="title"]', 'Test insight title')
 
         await percySnapshotWithVariants(driver.page, 'Code insights create new language usage insight')
+        await accessibilityAudit(driver.page)
 
         const addToUserConfigRequest = await testContext.waitForGraphQLRequest(async () => {
             await driver.page.click('[data-testid="insight-save-button"]')

client/web/src/integration/insights/edit-search-insights.test.ts

@@ -1,5 +1,6 @@
 import assert from 'assert'
 
+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'
 
@@ -301,6 +302,7 @@ describe('Code insight edit insight page', () => {
         )
 
         await percySnapshotWithVariants(driver.page, 'Code insights edit page with search-based insight creation UI')
+        await accessibilityAudit(driver.page)
 
         // Gather all filled inputs within a creation UI form.
         const grabbedInsightInfo = await driver.page.evaluate(getInsightFormValues)

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

@@ -1,5 +1,6 @@
 import assert from 'assert'
 
+import { accessibilityAudit } from '@sourcegraph/shared/src/testing/accessibility'
 import { createDriverForTest, Driver } from '@sourcegraph/shared/src/testing/driver'
 import { settingsID, testUserID } from '@sourcegraph/shared/src/testing/integration/graphQlResults'
 import { afterEachSaveScreenshotIfFailed } from '@sourcegraph/shared/src/testing/screenshotReporter'
@@ -113,6 +114,7 @@ describe('Settings', () => {
             )
 
             await percySnapshotWithVariants(driver.page, 'Settings page')
+            await accessibilityAudit(driver.page)
 
             // Replace with new settings
             const newSettings = '{ /* These are new settings */}'

client/web/src/integration/sign-in.test.ts

@@ -1,3 +1,4 @@
+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'
 
@@ -34,5 +35,6 @@ describe('SignIn', () => {
         await driver.page.waitForSelector('input[name="password"]')
 
         await percySnapshotWithVariants(driver.page, 'Sign in page')
+        await accessibilityAudit(driver.page)
     })
 })