Skip to content

batches: a11y fixes for code host credentials user journey

Administrator requested to merge kr/configure-credentials-a11y-audit-fixes into main

Created by: courier-new

A collection of quick fixes to a11y issues identified while auditing https://github.com/sourcegraph/sourcegraph/issues/34073:

  • Adding role="img" as the default role for Icons

    • This role should really be the default for any Icon, and I've set up a TODO comment to do just that, because the missing role error appears on virtually every instance of an Icon:

      image

      This is because until very recently, the HTML spec did not specify a default role for <svg />. Using the role "img" conveys that the SVG is purely visual and represents a collection of elements that, put together, create a single image. The only cases where we would not want to use this as the role are cases where an SVG actually includes text or interactive elements, which our Icons really should never.

      However, I cannot currently set it as the default, because we run an automated accessibility auditor as part of our integration test suite, and the audits fail if they discover an element with role="img" and no aria-label, title, or other form of alt text. Which, unfortunately, happens to be the case for the vast majority of Icons in our codebase. So in the meantime, I've added a comment about eventually setting this as the default, but for now we'll need to manually provide role="img" in each instance where we invoke an Icon.

  • Adding aria-label to icons
  • Adding aria-hidden={true} to code host connection icon
  • Adding aria-label to the list of code host connections
  • Adding an aria-label for the group of elements within h3 that collectively convey the code host status to a user
  • Making it clearer that a docs link is not a form submit link
  • Restoring focus to the "Remove" button, after the modal closes and the "Add credentials" button goes away (and likewise to the "Add credentials" button, after the modal closes and the "Remove" button goes away)
  • Converting emphasized line in remove credentials modal from h3 to strong

Test plan

Re-tested with different accessibility audit tools and went through the full flow again for each.

App preview:

Check out the client app preview documentation to learn more.

Merge request reports