Merge pull request #683 from Financial-Times/cc/dac-label-button

CON-2075, CON-2076: Refactor follow-button aria-label
Financial-Times · Dec 12, 2022 · d9881d6 · d9881d6
2 parents 74fc350 + c1bd621
commit d9881d6
Show file tree

Hide file tree

Showing 2 changed files with 21 additions and 9 deletions.
diff --git a/components/x-follow-button/__tests__/x-follow-button.test.jsx b/components/x-follow-button/__tests__/x-follow-button.test.jsx
@@ -76,14 +76,21 @@ describe('x-follow-button', () => {
 				expect(subject.find('button').prop('aria-pressed')).toEqual('true')
 			})
 
-			it('button title is "Remove ConceptName from myFT"', () => {
+			it('button title is "Added ConceptName to myFT: click to remove"', () => {
 				const subject = mount(<FollowButton isFollowed={true} conceptName={'ConceptName'} />)
-				expect(subject.find('button').prop('title')).toEqual('Remove ConceptName from myFT')
+				expect(subject.find('button').prop('title')).toEqual('Added ConceptName to myFT: click to remove')
 			})
 
-			it('button aria-label is "Remove conceptName from myFT"', () => {
+			it('button aria-label is "Added ConceptName to myFT: click to remove"', () => {
 				const subject = mount(<FollowButton isFollowed={true} conceptName={'ConceptName'} />)
-				expect(subject.find('button').prop('aria-label')).toEqual('Remove ConceptName from myFT')
+				expect(subject.find('button').prop('aria-label')).toEqual(
+					'Added ConceptName to myFT: click to remove'
+				)
+			})
+
+			it('button aria-label contains the visual label string', () => {
+				const subject = mount(<FollowButton isFollowed={true} conceptName={'ConceptName'} />)
+				expect(subject.find('button').prop('aria-label')).toContain(subject.find('button').text())
 			})
 		})
 
@@ -98,14 +105,19 @@ describe('x-follow-button', () => {
 				expect(subject.find('button').prop('aria-pressed')).toEqual('false')
 			})
 
-			it('button title is "Add ConceptName to myFT"', () => {
+			it('button title is "Add to myFT: ConceptName"', () => {
+				const subject = mount(<FollowButton isFollowed={false} conceptName={'ConceptName'} />)
+				expect(subject.find('button').prop('title')).toEqual('Add to myFT: ConceptName')
+			})
+
+			it('button aria-label is "Add to myFT: ConceptName"', () => {
 				const subject = mount(<FollowButton isFollowed={false} conceptName={'ConceptName'} />)
-				expect(subject.find('button').prop('title')).toEqual('Add ConceptName to myFT')
+				expect(subject.find('button').prop('aria-label')).toEqual('Add to myFT: ConceptName')
 			})
 
-			it('button aria-label is "Add ConceptName to myFT"', () => {
+			it('button aria-label contains the visual label string', () => {
 				const subject = mount(<FollowButton isFollowed={false} conceptName={'ConceptName'} />)
-				expect(subject.find('button').prop('aria-label')).toEqual('Add ConceptName to myFT')
+				expect(subject.find('button').prop('aria-label')).toContain(subject.find('button').text())
 			})
 		})
 	})

diff --git a/components/x-follow-button/src/FollowButton.jsx b/components/x-follow-button/src/FollowButton.jsx
@@ -33,7 +33,7 @@ export const FollowButton = (props) => {
 	}
 
 	const getAccessibleText = () =>
-		isFollowed ? `Remove ${conceptName} from myFT` : `Add ${conceptName} to myFT`
+		isFollowed ? `Added ${conceptName} to myFT: click to remove` : `Add to myFT: ${conceptName}`
 
 	return (
 		<form