Link - Provide alternative text for icons used in `icon-end` or `icon-start` - (2036569908)

[dqateam]

Module:

14b Link

Violation:

Provide alternative text for images

WCAG Reference:

• 1.1.1 Non-text Content

Instance ID:

2036569908

Severity:

10

Description:

[Issue] The "opens in a new window" meaningful image without a textual equivalent.

[User Impact] Screen reader users will be unable to determine what these images represent.

[Code Reference]

<calcite-icon class="calcite-link--icon icon-end" aria-hidden="true" icon="launch" scale="s" calcite-hydrated="">
<svg class="svg" fill="currentColor" height="100%" viewBox="0 0 16 16" width="100%" xmlns="http://www.w3.org/2000/svg">
.......
</svg>
</calcite-icon>

Note:

[Suggestion] Provide alternative text for images. Meaningful images must have a concise but descriptive textual equivalent. In this case remove aria-hidden="true" from <Calcite-icon> element. In the case of svg elements, it is recommended to add role="img", <title> with the text equivalent and aria-labelledby set to the id of the title element

[Compliant Code Example]

<calcite-icon class="calcite-link--icon icon-end" aria-hidden="true" icon="launch" scale="s" calcite-hydrated="">
<svg role="img" aria-labelledby="svg-title" class="svg" fill="currentColor" height="100%" viewBox="0 0 16 16" width="100%" xmlns="http://www.w3.org/2000/svg">
<title id="svg-title>opens in a new window</title>
.......
</svg>
</calcite-icon>

Media Type:

Images

Additional Resources:

• Report Source: Product accessibility evaluation conducted on the Calcite Design System in August, 2022.

[geospatialem]

While this issue pertains to adding an icon, we could also tackle adding context when the target="_blank" is used with link and button components.

A Codepen for context that adds assistive technology helpers when target="_blank":

(opens in a new tab)

[FelFly]

+1 for ArcGIS Hub on this

Our work-around for getting the "opens in new tab" text onto an icon is to place the icon inside a link as a separate component. However, as you can see here, it affects inline scale: https://codepen.io/FelFly/pen/gOBzWZd Ideally, it'd be great if the "opens in new tab" text could be on the icon that exists in the calcite-link slot, but an alternative might be an xs icon scale.

[geospatialem]

For next steps, we should consider either a label property for additional context -or- consider the rel with "external" value for additional context to AT.

[geospatialem]

Updating to be a doc update so users know how to implement this (re: https://github.com/Esri/calcite-design-system/issues/5573#issuecomment-1320301162), rather than as an enhancement as native HTML does not support this by default.