danvics/openreader
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

style(ui): update aria-labels for clarity and consistency in sidebar controls

Browse source 
Standardize aria-labels in DocumentHeaderMenu and ReaderSidebarShell to use
"Hide" and "Close" phrasing for improved accessibility and user experience.
This commit is contained in:
Richard R 2026-05-04 15:23:48 -06:00
parent 71e1472650
commit 62103ea752
2 changed files with 5 additions and 5 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

6
src/components/documents/DocumentHeaderMenu.tsx
View file

@ -54,7 +54,7 @@ export function DocumentHeaderMenu({
? 'border-accent text-accent bg-offbase' ? 'border-accent text-accent bg-offbase'
: 'border-offbase text-foreground hover:bg-offbase hover:text-accent' : 'border-offbase text-foreground hover:bg-offbase hover:text-accent'
}`} }`}
aria-label={isSegmentsOpen ? 'Close segments sidebar' : 'Open segments sidebar'} aria-label={isSegmentsOpen ? 'Hide segments sidebar' : 'Open segments sidebar'}
title={isSegmentsOpen ? 'Hide Segments' : 'Segments'} title={isSegmentsOpen ? 'Hide Segments' : 'Segments'}
> >
<ListIcon className="w-4 h-4 transform transition-transform duration-200 ease-in-out hover:scale-[1.09]" /> <ListIcon className="w-4 h-4 transform transition-transform duration-200 ease-in-out hover:scale-[1.09]" />
@ -68,7 +68,7 @@ export function DocumentHeaderMenu({
? 'border-accent text-accent bg-offbase' ? 'border-accent text-accent bg-offbase'
: 'border-offbase text-foreground hover:bg-offbase hover:text-accent' : 'border-offbase text-foreground hover:bg-offbase hover:text-accent'
}`} }`}
aria-label={isAudiobookOpen ? 'Close audiobook export' : 'Open audiobook export'} aria-label={isAudiobookOpen ? 'Hide audiobook export' : 'Open audiobook export'}
title={isAudiobookOpen ? 'Hide Export Audiobook' : 'Export Audiobook'} title={isAudiobookOpen ? 'Hide Export Audiobook' : 'Export Audiobook'}
> >
<DownloadIcon className="w-4 h-4 transform transition-transform duration-200 ease-in-out hover:scale-[1.09]" /> <DownloadIcon className="w-4 h-4 transform transition-transform duration-200 ease-in-out hover:scale-[1.09]" />
@ -81,7 +81,7 @@ export function DocumentHeaderMenu({
? 'border-accent text-accent bg-offbase' ? 'border-accent text-accent bg-offbase'
: 'border-offbase text-foreground hover:bg-offbase hover:text-accent' : 'border-offbase text-foreground hover:bg-offbase hover:text-accent'
}`} }`}
aria-label={isSettingsOpen ? 'Close settings' : 'Open settings'} aria-label={isSettingsOpen ? 'Hide settings' : 'Open settings'}
title={isSettingsOpen ? 'Hide Settings' : 'Settings'} title={isSettingsOpen ? 'Hide Settings' : 'Settings'}
> >
<FileSettingsIcon className="w-4 h-4 transform transition-transform duration-200 ease-in-out hover:scale-[1.09]" /> <FileSettingsIcon className="w-4 h-4 transform transition-transform duration-200 ease-in-out hover:scale-[1.09]" />

4
src/components/reader/ReaderSidebarShell.tsx
View file

@ -47,7 +47,7 @@ export function ReaderSidebarShell({
> >
<button <button
type="button" type="button"
aria-label={`Close ${title.toLowerCase()}`} aria-label="Close"
onClick={onClose} onClick={onClose}
className="sm:hidden absolute inset-0 overlay-dim backdrop-blur-sm pointer-events-auto" className="sm:hidden absolute inset-0 overlay-dim backdrop-blur-sm pointer-events-auto"
/> />
@ -76,7 +76,7 @@ export function ReaderSidebarShell({
<button <button
type="button" type="button"
onClick={onClose} onClick={onClose}
aria-label={`Close ${title.toLowerCase()}`} aria-label="Close"
title="Close" title="Close"
className="inline-flex items-center justify-center w-8 h-8 rounded-lg border border-offbase bg-base text-muted hover:bg-offbase hover:text-accent transition-colors" className="inline-flex items-center justify-center w-8 h-8 rounded-lg border border-offbase bg-base text-muted hover:bg-offbase hover:text-accent transition-colors"
> >