aljaz/boris
1
1
Fork 0
mirror of https://github.com/dergigi/boris.git synced 2025-12-18 15:14:20 +01:00
Code Issues Packages Projects Releases Wiki Activity

fix(a11y): replace aria-hidden with inert to prevent focus issues

Browse Source 
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.
This commit is contained in:
Gigi
2025-10-23 20:48:36 +02:00
parent cf5f8fae16
commit ae5ea66dd2
1 changed files with 2 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
src/components/ThreePaneLayout.tsx
View File

@@ -321,7 +321,7 @@ const ThreePaneLayout: React.FC<ThreePaneLayoutProps> = (props) => {
<div <div
ref={sidebarRef} ref={sidebarRef}
className={`pane sidebar ${isMobile && props.isSidebarOpen ? 'mobile-open' : ''}`} className={`pane sidebar ${isMobile && props.isSidebarOpen ? 'mobile-open' : ''}`}
aria-hidden={isMobile && !props.isSidebarOpen} inert={isMobile && !props.isSidebarOpen ? ('' as any) : undefined}
> >
<BookmarkList <BookmarkList
bookmarks={props.bookmarks} bookmarks={props.bookmarks}
@@ -413,7 +413,7 @@ const ThreePaneLayout: React.FC<ThreePaneLayoutProps> = (props) => {
<div <div
ref={highlightsRef} ref={highlightsRef}
className={`pane highlights ${isMobile && !props.isHighlightsCollapsed ? 'mobile-open' : ''}`} className={`pane highlights ${isMobile && !props.isHighlightsCollapsed ? 'mobile-open' : ''}`}
aria-hidden={isMobile && props.isHighlightsCollapsed} inert={isMobile && props.isHighlightsCollapsed ? ('' as any) : undefined}
> >
<HighlightsPanel <HighlightsPanel
highlights={props.highlights} highlights={props.highlights}