PCF-378 Fix aria-label attributes Part 1

[esanuandra]

This PR addresses Fix aria-label attributes

• Add aria-label on Link components
• Add/modify aria-label for some button components

[netlify]

✅ Deploy Preview for mozilla-perfcompare ready!

Name	Link
🔨 Latest commit	9cbc324
🔍 Latest deploy log	https://app.netlify.com/sites/mozilla-perfcompare/deploys/65e1da2e5f41ca0008be6a24
😎 Deploy Preview	https://deploy-preview-607--mozilla-perfcompare.netlify.app/
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site configuration.

[codecov]

Codecov Report

All modified and coverable lines are covered by tests ✅

Project coverage is 93.65%. Comparing base (0942f8e) to head (9cbc324).

Additional details and impacted files

@@            Coverage Diff             @@
##             beta     #607      +/-   ##
==========================================
+ Coverage   93.63%   93.65%   +0.01%     
==========================================
  Files          64       64              
  Lines        1415     1418       +3     
  Branches      219      222       +3     
==========================================
+ Hits         1325     1328       +3     
  Misses         88       88              
  Partials        2        2              

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

[julienw]

Thanks for looking at this Andra!

I left a bunch of comments, tell me what you think!

In (not very) short:

• there are places where we don't need aria-label at all (I recommend that you look at the elements using the devtools' awesome accessibility panel that makes it possible to inspect all the accessibility properties in the page)
• there are places where a tooltip might be more appropriate, when the information can be useful for a sighted user. To keep simple for now, we can use the HTML title attribute that will give a tooltip automatically when the user hovers on the element for more than a few seconds. Please double check with the accessibility panel that this is properly exposed to assistive technologies.

Also I believe that we can improve how the title or aria-label are redacted. I think they can be shorter.

For example there are links where the aria-label is "link to bla bla", but because it is a link, the assistive technology will already say to the user that it is a link! Rather just write as if there was text. For example "Remove revision" is good. For a link this coulod be "Go to XXX" instead of "Link to XXX".

I think we can use both aria-label or tooltip sometimes, as they don't have the same purpose always. A tooltip could give some more information where the aria-label would just be the blunt description. But as a first pass, let's keep it simple and use just one or the other, so that we don't risk saying different things.

Also it would be good that all text we add as tooltip or aria-label go to the Strings file.

[julienw]

Thanks, this looks better!

I made a few wording suggestions, tell me what you think! (also I'm not a super good english speaker so feel free to adjust or ask somebody who knows better)

If you apply them you can land the patch without another review.

But if you do want a last review, please add the new changes to a separate commit so that I can look at that one only :-)