Make private links more consistent across experiences

[mgwalker]

Changes proposed in this pull request:

Currently the Handbook marks private links (Google Docs, Slack, etc.) by adding the private-link CSS class, which uses the ::after selector to add a padlock emoji, and setting the title attribute to "This link is private to TTS." However, as noted in #3543, this isn't a very friendly experience for people using screen readers. They are read something like this:

Link, Hiring Manager Guide, closed lock. This link is private to TTS.

This PR implements the guidance developed by the 18F Guides and Methods team in 18F/ux-guide#340:

• ditches the private-link class entirely
• a span node that is only visible to screen readers is inserted before the link with the text "TTS only"
• an SVG node that is hidden from screen readers is inserted after the link with a reference to the USWDS lock_outline icon

When a screen reader lands on a private link, it now reads something more like:

Link, TTS-only, Hiring Manager Guide.

In addition to private links, this PR also adds identification to external links. Any links out of gsa.gov will be marked external. Screen readers will announce that they are external and an icon is shown to sighted users. The screen reader announces something like this:

Link, external, Airtable

This also works with private links:

Link, external, TTS-only, Hiring Manager Guide

Visually, they end up looking like this:

Closes #3543

security considerations

None

[jskinne3]

This looks good and I agree Joe is real