From a788c8bb7a773e55d5e2aa633fa088bbb8747950 Mon Sep 17 00:00:00 2001
From: npeter83 <npeter83+claude@gmail.com>
Date: Tue, 30 Jun 2026 05:18:07 +0200
Subject: [PATCH] fix(ui): make the back-to-top button resist ad-block cosmetic
 filters

Ad-block annoyance lists (e.g. Brave Shields) hide floating corner buttons via attribute
selectors like [aria-label="Back to top"] / [title=...]. Drop both attributes and provide the
accessible name with a visually-hidden child span instead, which those selectors can't match.
---
 frontend/src/components/BackToTop.tsx | 8 +++++---
 1 file changed, 5 insertions(+), 3 deletions(-)

diff --git a/frontend/src/components/BackToTop.tsx b/frontend/src/components/BackToTop.tsx
index fc021bd..26bc792 100644
--- a/frontend/src/components/BackToTop.tsx
+++ b/frontend/src/components/BackToTop.tsx
@@ -28,16 +28,18 @@ export default function BackToTop({ dep, threshold = 600 }: { dep?: unknown; thr
 
   const toTop = () => scrollerRef.current?.scrollTo({ top: 0, behavior: "smooth" });
 
+  // No aria-label/title attributes: ad-block "annoyance" cosmetic filters (e.g. Brave Shields)
+  // commonly hide floating corner buttons via attribute selectors like [aria-label="Back to top"].
+  // The accessible name comes from a visually-hidden child instead, which those selectors can't match.
   return createPortal(
     <button
       onClick={toTop}
-      aria-label={t("common.backToTop")}
-      title={t("common.backToTop")}
       className={`fixed bottom-5 right-5 z-30 inline-flex items-center justify-center w-11 h-11 rounded-full bg-card border border-border text-fg shadow-lg hover:border-accent hover:text-accent transition-all duration-200 ${
         show ? "opacity-100 translate-y-0" : "opacity-0 translate-y-3 pointer-events-none"
       }`}
     >
-      <ArrowUp className="w-5 h-5" />
+      <ArrowUp className="w-5 h-5" aria-hidden="true" />
+      <span className="sr-only">{t("common.backToTop")}</span>
     </button>,
     document.body
   );