Wildcard <Icon /> accessibility. `client/web/src/enterprise`
Created by: gitstart-sourcegraph
Audit type
General/Other
Problem 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.
Ref
SourceGraph Issue GitStart ticket https://github.com/sourcegraph/sourcegraph/issues/34582
Additional details
Note: Related work here https://github.com/sourcegraph/sourcegraph/issues/32379.
Ideally we could use the built in
and <description> attributes within our SVG elements. Unfortunately that will require migrating to a different icon library which will require more work and a codemod to do so efficiently.We're focusing on just the accessibility aspect right now, once we have that fixed we can look into migrating to a new library. Implementation Detail
https://github.com/sourcegraph/sourcegraph/issues/34582#issuecomment-1111109339 Note: role="img" to <Icon /> would be added on following client/web/src directories:
Test plan
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.
App preview:
Check out the client app preview documentation to learn more.