Explorar el Código

feat(a11y): add "Skip to Main" button to improve keyboard navigation (#27)

Resolves #22
Nay Zaw Min Naing hace 1 año
padre
commit
5768ee5018
Se han modificado 2 ficheros con 14 adiciones y 0 borrados
  1. 2 0
      src/components/app-shell.tsx
  2. 12 0
      src/components/skip-to-main.tsx

+ 2 - 0
src/components/app-shell.tsx

@@ -1,11 +1,13 @@
 import { Outlet } from 'react-router-dom'
 import Sidebar from './sidebar'
 import useIsCollapsed from '@/hooks/use-is-collapsed'
+import SkipToMain from './skip-to-main'
 
 export default function AppShell() {
   const [isCollapsed, setIsCollapsed] = useIsCollapsed()
   return (
     <div className='relative h-full overflow-hidden bg-background'>
+      <SkipToMain />
       <Sidebar isCollapsed={isCollapsed} setIsCollapsed={setIsCollapsed} />
       <main
         id='content'

+ 12 - 0
src/components/skip-to-main.tsx

@@ -0,0 +1,12 @@
+const SkipToMain = () => {
+  return (
+    <a
+      className={`fixed left-44 z-[999] -translate-y-52 whitespace-nowrap bg-primary px-4 py-2 text-sm font-medium text-primary-foreground opacity-95 shadow transition hover:bg-primary/90 focus:translate-y-3 focus:transform focus-visible:ring-1 focus-visible:ring-ring`}
+      href='#content'
+    >
+      Skip to Main
+    </a>
+  )
+}
+
+export default SkipToMain