Skip to content

Wildcard <Icon /> accessibility. `client/browser`, `client/branded`, `client/jetbrains`, `client/vscode`

Administrator requested to merge contractors/SG-34753 into main

Created by: gitstart-sourcegraph

Description

Our Icon component is not currently accessible and will cause issues across our application.

Screen readers will report each icon as "unlabelled image" - which isn't helpful to anyone.

Expected behavior

For decorative icons, we should set aria-hidden="true". This will ensure screen readers completely ignore the icon, as it adds no value to the user journey.

For icons that add useful information to the page, we should set role="img" and title="Some descriptive text". This will ensure screen readers are able to properly understand to meaning of the icon.

Ref

SG Issue Gitstart Ticket

Implementation Detail

  1. Add role="img" to and fix all of the integration test issues. See this PR: https://github.com/sourcegraph/sourcegraph/pull/34578/files. Feel free to use that branch or copy the code from it - it just needs all the issues reported by accessibilityAudit fixed.

Test Plan

Run integration tests to ensure that there are no unresolved accessibility issues reported

Affected areas

  1. client/browser
  2. client/branded
  3. client/jetbrains
  4. client/vscode

App preview:

Check out the client app preview documentation to learn more.

Merge request reports