Link with icon does not provide screen reader users with the same information as sighted users

[cstrobbe]

Actual behaviour

In the link with icon in the showcase the icon seems to suggest something, possibly that the link opens in a new window (or tab) or that it refers to a different domain. Whichever it is, the same information is not conveyed to screen reader users because the SVG icon has no text alternative:

<a href="/component-library/example"
  class="ecl-link ecl-link--default ecl-link--icon ecl-link--icon-after"><span class="ecl-link__label">The European
      Union</span>
    <svg class="ecl-icon ecl-icon--fluid ecl-link__icon" focusable="false" aria-hidden="true">
      <use xlink:href="/component-library/dist/media/icons.16df4a0c.svg#external"></use>
    </svg></a>

Expected behaviour

The link or the icon should be coded in a way that conveys the same information about the link purpose to screen reader users. Assuming the icon is intended to tell sighted users it opens a new window, this could be done as follows:

<a href="/component-library/example"
  class="ecl-link ecl-link--default ecl-link--icon ecl-link--icon-after"><span class="ecl-link__label">The European
      Union</span>
    <svg class="ecl-icon ecl-icon--fluid ecl-link__icon" focusable="false" role="img">
      <title>Opens in new window</title>
      <use xlink:href="/component-library/dist/media/icons.16df4a0c.svg#external"></use>
    </svg></a>

The critical changes are the following:

• aria-hidden="true" was replaced with role="img".
• The element <title>Opens in new window</title> was added as a child of <svg>.

[planctus]

Thanks for creating this issue @cstrobbe. Feels that its title is a bit too generic, though, here you are referring to a particular use case of the link with an icon associated, the external link. I agree with you that there is an information, whether relevant or not, that is not conveyed to screen reader users, and we can follow your recommendations here, but: this will update the showcase of the component when the external icon is used (it means that is just a link to a different domain, by the way) but i hardly believe that when implemented by the users, this would be fully reproduced, we rely on user data, indeed, and while the icon component (or better, the twig template) is already capable of doing almost everything that you recommend, this requires additional and specific data to get the expected markup. Nevertheless, it's worth demoing the external link the "right way", here you can see the updated examples, let's just hope that when used in websites, the right data will be provided. https://ecl-preview-2976--europa-component-library.netlify.app/ec/components/navigation/link/code/

[cstrobbe]

In the updated example, the text "Links to an external domain" is correctly announced by the following combinations of browsers and screen readers:

• NVDA with Firefox,
• NVDA with Edge,
• Narrator with Edge,
• Narrator with Google Chrome,
• JAWS with Edge,
• JAWS with Google Chrome.

The purpose of <title> should be documented, so web devs using the component understand its purpose.