peter/siftlode
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

fix(ui): make the back-to-top button resist ad-block cosmetic filters

Browse source 
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.
This commit is contained in:
npeter83 2026-06-30 05:18:07 +02:00
parent 6b47b0d357
commit a788c8bb7a
1 changed files with 5 additions and 3 deletions
Download patch file Download diff file Expand all files Collapse all files

8
frontend/src/components/BackToTop.tsx
View file

@ -28,16 +28,18 @@ export default function BackToTop({ dep, threshold = 600 }: { dep?: unknown; thr
const toTop = () => scrollerRef.current?.scrollTo({ top: 0, behavior: "smooth" }); 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( return createPortal(
<button <button
onClick={toTop} 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 ${ 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" 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>, </button>,
document.body document.body
); );