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

@@ -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)}

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',

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

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',