From 9595aa56e0dad1551507d0fe40da0593236eef3f Mon Sep 17 00:00:00 2001
From: Huang Xin <chrox.huang@gmail.com>
Date: Sat, 4 Apr 2026 23:00:20 +0800
Subject: [PATCH] fix(android): get rid of the outline on the header and footer
 bar when using remote control to turn page (#3744)

---
 apps/readest-app/src/app/reader/components/HeaderBar.tsx        | 1 +
 apps/readest-app/src/app/reader/components/ProgressBar.tsx      | 1 +
 apps/readest-app/src/app/reader/components/SectionInfo.tsx      | 2 ++
 .../src/app/reader/components/footerbar/FooterBar.tsx           | 1 +
 4 files changed, 5 insertions(+)

diff --git a/apps/readest-app/src/app/reader/components/HeaderBar.tsx b/apps/readest-app/src/app/reader/components/HeaderBar.tsx
index d0cd0665..7a0bafa0 100644
--- a/apps/readest-app/src/app/reader/components/HeaderBar.tsx
+++ b/apps/readest-app/src/app/reader/components/HeaderBar.tsx
@@ -149,6 +149,7 @@ const HeaderBar: React.FC<HeaderBarProps> = ({
     >
       <div
         role='none'
+        tabIndex={-1}
         className={clsx('absolute top-0 z-10 h-11 w-full', pointerInDoc && 'pointer-events-none')}
         onClick={() => setHoveredBookKey(bookKey)}
         onMouseEnter={() => !appService?.isMobile && setHoveredBookKey(bookKey)}
diff --git a/apps/readest-app/src/app/reader/components/ProgressBar.tsx b/apps/readest-app/src/app/reader/components/ProgressBar.tsx
index 99af6343..74f70e6e 100644
--- a/apps/readest-app/src/app/reader/components/ProgressBar.tsx
+++ b/apps/readest-app/src/app/reader/components/ProgressBar.tsx
@@ -155,6 +155,7 @@ const ProgressBar: React.FC<ProgressBarProps> = ({
   return (
     <div
       role='presentation'
+      tabIndex={-1}
       className={clsx(
         'progressinfo absolute bottom-0 flex items-center justify-between font-sans',
         isEink ? 'text-sm font-normal' : 'text-neutral-content text-xs font-extralight',
diff --git a/apps/readest-app/src/app/reader/components/SectionInfo.tsx b/apps/readest-app/src/app/reader/components/SectionInfo.tsx
index b05ebe37..80ac170e 100644
--- a/apps/readest-app/src/app/reader/components/SectionInfo.tsx
+++ b/apps/readest-app/src/app/reader/components/SectionInfo.tsx
@@ -52,6 +52,7 @@ const SectionInfo: React.FC<SectionInfoProps> = ({
           isScrolled && !isVertical && 'bg-base-100',
         )}
         role='none'
+        tabIndex={-1}
         onClick={handleNotchClick}
         style={{
           height: `${topInset}px`,
@@ -65,6 +66,7 @@ const SectionInfo: React.FC<SectionInfoProps> = ({
           isScrolled && !isVertical && 'bg-base-100',
         )}
         role='none'
+        tabIndex={-1}
         onClick={() => setHoveredBookKey(bookKey)}
         style={
           isVertical
diff --git a/apps/readest-app/src/app/reader/components/footerbar/FooterBar.tsx b/apps/readest-app/src/app/reader/components/footerbar/FooterBar.tsx
index 5dc46943..5e9bc04f 100644
--- a/apps/readest-app/src/app/reader/components/footerbar/FooterBar.tsx
+++ b/apps/readest-app/src/app/reader/components/footerbar/FooterBar.tsx
@@ -224,6 +224,7 @@ const FooterBar: React.FC<FooterBarProps> = ({
       {/* Hover trigger area */}
       <div
         role='none'
+        tabIndex={-1}
         className={clsx(
           'absolute bottom-0 left-0 z-10 flex h-[52px] w-full',
           needHorizontalScroll && 'sm:!bottom-3 sm:!h-7',