Link: Properties to pass `aria-label` and `title` to inner anchor element

[georgwittberger-telekom-mms]

Description

The component scale-link should support two optional props to pass an aria-label and a title to the inner anchor element.

Suggestion:

• innerAriaLabel for ARIA label passed to anchor element (consistent with scale-button)
• innerTitle for title passed to anchor element

Example (rendered):

<scale-link
  href="#0"
  inner-aria-label="Kaufmännischen Ansprechpartner ändern, gewählt: Max Mustermann"
  inner-title="Kaufmännischen Ansprechpartner ändern"
>
  Ansprechpartner ändern
  <scale-icon-action-edit slot="icon" aria-hidden="true"></scale-icon-action-edit>
  #shadow-root {
    <a
      part="anchor"
      href="#0"
      aria-disabled="false"
      aria-label="Kaufmännischen Ansprechpartner ändern, gewählt: Max Mustermann"
      title="Kaufmännischen Ansprechpartner ändern"
    >
      <div part="content"><slot>Ansprechpartner ändern</slot></div>
      <slot name="icon">
        <scale-icon-action-edit slot="icon" aria-hidden="true"></scale-icon-action-edit>
      </slot>
    </a>
  }
</scale-link>

Use Case

We have links in our app which should have a brief visual text but a more expressive name for screen readers. The reason is that sighted users can tell from the content above the link what its purpose is. Visually impaired users need for context when focusing the link because there can be multiple links with the same visual text. Therefore, links should have a more expressive aria-label attribute.

Alternatives

Use scale-button instead of scale-link which already provides support for innerAriaLabel. Unfortunately, there is not button variant which looks like a link. I will file a separate feature request for that.

Setting aria-label and title just on the custom element scale-link did not achieve the expected result.

Pass two separate elements to default slot - one for sighted users and another one only for visually impaired users:

<scale-link>
  <span aria-hidden="true">Visual Text</span>
  <span class="sr-only">Screen Reader Text</span>
</scale-link>

This workaround is complicated and requires additional CSS to visually hide the screen reader text.