[SG-35158] Accessibility: Code monitoring logs: wrong usage of heading elements

Created by: gitstart-sourcegraph

Audit type

ARC Toolkit

User journey audit issue

#34194

Problem description

• Navigate to https://sourcegraph.com/code-monitoring?visible=4

• Witness "Code Monitoring" header is an h1 (should be h2)

• Witness "Monitor name", "last run" elements are h5 (skips heading levels)

Expected behavior

• "Code Monitoring" header is an h2

• "MONITOR NAME" & "LAST RUN" elements should be styled as h5, but implemented using div or span with aria-hidden="true" so that they do not appear for screen readers.

Refs

Sourcegraph Issue Gitstart Ticket

Description: Short description about changes on this PR

• Changed "Code Monitoring" header from H1 (default) to an H2

• Implemented "MONITOR NAME" & "LAST RUN" elements using span with aria-hidden="true" so that they do not appear for screen readers

Test plan

• "Code Monitoring" header should be an h2

• "MONITOR NAME" & "LAST RUN" elements shouldn't appear for screen readers

App preview:

• Web
• Storybook

Check out the client app preview documentation to learn more.

Merged by: gitstart-sourcegraph at 2022-06-07 04:10:35 UTC