From 91bf143f2a3da79640a50a827ad98aebacfa6f26 Mon Sep 17 00:00:00 2001
From: waterlemonnn <renjiearl06@gmail.com>
Date: Fri, 7 Aug 2026 16:11:04 +0700
Subject: [PATCH] a11y: make comment permalink button keyboard-visible and
 named

CommentAnchorLink only revealed on hover, so a focused button had no
visible indicator (WCAG 2.4.7), and its accessible name was the "#"
character via title. Add focus-visible:opacity-100, swap title for
aria-label, hide the glyph from assistive tech, and announce the
copied state via a live region.
---
 components/post/CommentsSection.tsx | 9 ++++++---
 1 file changed, 6 insertions(+), 3 deletions(-)

diff --git a/components/post/CommentsSection.tsx b/components/post/CommentsSection.tsx
index e1f39c4..f8c90d7 100644
--- a/components/post/CommentsSection.tsx
+++ b/components/post/CommentsSection.tsx
@@ -30,10 +30,13 @@ function CommentAnchorLink({ commentId }: { commentId: string }) {
   return (
     <button
       onClick={copy}
-      className="font-mono text-[10px] text-text-tertiary opacity-0 transition-opacity group-hover:opacity-100 hover:text-text-secondary"
-      title="Copy link to comment"
+      className="font-mono text-[10px] text-text-tertiary opacity-0 transition-opacity group-hover:opacity-100 focus-visible:opacity-100 hover:text-text-secondary"
+      aria-label="Copy link to this comment"
     >
-      {copied ? "Copied" : "#"}
+      <span aria-hidden="true">{copied ? "Copied" : "#"}</span>
+      <span aria-live="polite" className="sr-only">
+        {copied ? "Copied" : ""}
+      </span>
     </button>
   );
 }