diff --git a/src/components.d.ts b/src/components.d.ts index 869045a29c3693502b8cf890e2ce0b8e030b7d36..9ca955009c3351ed10f7daa961a30514b799282a 100644 --- a/src/components.d.ts +++ b/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; diff --git a/src/components/hy-large-process-flow-phase/hy-large-process-flow-phase.tsx b/src/components/hy-large-process-flow-phase/hy-large-process-flow-phase.tsx index 5ff642cf281156e5bf890df779496a2ebe220d76..2f4773de4cb36f59ec387b30de7e47d6eb2b4a2d 100644 --- a/src/components/hy-large-process-flow-phase/hy-large-process-flow-phase.tsx +++ b/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; }); } diff --git a/src/components/hy-shortcuts/hy-shortcuts.tsx b/src/components/hy-shortcuts/hy-shortcuts.tsx index 92c0028cb5b9165c7d6d11f6dbc9fdcf7cbff6c6..6d0cc0f07d4d3cf582cd9d65d9c8133bbd1ff663 100644 --- a/src/components/hy-shortcuts/hy-shortcuts.tsx +++ b/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} /> diff --git a/src/components/link-box-list/link-box-list.tsx b/src/components/link-box-list/link-box-list.tsx index 0b1c2ec4d193f7842a645a6dddf0f790a3d69182..a322b16780adf981b1b46257674225be772cebca 100644 --- a/src/components/link-box-list/link-box-list.tsx +++ b/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} /> ); })} diff --git a/src/components/link-box/link-box.tsx b/src/components/link-box/link-box.tsx index 81e79d1039ea706a1c0f1f36d25976232ed873af..b5b3e87435be454233fda3f943c043fbca9870b9 100644 --- a/src/components/link-box/link-box.tsx +++ b/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} /> diff --git a/src/components/link-box/readme.md b/src/components/link-box/readme.md index 031c1e8b969bb50bd0bb9a9b10fbff083c4c22f4..cdc8ec84954b3f8c04d2bca52c386a34e349dc43 100644 --- a/src/components/link-box/readme.md +++ b/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` |