a11y: per-comment permalink button is invisible on keyboard focus and named only "#"

[royalpinto007]

Desired outcome

The per-comment permalink button is reachable and understandable for keyboard and screen reader users.

Why it matters

CommentAnchorLink in components/post/CommentsSection.tsx renders:

<button
  onClick={copy}
  className="... opacity-0 transition-opacity group-hover:opacity-100 ..."
  title="Copy link to comment"
>
  {copied ? "Copied" : "#"}
</button>

Two real gaps:

1. The button is opacity-0 and is only revealed by group-hover. A keyboard user tabbing through the comment list focuses an invisible control, so there is no visible focus indicator anywhere on screen. That is a WCAG 2.4.7 failure.
2. Its accessible name is the character #. title is not a reliable accessible name and is never surfaced on touch or keyboard. A screen reader announces something like "number sign, button".

Steps

1. Add focus-visible:opacity-100 (and keep group-hover:opacity-100) to the button classes so focus reveals it.
2. Replace title with aria-label="Copy link to this comment", and wrap the visible # in aria-hidden="true".
3. Announce the copied state, for example by adding aria-live="polite" to the element that swaps to "Copied".

Small, self-contained, one file.

Claiming this

Comment below to claim it. A reply usually comes within a day.

[waterlemonnn]

I'd like to work on this.

[github-actions]

It's yours, @waterlemonnn. Marked this as claimed.

Take your time, and shout in this thread if you get stuck. If there's no activity for 14 days the claim is released so someone else can pick it up.