[SG-35750] Code monitoring create/edit page ARC checklist issues
Created by: gitstart-sourcegraph
Description
Resolves outlined accessibility defects
Refs
Sourcegraph Issue GitStart Issue
Implementation Details
-
The code monitoring logo should not have an aria-label
on the a tag and have anaria-label
on thesvg
tag reads "Code Monitoring" -
The heading "Manage/create code monitor" should be h2 instead of h1 and "Trigger"/"Actions" headers should be h3 instead of h2. Also, the headings inside open cards (both trigger and actions) should be h4. -
The owner should be labelled properly. Dropdown menu select
tag for owner should have an ID and thelabel
before it should have afor
property to that ID. Also remove the aria-label for that select as it should no longer be needed. -
Remove aria-label
from closed trigger & action cards. Add a visually hidden text instead before the card's title (eg. "Send email notifications") that reads "Edit trigger:" or "Edit action:". -
SVG icons in trigger query checklist should be aria-hidden -
In the trigger card, icon next to "Preview results" should have aria-label="Open in new window"
-
In the Slack notifications card (NOT the webhooks card), rename label "Webhook URL" to "Slack webhook URL" -
Remove title attribute from all toggles and ensure that aria-labelledby
is pointing to a valid element (it is incorrect in some of them).
Test plan
- A good way to test this PR is just to run the branch locally, and open the issue link, compare the changes on the PR and the listed issues. All of them must be fixed
App preview:
Check out the client app preview documentation to learn more.