From ae5ea66dd2590afb014c65d12813e17eda1ba944 Mon Sep 17 00:00:00 2001
From: Gigi <dergigi@pm.me>
Date: Thu, 23 Oct 2025 20:48:36 +0200
Subject: [PATCH] fix(a11y): replace aria-hidden with inert to prevent focus
 issues

Replaced aria-hidden with inert attribute on mobile sidebar and highlights panes. The inert attribute both hides from assistive technology AND prevents focus, eliminating the accessibility warning about focused elements being hidden.
---
 src/components/ThreePaneLayout.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/ThreePaneLayout.tsx b/src/components/ThreePaneLayout.tsx
index ee95d248..2d059905 100644
--- a/src/components/ThreePaneLayout.tsx
+++ b/src/components/ThreePaneLayout.tsx
@@ -321,7 +321,7 @@ const ThreePaneLayout: React.FC<ThreePaneLayoutProps> = (props) => {
         <div 
           ref={sidebarRef}
           className={`pane sidebar ${isMobile && props.isSidebarOpen ? 'mobile-open' : ''}`}
-          aria-hidden={isMobile && !props.isSidebarOpen}
+          inert={isMobile && !props.isSidebarOpen ? ('' as any) : undefined}
         >
           <BookmarkList 
             bookmarks={props.bookmarks}
@@ -413,7 +413,7 @@ const ThreePaneLayout: React.FC<ThreePaneLayoutProps> = (props) => {
         <div 
           ref={highlightsRef}
           className={`pane highlights ${isMobile && !props.isHighlightsCollapsed ? 'mobile-open' : ''}`}
-          aria-hidden={isMobile && props.isHighlightsCollapsed}
+          inert={isMobile && props.isHighlightsCollapsed ? ('' as any) : undefined}
         >
           <HighlightsPanel
             highlights={props.highlights}