aria-label for links

src/components.d.ts

@@ -366,6 +366,7 @@ export namespace Components {
     imageAlt: string;
     imageUrl: string;
     isExternal: boolean;
+    scLabel?: string;
     textDescription: string;
     textTitle?: string;
     url?: string;
@@ -1299,6 +1300,7 @@ declare namespace LocalJSX {
     imageAlt?: string;
     imageUrl?: string;
     isExternal?: boolean;
+    scLabel?: string;
     textDescription?: string;
     textTitle?: string;
     url?: string;

src/components/hy-large-process-flow-phase/hy-large-process-flow-phase.tsx

@@ -7,6 +7,8 @@ export interface PhaseValue {
 export interface ProcessBoxLinkValue {
   label: string;
   url: string;
+  isExternal: boolean;
+  ariaLabel: string;
 }
 
 import {Component, ComponentInterface, h, Prop, Watch} from '@stencil/core';
@@ -45,7 +47,13 @@ export class HyLargeProcessFlowPhase implements ComponentInterface {
             items = linkItems.map((item, index) => {
               let classLinks = index == linkItemsCount - 1 ? 'phase-link last' : 'phase-link';
               return item ? (
-                <hy-cta-link class={classLinks} link-content={item.label} sc-label={item.label} url={item.url} />
+                <hy-cta-link
+                  class={classLinks}
+                  link-content={item.label}
+                  sc-label={item.ariaLabel}
+                  is-external={item.isExternal}
+                  url={item.url}
+                />
               ) : null;
             });
           }

src/components/hy-shortcuts/hy-shortcuts.tsx

@@ -2,6 +2,7 @@ export interface ShortcutLinkValue {
   heading: string;
   url: string;
   isExternal: boolean;
+  ariaLabel: string;
 }
 
 import {Component, ComponentInterface, h, Host, Prop, Watch} from '@stencil/core';
@@ -57,7 +58,7 @@ export class HyShortcuts implements ComponentInterface {
 
               return (
                 <div class={classLinkWrapper}>
-                  <a aria-label={x.heading} class="shortcut-link" href={x.url} target={target}>
+                  <a aria-label={x.ariaLabel} class="shortcut-link" href={x.url} target={target}>
                     <span class={textClassAttributes}>{x.heading}</span>
                     <span class={iconClassAttributes}>
                       <hy-icon icon={'hy-icon-arrow-right'} size={28} />

src/components/link-box-list/link-box-list.tsx

@@ -5,6 +5,7 @@ export interface LinkBox {
   imageAlt: string;
   boxUrl: string;
   isExternal: boolean;
+  ariaLabel: string;
 }
 
 import {Component, ComponentInterface, Watch, Prop, h, Host} from '@stencil/core';
@@ -75,6 +76,7 @@ export class LinkBoxList implements ComponentInterface {
                 text-description={x.description}
                 url={x.boxUrl}
                 is-external={x.isExternal}
+                sc-label={x.ariaLabel}
               />
             );
           })}

src/components/link-box/link-box.tsx

@@ -14,6 +14,7 @@ export class LinkBox implements ComponentInterface {
   @Prop() textDescription: string = null;
   @Prop() url?: string;
   @Prop() isExternal: boolean = false;
+  @Prop() scLabel?: string;
   @Prop() headerstyle: string = 'common';
   @Element() el: HTMLElement;
 
@@ -51,7 +52,7 @@ export class LinkBox implements ComponentInterface {
 
     return [
       <article>
-        <a class={classAttributes} href={this.url} target={target}>
+        <a class={classAttributes} href={this.url} target={target} aria-label={this.scLabel}>
           {this.imageUrl && (
             <div class="hy-link-box__image-container" style={aspectRatio}>
               <img aria-hidden="true" src={this.imageUrl} alt={this.imageAlt} />

src/components/link-box/readme.md

@@ -10,6 +10,7 @@
 | `imageAlt`        | `image-alt`        |             | `string`                                                 | `null`                    |
 | `imageUrl`        | `image-url`        |             | `string`                                                 | `null`                    |
 | `isExternal`      | `is-external`      |             | `boolean`                                                | `false`                   |
+| `scLabel`         | `sc-label`         |             | `string`                                                 | `undefined`               |
 | `textDescription` | `text-description` |             | `string`                                                 | `null`                    |
 | `textTitle`       | `text-title`       |             | `string`                                                 | `undefined`               |
 | `url`             | `url`              |             | `string`                                                 | `undefined`               |