Migrations <Icon /> accessibility: `client/browser`, `client/branded`, `client/jetbrains`, `client/vscode`
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.
Migrate the rest of the codebase to use either title or aria-hidden="true"
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
Implementation Detail
- Add role="img" to and fix all of the integration test issues.
- Migrate the rest of the codebase to use either title or aria-hidden="true"
Test Plan
Run integration tests to ensure that there are no unresolved accessibility issues reported
Affected areas
client/browserclient/brandedclient/jetbrains
App preview:
Check out the client app preview documentation to learn more.