From ca7a46aaaca73d0ae5e6d4c554cc2d2fb6bebdab Mon Sep 17 00:00:00 2001 From: Camille Croci <> Date: Fri, 9 Dec 2022 12:02:04 +0000 Subject: [PATCH 1/3] Refactor follow-button aria-label Use the DAC compliant form where the visual string is reused and not broken --- components/x-follow-button/src/FollowButton.jsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/components/x-follow-button/src/FollowButton.jsx b/components/x-follow-button/src/FollowButton.jsx index 706a1ce13..dbfae5002 100644 --- 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 (
Date: Fri, 9 Dec 2022 12:18:11 +0000 Subject: [PATCH 2/3] Fix tests --- .../__tests__/x-follow-button.test.jsx | 18 ++++++++++-------- 1 file changed, 10 insertions(+), 8 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 index b4b0337e6..464b22a37 100644 --- 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,16 @@ 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() - 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() - 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' + ) }) }) @@ -98,14 +100,14 @@ 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() - expect(subject.find('button').prop('title')).toEqual('Add ConceptName to myFT') + expect(subject.find('button').prop('title')).toEqual('Add to myFT: ConceptName') }) - it('button aria-label is "Add ConceptName to myFT"', () => { + it('button aria-label is "Add to myFT: ConceptName"', () => { const subject = mount() - expect(subject.find('button').prop('aria-label')).toEqual('Add ConceptName to myFT') + expect(subject.find('button').prop('aria-label')).toEqual('Add to myFT: ConceptName') }) }) }) From c1bd62152c2fd29e4f15fa8847e7e93d07706475 Mon Sep 17 00:00:00 2001 From: Camille Croci <> Date: Fri, 9 Dec 2022 16:45:58 +0000 Subject: [PATCH 3/3] Add more generic test for button It should now test that the aria-label of the button contains the visual label of the button. This will avoir recreating this type of issue in the future --- .../x-follow-button/__tests__/x-follow-button.test.jsx | 10 ++++++++++ 1 file changed, 10 insertions(+) diff --git a/components/x-follow-button/__tests__/x-follow-button.test.jsx b/components/x-follow-button/__tests__/x-follow-button.test.jsx index 464b22a37..77ef66f88 100644 --- a/components/x-follow-button/__tests__/x-follow-button.test.jsx +++ b/components/x-follow-button/__tests__/x-follow-button.test.jsx @@ -87,6 +87,11 @@ describe('x-follow-button', () => { 'Added ConceptName to myFT: click to remove' ) }) + + it('button aria-label contains the visual label string', () => { + const subject = mount() + expect(subject.find('button').prop('aria-label')).toContain(subject.find('button').text()) + }) }) describe('when false', () => { @@ -109,6 +114,11 @@ describe('x-follow-button', () => { const subject = mount() expect(subject.find('button').prop('aria-label')).toEqual('Add to myFT: ConceptName') }) + + it('button aria-label contains the visual label string', () => { + const subject = mount() + expect(subject.find('button').prop('aria-label')).toContain(subject.find('button').text()) + }) }) })