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..77ef66f88 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,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() - 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' + ) + }) + + it('button aria-label contains the visual label string', () => { + const subject = mount() + 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() + expect(subject.find('button').prop('title')).toEqual('Add to myFT: ConceptName') + }) + + it('button aria-label is "Add to myFT: ConceptName"', () => { const subject = mount() - 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() - 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 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 (