a11y: make comment permalink button keyboard-visible and named (#67)

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.

Co-authored-by: royalpinto007 <royalpinto007@gmail.com>

Author: Renji

components/post/CommentsSection.tsx

@@ -40,10 +40,15 @@ 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" : failed ? "Failed" : "#"}
+      <span aria-hidden="true">
+        {copied ? "Copied" : failed ? "Failed" : "#"}
+      </span>
+      <span aria-live="polite" className="sr-only">
+        {copied ? "Copied" : failed ? "Failed to copy" : ""}
+      </span>
     </button>
   );
 }