Merge pull request #311 from dkackman/navbar

Navbar accessibility and desktop bottom margin
xch-dev · Feb 2, 2025 · e597216 · e597216
2 parents f1f842f + fac53b9
commit e597216
Show file tree

Hide file tree

Showing 5 changed files with 62 additions and 20 deletions.
diff --git a/src/components/Header.tsx b/src/components/Header.tsx
@@ -31,7 +31,12 @@ export default function Header(
   const isMobile = platform() === 'ios' || platform() === 'android';
 
   return (
-    <header className='flex items-center gap-4 px-4 md:px-6 sticky top-0 bg-background z-10 pb-2 pt-2'>
+    <header
+      className={`flex items-center gap-4 px-4 md:px-6 sticky top-0 bg-background z-10 ${
+        !isMobile ? 'pt-4' : 'pb-2 pt-2'
+      }`}
+      role='banner'
+    >
       <Sheet>
         {hasBackButton ? (
           <Button
@@ -42,9 +47,6 @@ export default function Header(
             aria-label={t`Back`}
           >
             <ChevronLeft className='h-5 w-5 pb' aria-hidden='true' />
-            <span className='sr-only'>
-              <Trans>Back</Trans>
-            </span>
           </Button>
         ) : (
           <SheetTrigger asChild>
@@ -53,18 +55,19 @@ export default function Header(
               size='icon'
               className='shrink-0 md:hidden'
               aria-label={t`Toggle navigation menu`}
+              aria-expanded='false'
+              aria-haspopup='dialog'
             >
               <Menu className='h-5 w-5' aria-hidden='true' />
-              <span className='sr-only'>
-                <Trans>Toggle navigation menu</Trans>
-              </span>
             </Button>
           </SheetTrigger>
         )}
         <SheetContent
           side='left'
           isMobile={isMobile}
           className='flex flex-col'
+          role='dialog'
+          aria-label={t`Navigation menu`}
           style={{
             paddingTop:
               insets.top !== 0
@@ -88,7 +91,9 @@ export default function Header(
           <div className='-mx-2'>
             <TopNav />
           </div>
-          <div className='mt-auto grid gap-1 text-md font-medium'>
+          <div
+            className={`mt-auto grid gap-1 text-md font-medium ${!isMobile ? 'pb-4' : ''}`}
+          >
             <BottomNav />
           </div>
         </SheetContent>

diff --git a/src/components/Layout.tsx b/src/components/Layout.tsx
@@ -65,6 +65,8 @@ export default function Layout(props: LayoutProps) {
           className={`hidden border-r bg-muted/40 md:flex flex-col transition-all duration-300 ${
             isCollapsed ? 'w-[60px]' : 'w-[250px]'
           }`}
+          role='complementary'
+          aria-label={t`Sidebar navigation`}
         >
           <div className='bg-background flex h-full max-h-screen flex-col gap-2'>
             <div className='flex h-14 items-center pt-2 px-5 justify-between'>
@@ -78,15 +80,16 @@ export default function Layout(props: LayoutProps) {
                     aria-label={
                       isCollapsed ? t`Expand sidebar` : t`Collapse sidebar`
                     }
+                    aria-expanded={!isCollapsed}
                   >
                     {isCollapsed ? (
-                      <PanelLeft className='h-5 w-5' />
+                      <PanelLeft className='h-5 w-5' aria-hidden='true' />
                     ) : (
-                      <PanelLeftClose className='h-5 w-5' />
+                      <PanelLeftClose className='h-5 w-5' aria-hidden='true' />
                     )}
                   </button>
                 </TooltipTrigger>
-                <TooltipContent side='right'>
+                <TooltipContent side='right' role='tooltip'>
                   {isCollapsed ? t`Expand sidebar` : t`Collapse sidebar`}
                 </TooltipContent>
               </Tooltip>

diff --git a/src/components/Nav.tsx b/src/components/Nav.tsx
@@ -31,14 +31,19 @@ export function TopNav({ isCollapsed }: NavProps) {
   const className = isCollapsed ? 'h-5 w-5' : 'h-4 w-4';
 
   return (
-    <nav className={`grid font-medium ${isCollapsed ? 'gap-2' : ''}`}>
-      <Separator className='mb-3' />
+    <nav
+      className={`grid font-medium ${isCollapsed ? 'gap-2' : ''}`}
+      role='navigation'
+      aria-label={t`Main navigation`}
+    >
+      <Separator className='mb-3' role='presentation' />
       <NavLink
         url={'/wallet'}
         isCollapsed={isCollapsed}
         message={<Trans>Wallet</Trans>}
+        ariaCurrent='page'
       >
-        <WalletIcon className={className} />
+        <WalletIcon className={className} aria-hidden='true' />
       </NavLink>
       <NavLink
         url={'/nfts'}
@@ -107,7 +112,11 @@ export function BottomNav({ isCollapsed }: NavProps) {
   const className = isCollapsed ? 'h-5 w-5' : 'h-4 w-4';
 
   return (
-    <nav className={`grid font-medium ${isCollapsed ? 'gap-2' : ''}`}>
+    <nav
+      className={`grid font-medium ${isCollapsed ? 'gap-2' : ''}`}
+      role='navigation'
+      aria-label={t`Secondary navigation`}
+    >
       <NavLink
         url={'/peers'}
         isCollapsed={isCollapsed}
@@ -180,6 +189,7 @@ interface NavLinkProps extends PropsWithChildren {
   isCollapsed?: boolean;
   message: React.ReactNode;
   customTooltip?: React.ReactNode;
+  ariaCurrent?: 'page' | 'step' | 'location' | 'date' | 'time' | true | false;
 }
 
 function NavLink({
@@ -188,28 +198,42 @@ function NavLink({
   isCollapsed,
   message,
   customTooltip,
+  ariaCurrent,
 }: NavLinkProps) {
   const className = `flex items-center gap-3 rounded-lg py-1.5 text-muted-foreground transition-all hover:text-primary ${
     isCollapsed ? 'justify-center' : 'px-3'
   } text-lg md:text-base`;
 
   const link =
     typeof url === 'string' ? (
-      <Link to={url} className={className}>
+      <Link
+        to={url}
+        className={className}
+        aria-current={ariaCurrent}
+        aria-label={isCollapsed ? message?.toString() : undefined}
+      >
         {children}
         {!isCollapsed && message}
       </Link>
     ) : (
-      <button type='button' onClick={url} className={className}>
+      <button
+        type='button'
+        onClick={url}
+        className={className}
+        aria-label={isCollapsed ? message?.toString() : undefined}
+      >
         {children}
         {!isCollapsed && message}
       </button>
     );
+
   if (isCollapsed || customTooltip) {
     return (
       <Tooltip>
         <TooltipTrigger asChild>{link}</TooltipTrigger>
-        <TooltipContent side='right'>{customTooltip || message}</TooltipContent>
+        <TooltipContent side='right' role='tooltip' aria-live='polite'>
+          {customTooltip || message}
+        </TooltipContent>
       </Tooltip>
     );
   }

diff --git a/src/components/ui/sheet.tsx b/src/components/ui/sheet.tsx
@@ -62,14 +62,17 @@ const SheetContent = React.forwardRef<
     <SheetPrimitive.Content
       ref={ref}
       className={cn(sheetVariants({ side }), className)}
+      aria-modal='true'
+      role='dialog'
       {...props}
     >
       {!isMobile && (
         <SheetPrimitive.Close
           tabIndex={-1}
           className='absolute right-4 top-4 rounded-sm opacity-70 ring-offset-white transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-neutral-950 focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-neutral-100 dark:ring-offset-neutral-950 dark:focus:ring-neutral-300 dark:data-[state=open]:bg-neutral-800'
+          aria-label='Close'
         >
-          <Cross2Icon className='h-4 w-4' />
+          <Cross2Icon className='h-4 w-4' aria-hidden='true' />
           <span className='sr-only'>Close</span>
         </SheetPrimitive.Close>
       )}

diff --git a/src/pages/Login.tsx b/src/pages/Login.tsx
@@ -38,6 +38,9 @@ import { useNavigate } from 'react-router-dom';
 import { commands, KeyInfo, SecretKeyInfo } from '../bindings';
 import Container from '../components/Container';
 import { loginAndUpdateState } from '../state';
+import { platform } from '@tauri-apps/plugin-os';
+
+const isMobile = platform() === 'ios' || platform() === 'android';
 
 export default function Login() {
   const navigate = useNavigate();
@@ -66,7 +69,11 @@ export default function Login() {
 
   return (
     <SafeAreaView>
-      <div className='flex-1 space-y-4 px-4 overflow-y-scroll'>
+      <div
+        className={`flex-1 space-y-4 px-4 overflow-y-scroll ${
+          !isMobile ? 'pt-4' : ''
+        }`}
+      >
         <div className='flex items-center justify-between space-y-2'>
           {(keys?.length ?? 0) > 0 && (
             <>