Bug (a11y): The external links on the policy page are not announced correctly

[lsr-explore]

The external links on the policy page are not announced correctly

• url: https://accessiblecommunity.org/about/policies/

Each policy bullet entry consists of two links. One link displays a page on the website and the other displays the google docs version. There are several issues

1. The icon associated with each bullet is announced as "External Link". While navigating the page, it is not clear from the announcement where the link goes to. The rotor menu displays several links with the same name
2. When hovering over the icon, there is no indication where the link will navigate to.
3. The component does not support "alt" attribute as it is an svg.

Steps to reproduce

1. Navigate to the policies page - http://localhost:4321/about/policies/ or https://accessiblecommunity.org/about/policies/
2. Hover over the icon for any of the policies
3. Use a screen reader to navigate the page and notice the announcements

This was identified by running astro check on the codebase.

WebAIM Wave Chrome Extension was used to display the links on the page

Expected behavior

Note

Need to confirm expected behavior w/ @rachaelbradley

Fix Proposals

• Remove the link to the Google docs version
• Change the alt to title - the link will announce correctly for screen reader users, but will still not be obvious to non-screen reader users
• Replace the icon and use text
• Display a message to users that the external links point to google docs versions of the policies

Actual behavior

Policy Page - correctly announcing privacy policy link

icon announced with generic "external link"

Webaim Wave display of multiple links with the same name "external link"

Code snippet in src/pages/about/policies.astro

<li>
        <a href="../../privacy-policy">Privacy Policy</a>
        <ExternalLink
          href="https://docs.google.com/document/d/1c0tRlnuFJu2ti1x-sNgj-C0Nr6hn3yu_/"
          gaps={true}
        >
          <Icon
            name="googledocs"
            class="bi"
            height="1.1em"
            alt="Privacy Policy in Google Docs"
          />
        </ExternalLink>
      </li>

Browser code snippet

<li data-astro-cid-7i5ewzoi=""> 
   <a href="../../privacy-policy" data-astro-cid-7i5ewzoi="">Privacy Policy</a> 
   <a href="https://docs.google.com/document/d/1c0tRlnuFJu2ti1x-sNgj-C0Nr6hn3yu_/" class="icon-link" target="_blank" rel="noopener noreferrer" data-astro-cid-m72e64bd=""> 
      <svg width="1em" height="1.1em" class="bi" alt="Privacy Policy in Google Docs" data-astro-cid-7i5ewzoi="true" data-icon="googledocs">   
         <symbol id="ai:local:googledocs" viewBox="0 0 24 24">...</symbol>
         <use href="#ai:local:googledocs"></use>  
      </svg> 
      <svg width="1em" height="1em" viewBox="0 0 16 16" role="img" aria-label="External link" data-astro-cid-m72e64bd="true" class="bi external" data-icon="bi:arrow-up-right-square">   
         <use href="#ai:bi:arrow-up-right-square"></use>  
      </svg>
    </a> 
</li>

---