Tweak UI of issue following (bluecheese)
>>> [!note] Migrated issue
<!-- Drupal.org comment -->
<!-- Migrated from issue #1284694. -->
Reported by: [dww](https://www.drupal.org/user/46549)
>>>
<p>Splitting this off as a bluecheese-specific subtask of <span class="drupalorg-gitlab-issue-link project-issue-status-info project-issue-status-7"><a href="https://www.drupal.org/project/project_issue/issues/34496" title="Status: Closed (fixed)">#34496: [meta] Add Flag module to allow users to subscribe/unsubscribe without posting a comment</a></span> ...</p>
<p>I've got all the basic pieces of the follow-issues-via-flag stuff deployed at <a href="http://subscribe-drupal.redesign.devdrupal.org">http://subscribe-drupal.redesign.devdrupal.org</a> (although there's not yet a data migration path for automatically flagging all the nodes you've ever posted or commented on). I'll update the issue summary at #34496 in a few moments...</p>
<p>Right now, the flag/follow UI is <em>way too subtle</em>. We need this feature to be OBVIOUS!</p>
<p>Flag itself just gives you a few knobs. The text for the link when you flag, the text for the link to unflag, a little message to display when you flag/unflag, and the hover title text for the 2 links. Currently, we have:</p>
<pre> 'flag_short' => 'Follow',<br> 'flag_long' => 'You are not following this issue. Click this to follow.',<br> 'flag_message' => 'You are now following this issue.',<br> 'unflag_short' => 'Unfollow',<br> 'unflag_long' => 'You are now following this issue. Click this to unfollow.',<br> 'unflag_message' => 'You are no longer following this issue.',</pre><p>
(short is link text, long is the hover text, message is the printed message after you toggle into the state)</p>
<p>When I was talking to Leisa about all of this, we discussed something more like this:</p>
<p>Initial state (you're not following the issue):<br>
- The "follow" link is a huge green button near the top of the page.<br>
- I think it'd be nice to have the link also appear at the end of the comments (e.g. right above or next to the "Post new comment" header) and perhaps again at the very bottom of the page, under the comment form... quicksketch told me in IRC you can have the link show up multiple times on the same page, but they won't all toggle state together automatically. So if we do that, we're going to need some extra JS magic for that to all work properly.</p>
<p>Once you follow the issue:<br>
- The "unfollow" link actually looks like "Following"<br>
- When you hover over the "following" button, it turns into an "Unfollow" button that you can actually click.</p>
<p>In IRC, quicksketch suggested that a CSS sprite would probably work perfectly for this. We could do all the button visuals via CSS -- no JS required. However, we're still going to hit trouble if we have multiple follow links since they're not all going to toggle state together.</p>
<p>Another complicating factor:<br>
- We need to make sure whatever we do is accessible to screen-reader users. Probably we can just keep things as they're currently defined in the markup and it'll basically work fine. However, it'd be great to get confirmation of that, so I'm tagging this "needs accessibility review".</p>
issue