Add accessibility attributes for screen readers
Improve accessibility by adding ARIA attributes to interactive components: nav.py: - Menu button: aria_label="Open navigation menu" sidebar.py: - Close button: aria_label="Close menu" - Drawer panel: role="dialog", aria_label="Navigation menu" base.py: - Toast container: aria_live="polite" (announces toasts) - Event slide-over: role="dialog", aria_label="Event details" These changes help screen readers properly announce interactive elements and their purposes. 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
@@ -157,6 +157,8 @@ def EventSlideOver(): # noqa: N802
|
|||||||
"shadow-2xl border-l border-stone-700 overflow-hidden",
|
"shadow-2xl border-l border-stone-700 overflow-hidden",
|
||||||
tabindex="-1",
|
tabindex="-1",
|
||||||
hx_on_keydown="if(event.key==='Escape') closeEventPanel()",
|
hx_on_keydown="if(event.key==='Escape') closeEventPanel()",
|
||||||
|
role="dialog",
|
||||||
|
aria_label="Event details",
|
||||||
),
|
),
|
||||||
)
|
)
|
||||||
|
|
||||||
@@ -215,7 +217,7 @@ def page(
|
|||||||
cls="pb-20 md:pb-4 md:ml-60 min-h-screen bg-[#0f0f0e] text-stone-100",
|
cls="pb-20 md:pb-4 md:ml-60 min-h-screen bg-[#0f0f0e] text-stone-100",
|
||||||
),
|
),
|
||||||
# Toast container with hx-preserve to survive body swaps for OOB toast injection
|
# Toast container with hx-preserve to survive body swaps for OOB toast injection
|
||||||
Div(id="fh-toast-container", hx_preserve=True),
|
Div(id="fh-toast-container", hx_preserve=True, aria_live="polite"),
|
||||||
# Mobile bottom nav
|
# Mobile bottom nav
|
||||||
BottomNav(active_id=active_nav),
|
BottomNav(active_id=active_nav),
|
||||||
)
|
)
|
||||||
|
|||||||
@@ -102,6 +102,7 @@ def BottomNav(active_id: str = "eggs"): # noqa: N802
|
|||||||
onclick="openMenuDrawer()",
|
onclick="openMenuDrawer()",
|
||||||
cls=wrapper_cls,
|
cls=wrapper_cls,
|
||||||
type="button",
|
type="button",
|
||||||
|
aria_label="Open navigation menu",
|
||||||
)
|
)
|
||||||
|
|
||||||
# Regular nav items are links
|
# Regular nav items are links
|
||||||
|
|||||||
@@ -264,6 +264,7 @@ def MenuDrawer(user_role: UserRole | None = None): # noqa: N802
|
|||||||
hx_on_click="closeMenuDrawer()",
|
hx_on_click="closeMenuDrawer()",
|
||||||
cls="p-2 -mr-2 hover:bg-stone-800 rounded-lg transition-colors",
|
cls="p-2 -mr-2 hover:bg-stone-800 rounded-lg transition-colors",
|
||||||
type="button",
|
type="button",
|
||||||
|
aria_label="Close menu",
|
||||||
),
|
),
|
||||||
cls="flex items-center justify-between px-4 py-4 border-b border-stone-800",
|
cls="flex items-center justify-between px-4 py-4 border-b border-stone-800",
|
||||||
),
|
),
|
||||||
@@ -276,6 +277,8 @@ def MenuDrawer(user_role: UserRole | None = None): # noqa: N802
|
|||||||
cls="fixed top-0 right-0 bottom-0 w-72 bg-[#141413] z-50 flex flex-col shadow-2xl",
|
cls="fixed top-0 right-0 bottom-0 w-72 bg-[#141413] z-50 flex flex-col shadow-2xl",
|
||||||
tabindex="-1",
|
tabindex="-1",
|
||||||
hx_on_keydown="if(event.key==='Escape') closeMenuDrawer()",
|
hx_on_keydown="if(event.key==='Escape') closeMenuDrawer()",
|
||||||
|
role="dialog",
|
||||||
|
aria_label="Navigation menu",
|
||||||
),
|
),
|
||||||
cls="md:hidden",
|
cls="md:hidden",
|
||||||
)
|
)
|
||||||
|
|||||||
Reference in New Issue
Block a user