Merge pull request #676 from Financial-Times/CI-1368-DAC_Missing_Visu…

…al_Label_01 [CI-1368] fix accessibility errors
Financial-Times · Oct 31, 2022 · 1833837 · 1833837
2 parents e35bdf8 + 0ccb549
commit 1833837
Show file tree

Hide file tree

Showing 4 changed files with 13 additions and 7 deletions.
diff --git a/components/x-gift-article/src/Buttons.scss b/components/x-gift-article/src/Buttons.scss
@@ -14,6 +14,8 @@
 	text-align: left;
 	white-space: nowrap;
 	margin-top: 12px;
+	display: flex;
+	align-items: end;
 }
 
 .x-gift-article-button--gap {

diff --git a/components/x-gift-article/src/ReferAFriend.jsx b/components/x-gift-article/src/ReferAFriend.jsx
@@ -12,13 +12,16 @@ export default ({ rafTitle, rafDescription, urls, actions }) => {
 				data-trackable={UrlType.raf + 'Link'}
 			>
 				<span className="o-forms-input o-forms-input--text">
+					<label className="x-gift-article__label-link" htmlFor="refer-friend-link">
+						Gift 2 month free access link
+					</label>
 					<input
+						id="refer-friend-link"
 						type="text"
 						name={UrlType.raf}
 						value={urls.raf}
 						className="x-gift-article__url-input"
 						readOnly
-						aria-label={rafTitle}
 					/>
 				</span>
 				<div className="x-gift-article__buttons">

diff --git a/components/x-gift-article/src/Url.jsx b/components/x-gift-article/src/Url.jsx
@@ -1,17 +1,20 @@
 import { h } from '@financial-times/x-engine'
 import { ShareType } from './lib/constants'
 
-export default ({ shareType, isGiftUrlCreated, url, urlType, ariaLabel }) => {
+export default ({ shareType, isGiftUrlCreated, url, urlType }) => {
 	return (
 		<span className="o-forms-input o-forms-input--text">
+			<label className="x-gift-article__label-link" htmlFor="share-link">
+				Gift article shareable link
+			</label>
 			<input
+				id="share-link"
 				type="text"
 				name={urlType}
 				value={url}
 				className="x-gift-article__url-input"
 				disabled={(shareType === ShareType.gift || shareType === ShareType.enterprise) && !isGiftUrlCreated}
 				readOnly
-				aria-label={ariaLabel}
 			/>
 		</span>
 	)

diff --git a/components/x-gift-article/src/UrlSection.jsx b/components/x-gift-article/src/UrlSection.jsx
@@ -23,8 +23,7 @@ export default ({
 	enterpriseLimit,
 	enterpriseHasCredits,
 	enterpriseRequestAccess,
-	enterpriseFirstTimeUser,
-	title
+	enterpriseFirstTimeUser
 }) => {
 	const hideUrlShareElements =
 		(giftCredits === 0 && shareType === ShareType.gift) ||
@@ -43,8 +42,7 @@ export default ({
 						shareType,
 						isGiftUrlCreated,
 						url,
-						urlType,
-						ariaLabel: title
+						urlType
 					}}
 				/>
 			)}