Financial-Times / x-dash

:x::heavy_minus_sign::newspaper: shared front-end components for FT.com and the FT Apps
https://financial-times.github.io/x-dash
38 stars 6 forks source link

CON-2075, CON-2076: Refactor follow-button aria-label #683

Closed camillecroci closed 1 year ago

camillecroci commented 1 year ago

The issue

Jira ticket 1
Jira ticket 2

The label in name criterion requires that the visible label be contained in the accessible name. At the moment they are different: "Added" vs "Remove from myFT".

The solution

Use the strings "Add to myFT: conceptName" and "Added conceptName to myFT: click to remove". Here the visual labels 'Added' and 'Add to myFT' are the first in the aria label.
The information "click to remove" allows to be aware of the action when clicking the button.
The visual string is no longer broken.

Test

Run storybook and inspect the x-follow-button to see the aria-label Screenshot 2022-12-09 at 12 00 43 Screenshot 2022-12-09 at 12 01 16