From 996e19a4bd0a0ff7d32d2714c2419a7f77af5c27 Mon Sep 17 00:00:00 2001
From: Ciucur Erol <mysqlthebest@gmail.com>
Date: Wed, 27 May 2026 16:20:09 +0300
Subject: [PATCH] fix(a11y): add accessible names to icon-only links
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Lighthouse flagged the Claudebin logo links in the app bar and footer
for missing discernible names — they wrap a decorative SVG with no
text or aria-label, so screen readers announce them as just "link".

- AppBar logo: aria-label via new common.claudebinHome string.
- Footer logo: same shared string.
- Embed footer logo: same root cause (icon-only link). Adds
  aria-label using the existing embed.openFullConversation key,
  which matches the link's destination (the full thread page).

Co-authored-by: Cursor <cursoragent@cursor.com>
---
 app/src/components/embed-page-footer.tsx | 2 +-
 app/src/components/ui/app-bar.tsx        | 6 +++++-
 app/src/components/ui/footer.tsx         | 2 +-
 app/src/copy/en-EN.json                  | 3 ++-
 4 files changed, 9 insertions(+), 4 deletions(-)

diff --git a/app/src/components/embed-page-footer.tsx b/app/src/components/embed-page-footer.tsx
index 9ae7f118..73645e1f 100644
--- a/app/src/components/embed-page-footer.tsx
+++ b/app/src/components/embed-page-footer.tsx
@@ -32,7 +32,7 @@ export const EmbedPageFooter = ({
 
   return (
     <div className="sticky bottom-0 flex items-center justify-between border-gray-200 border-t bg-gray-100 p-4">
-      <Link href={`/threads/${id}`} target="_blank">
+      <Link href={`/threads/${id}`} target="_blank" aria-label={t("embed.openFullConversation")}>
         <SvgIconClaudebinXs
           size="auto"
           className="w-14 transition-colors duration-150 ease-in-out hover:text-orange-50"
diff --git a/app/src/components/ui/app-bar.tsx b/app/src/components/ui/app-bar.tsx
index 7580db51..0465cb5f 100644
--- a/app/src/components/ui/app-bar.tsx
+++ b/app/src/components/ui/app-bar.tsx
@@ -55,7 +55,11 @@ const AppBar = ({ className, ...props }: AppBarProps) => {
       <Container size="lg">
         <div className="flex items-center justify-between pt-3 pb-2">
           <div className="flex items-center gap-24">
-            <Link href="/" className="transition-colors ease-in-out hover:text-orange-50">
+            <Link
+              href="/"
+              aria-label={t("common.claudebinHome")}
+              className="transition-colors ease-in-out hover:text-orange-50"
+            >
               <SvgIconClaudebinXs size="auto" className="w-14" />
             </Link>
 
diff --git a/app/src/components/ui/footer.tsx b/app/src/components/ui/footer.tsx
index e4ceba4c..03282d4b 100644
--- a/app/src/components/ui/footer.tsx
+++ b/app/src/components/ui/footer.tsx
@@ -57,7 +57,7 @@ const Footer = ({ className, ...props }: FooterProps) => {
 
         <div className="flex flex-col items-stretch justify-between gap-12 pt-3 pb-12 lg:flex-row">
           <div className="flex flex-col justify-between gap-4 lg:gap-6">
-            <Link href="/">
+            <Link href="/" aria-label={t("common.claudebinHome")}>
               <SvgIconClaudebin size="auto" className="max-w-xl" />
             </Link>
 
diff --git a/app/src/copy/en-EN.json b/app/src/copy/en-EN.json
index cbaf2b98..1b06eef7 100644
--- a/app/src/copy/en-EN.json
+++ b/app/src/copy/en-EN.json
@@ -35,7 +35,8 @@
     "image": "Image",
     "unlisted": "Unlisted",
     "sharingSettingsUpdated": "Sharing settings updated",
-    "sharingSettingsUpdateError": "Failed to update sharing settings"
+    "sharingSettingsUpdateError": "Failed to update sharing settings",
+    "claudebinHome": "Claudebin home"
   },
   "commands": {
     "oneClickInstall": "claude plugin marketplace add wunderlabs-dev/claudebin && claude plugin install claudebin@claudebin-marketplace",