[TASK] add aria tags to icon text and link element (#334)

Hides the icon and the call to action button from screenreaders. Reason: * Iconfont can not be read by screenreaders * Content of call to action is already given as a (visually hidden) link-tag
t3kit · Nov 2, 2017 · 80fbed0 · 80fbed0
1 parent d4fcfe8
commit 80fbed0
Show file tree

Hide file tree

Showing 2 changed files with 4 additions and 4 deletions.
diff --git a/Resources/Private/Templates/ContentElements/BigIconTextButton.html b/Resources/Private/Templates/ContentElements/BigIconTextButton.html
@@ -7,7 +7,7 @@
 	<div class="big-icon-text-btn__wrp">
 		<div class="big-icon-text-btn{f:if(condition: settings.disableWholeAreaLink, then: '', else: ' _whole-area-link')}">
 			<f:if condition="{settings.iconClass}">
-				<span class="big-icon-text-btn__icon icons icon-{settings.iconClass}"></span>
+				<span class="big-icon-text-btn__icon icons icon-{settings.iconClass}" aria-hidden="true"></span>
 			</f:if>
 			<f:if condition="{data.header}">
 				<h3 class="big-icon-text-btn__header"><core:contentEditable table="tt_content" field="header" uid="{data.uid}">{data.header}</core:contentEditable></h3>
@@ -27,7 +27,7 @@ <h3 class="big-icon-text-btn__header"><core:contentEditable table="tt_content" f
 			</f:if>
 			<f:if condition="{settings.disableWholeAreaLink} == 0">
 				<f:if condition="{data.subheader}">
-					<span class="big-icon-text-btn__sham-link {f:if(condition: settings.btnAsLink, then: '', else: 'btn btn-default')}">{data.subheader}</span>
+					<span class="big-icon-text-btn__sham-link {f:if(condition: settings.btnAsLink, then: '', else: 'btn btn-default')}" aria-hidden="true">{data.subheader}</span>
 				</f:if>
 	 		</f:if>
 		</div>

diff --git a/Resources/Private/Templates/ContentElements/IconTextButton.html b/Resources/Private/Templates/ContentElements/IconTextButton.html
@@ -17,7 +17,7 @@
 		<div class="icon-text-btn{f:if(condition: settings.disableWholeAreaLink, then: '', else: ' _whole-area-link')}">
 			<h3 class="icon-text-btn__header">
 				<f:if condition="{settings.iconClass}">
-					<span class="icon-text-btn__icon icons icon-{settings.iconClass}"></span>
+					<span class="icon-text-btn__icon icons icon-{settings.iconClass}" aria-hidden="true"></span>
 				</f:if>
 				<f:if condition="{data.header}">
 					<core:contentEditable table="tt_content" field="header" uid="{data.uid}">{data.header}</core:contentEditable>
@@ -38,7 +38,7 @@ <h3 class="icon-text-btn__header">
 			</f:if>
 			<f:if condition="{settings.disableWholeAreaLink} == 0">
 				<f:if condition="{data.subheader}">
-					<span class="icon-text-btn__sham-link {f:if(condition: settings.btnAsLink, then: '', else: 'btn btn-default')}">{data.subheader}</span>
+					<span class="icon-text-btn__sham-link {f:if(condition: settings.btnAsLink, then: '', else: 'btn btn-default')}" aria-hidden="true">{data.subheader}</span>
 				</f:if>
 	 		</f:if>
 		</div>