From b2c579da0b8edfede62e16ef558f1ed6987a5cc2 Mon Sep 17 00:00:00 2001
From: Ekaterina Kondareva <>
Date: Wed, 11 Nov 2020 11:00:23 +0200
Subject: [PATCH] aria-label for links
---
src/components.d.ts | 2 ++
.../hy-large-process-flow-phase.tsx | 10 +++++++++-
src/components/hy-shortcuts/hy-shortcuts.tsx | 3 ++-
src/components/link-box-list/link-box-list.tsx | 2 ++
src/components/link-box/link-box.tsx | 3 ++-
src/components/link-box/readme.md | 1 +
6 files changed, 18 insertions(+), 3 deletions(-)
diff --git a/src/components.d.ts b/src/components.d.ts
index 869045a2..9ca95500 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 5ff642cf..2f4773de 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 92c0028c..6d0cc0f0 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 0b1c2ec4..a322b167 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 81e79d10..b5b3e874 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 031c1e8b..cdc8ec84 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` |
--
GitLab