Skip to content

fix(a11y): Add aria-label to `DiffStat`, use Tooltip

Administrator requested to merge mihir/35535-diff-overview-screen-reader into main

Created by: plibither8

This PR:

  1. Adds an aria-label to the diff stats' <div> containing the diff line summary
  2. Refactors data-tooltip to Tooltip in the same component

I chose to have the entire summary be read out instead of the just "29 lines changed" to supply information at par with what a non-visually-impaired person would understand by seeing the diff squares too.

Closes #35535 (closed)

Test plan

  • Tested using a screen reader, focussing on the diff header now properly reads out the entire summary ("16 additions, 3 changes, 7 deletions") before reading the file name.
  • The Jest snapshots have been updated to reflect the changes.

App preview:

Check out the client app preview documentation to learn more.

Merge request reports