Updating Twitter references and icons to Xitter [fixes #13980]

[reemhamz]

One-line summary

References to "Twitter" should be renamed to "X (formerly Twitter)", or just "X" where it makes sense, as well as updating Twitter icons to the new X(itter) icons.

Things to note

• I'm not updating twitter.com links to x.com, because x.com links automatically reroute to twitter.com links... 🤦🏼
• I won't be updating data-link-name attributes since those are internal and it would probably confuse/disrupt things from in our analytics

Note

I updated mentions of data-link-name to data-link-text because of the changes in this PR: #14057

Issue / Bugzilla link

#13980

Testing

• Twitter links in footer http://localhost:8000/en-US/
• Share CTA on http://localhost:8000/en-US/about/manifesto/
• Share link on http://localhost:8000/en-US/firefox/switch/
• Twitter link on http://localhost:8000/en-US/firefox/privacy/book/
• Twitter link on http://localhost:8000/en-US/contact/
• Share icon on http://localhost:8000/en-US/newsletter/opt-out-confirmation/
• Share icon on some leadership modals http://localhost:8000/en-US/about/leadership/#mark-surman
• Twitter link in Careers page footer http://localhost:8000/en-US/careers/
• Twitter link in Stories blog (bottom) http://localhost:8000/en-US/stories/raising-technology-eq/
• Twitter link in Nightly Whatsnew http://localhost:8000/en-US/firefox/99.0a1/whatsnew/
• Twitter icon in Pocket footer (run in-pocket-mode) http://localhost:8000/en/
• Twitter link in Pocket contact info page (run in-pocket-mode) http://localhost:8000/en/contact-info/
• Twitter mentions in http://localhost:8000/en-US/about/leadership/
• Twitter icon in bottom of Welcome pages: http://localhost:8000/en-US/firefox/welcome/11/ (test 11 --> 17a/17b/17c)

[reemhamz]

Most references that need to be updated have been worked on.

Now I'm just waiting on the latest Protocol version to be published (#14084) so I can use the new X icon to replace the old Twitter bird icon

[alexgibson]

I took a look through the pages mostly everywhere seems to be covered (I think). I did notice a few pages that are still showing the old bird icon still.

The other thing I wonder is if we're perhaps overusing the aria-label attribute a bit too much here? From what I understand it's mostly meant as a fallback for when an interactive element does not contain an accessible name, but in all the places here the links already have accessible text (for icons, the text is only visually hidden)? I think we should probably only really be using aria-label as a last resort. Would it be better to use / update the already accessible link text instead?

[codecov]

Codecov Report

All modified and coverable lines are covered by tests ✅

Project coverage is 76.58%. Comparing base (7d67041) to head (b837b43).
Report is 14 commits behind head on main.

Additional details and impacted files

@@            Coverage Diff             @@
##             main   #14041      +/-   ##
==========================================
- Coverage   76.72%   76.58%   -0.15%     
==========================================
  Files         145      145              
  Lines        7868     7802      -66     
==========================================
- Hits         6037     5975      -62     
+ Misses       1831     1827       -4     

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

[alexgibson]

Updates look good! Spotted a couple of small things to tidy up but almost there!

One other small thing - there's a bird icon in the pocket mode footer still.

[alexgibson]

r+ (I'll leave to you to merge when ready) - nice work!