Accessibility issues

[jasonday]

Non-exhaustive list.
I will update as I test more.

• linking the entire comment (text value plus likes, replies, reposts) is confusing for screenreaders and keyboard users. I suggest not linking the whole comment and interactions, but adding a "permalink" link to the comment. (so only the username and permalink are links).

• Additionally, the interactions don't have a clear accessible name. Adding a <title> to the svgs would resolve that - i,.e. <title>likes</title>. However, this breaks up the elements into two announcements for a screenreaders, so alternatively you could add aria-hidden="true" to each svg, then do something like: <p class="text-xs">2 <span="sr-only">likes</span></p> then they would be announced together.
• Additionally, there's not a semantic structure to comments. I suggest doing one of the following:
  • enclosing each comment in a <blockquote> element. This gives wayfinding to a screen reader user.

[jasonday]

@hichemfantar

Here's the basic model I just did a pull request for over on bluesky-comments repo: czue/bluesky-comments#29 (comment)

The basic structure for each comment is:

<blockquote>
	<a href="link to profile">
		<img avatar/>
		author.name
		author.handle
	</a>
	<p> comment text </p>
	<actions>
		<div><svg replies>10 <span="screenReaderOnly">replies</span></div>
		...
		<div><svg reply-to><span ="screenReaderOnly">reply to author.handle</span></div>
	</actions>
</blockquote>

I'll take a look at your comment template and open a pull request.