Hi to the team!
This is more of a fly-by report. I just noticed in another thread that the Like button sometimes has no accessibility label. I haven‘t found the pattern yet. But it possibly has to do with whether a post has already received one or more likes, or none yet, and the control gets split up to show that. I then see two buttons. One has the count on it, the second is unlabeled.
Marco
Ah, I believe this is because we’re testing our Discourse Reactions plugin here on Meta (Notice: testing Discourse Reactions here on meta for 1 week!). We need to fix that! Thanks for the report.
I tried and tested it with many different cases but was not able to reproduce that. The label was always displayed, but for the first time it takes some delay and thats a general behaviour of title attribute.
I am assuming the issue is with the tooltip provided for the like button. Are we on the same page here?
I am referring to what the screen reader speaks for the button you press to like a post. Or maybe you can somehow add other reactions, but my screen reader does not tell me about that at all. The only thing I get a label on is the element that shows the current like count, if 1 or higher. If it is 0, that control isn’t there. But the button I have to press to add a “Like” reaction is unlabeled for my screen readers on Windows, Mac, and iOS.
I am blind, so am not using a mouse. And the title attribute in general is problematic for touch interactions anyway, since there is not usually an easy way to trigger a mouse hover.
Hope this helps…
To be clear, I am referring to the button #discourse-reactions-actions-916340 > div > div.discourse-reactions-reaction-button.my-likes > button. That button has no title or aria-label, only an SVG inside which is aria-hidden. And even if it weren’t, that SVG as well as its children don’t have any information a screen reader could use, either. So the solution here is to:
#discourse-reactions-counter-916340, should probably get some better information as to who actually reacted with which reactions. I don’t know how sighted people get to that, if you click on that number and then get a popup somewhere. But that also needs to be made accessible to screen reader and keyboard users.Right now, at least for me, the widget seems to only allow “like” reactions.
Sorry for the multiple posts, but this shows how meticulous this sometimes can be to find the cause for something. The title attribute on posts that are not mine, is currently on the parent div of the actual “like” button. However, for a screen reader to pick it up, the titlle needs to go on the button itself. Screen readers do not pick up titles from just any element. It’s been abused too much for that generalization in the past 25 years. So, if you move the title attribute to the <button> child element, the screen reader will pick it up properly.
Thanks, @MarcoZehe for providing the exact point where you needed the title.
I have added a PR here which will solve your problem.
https://github.com/discourse/discourse-reactions/pull/64
@MarcoZehe the PR is merged now, you can pull the lates plugin and try it out.
Thank you! I will wait until this instance pulls the latest code for the plugin. I am not running my own Discourse instance, so have nowhere I could pull the plugin into. Thank you for the quick fix!
Thank you so much Marco.
I just re-deployed reactions here (should be live in 15 minutes or so).
Let us know if the issue looks resolved.
Thanks you so much Marco for testing!