Follow button enhancements

[aitchiss]

There are some small improvements we could make to Follow buttons in the app (these areas could be addressed in separate, smaller PRs):

1. Give the buttons more descriptive accessible names

• At the moment we have a lot of buttons in the UI with the text "Follow", and it's difficult for screen reader users to tell them apart without the visual context
• All follow buttons should have an accessible name of the format e.g. "Follow user: Admin McAdmin" / "Follow tag: beginners"
• The visible button text should not be affected
• Accessible name could be influenced by hidden text (using screen-reader-only class on a span), or by employing aria-labels. Visually hidden text is usually preferable since it allows for browser translation to other languages.

2. Make the buttons toggle buttons so that state is accurately conveyed to screen reader users

• At the moment, if you are using a screen reader and click a follow button, there is no feedback to confirm the action has succeeded. The button text changes to "Following" but a screen reader user will not hear that announced unless they tab away and come back to the button
• We can make the buttons toggle buttons, and use aria-pressed to convey the following state, e.g. a follow button with aria-pressed="true" communicates that the button is in the "Followed" state
• The "accessible name" of these buttons should always remain as "Follow" (or "Follow back") regardless of the visually displayed text

3. Display 'Unfollow' when you hover over a 'Following' button, to better visually convey the action that will happen on click

• see this loom from @msarit for more detail
• NB: This is similar to how we display bookmarked articles in the home feed - the button reads "Saved" until you hover over it, at which point it shows the action "Unsave"

[github-actions]

Thanks for the issue, we will take it into consideration! Our team of engineers is busy working on many types of features, please give us time to get back to you.

Feature requests that require more discussion may be closed. Read more about our feature request process on forem.dev.

To our amazing contributors: issues labeled type: bug are always up for grabs, but for feature requests, please wait until we add a ready for dev before starting to work on it.

To claim an issue to work on, please leave a comment. If you've claimed the issue and need help, please ping @forem/oss. The OSS Community Manager or the engineers on OSS rotation will follow up.

For full info on how to contribute, please check out our contributors guide.

[keshavbiswa]

I'll take this 🙂 @aitchiss

[rhymes]

@keshavbiswa assigned to you

[Link2Twenty]

What's left to do for this one?

[aitchiss]

Hey @Link2Twenty it's just point 3 that we haven't addressed yet:

3. Display 'Unfollow' when you hover over a 'Following' button, to better visually convey the action that will happen on click

[keshavbiswa]

What's left to do for this one?

I'm actually currently working on completing point 3 😓. Taking a bit longer than expected I guess.

[aitchiss]

Yay! No worries @keshavbiswa - it's not been very long at all! There's absolutely no rush, glad to hear you're happy to continue on this issue 😄

[Link2Twenty]

Sorry @keshavbiswa I wasn't meant to make you feel pressured, I'm just having a look at what's open 😊

[doniarobinson]

@aitchiss Are you still interested in having # 3 completed? I also noticed that the bookmarked articles (Saved/Unsaved) no longer work the way you describe, so that might be another task to complete? I'm looking for some Hacktoberfest items to try out. (Long time developer, just haven't open sourced.) Thanks!

[keshavbiswa]

I apologize, it has been more than 2 years and it's still assigned to me and I forgot 🙏

[keshavbiswa]

@doniarobinson, if you're interested, I'll unassign myself from this and you can work on it.

[doniarobinson]

That would be terrific @keshavbiswa Thanks!