feat: add A11Y component for improved accessibility and navigation in the timetable app

Author: Zain-ul-din

src/components/A11Y.tsx

@@ -0,0 +1,35 @@
+import { VisuallyHidden, Text } from '@chakra-ui/react';
+import { link } from 'joi';
+import Link from 'next/link';
+import { useEffect, useRef } from 'react';
+import { ROUTING } from '~/lib/constant';
+
+export default function A11Y() {
+  const ref = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    if (ref.current) ref.current.focus();
+  }, [ref]);
+
+  return (
+    <VisuallyHidden>
+      <div ref={ref} tabIndex={-1} aria-live="polite" aria-atomic="true">
+        <Text as="h2" fontSize="lg">
+          LGU timetable Navigation
+        </Text>
+        <p>A non-official blazingly fast website to access the LGU timetable.</p>
+        <nav aria-label="move through the LGU timetable navigation">
+          {[
+            { name: 'Student Timetable', link: ROUTING.timetable },
+            { name: 'Teachers Timetable', link: ROUTING.teachers },
+            { name: 'Fee Rooms', link: ROUTING.free_class_rooms }
+          ].map((item, idx) => (
+            <Link key={idx} href={item.link}>
+              <Text>{item.name}</Text>
+            </Link>
+          ))}
+        </nav>
+      </div>
+    </VisuallyHidden>
+  );
+}

src/components/TimetableSelection.tsx

@@ -122,7 +122,7 @@ function Selection({ metaData }: { metaData: any }): JSX.Element {
           </Text>
 
           <TabStyle.Tabs index={currTabIdx} onChange={setCurrTabIdx}>
-            <TabStyle.TabList>
+            <TabStyle.TabList autoFocus={true}>
               <TabStyle.Tab>Semester</TabStyle.Tab>
               <TabStyle.Tab isDisabled={userInput.fall == null}>Program</TabStyle.Tab>
               <TabStyle.Tab isDisabled={userInput.semester == null}>Section</TabStyle.Tab>
@@ -133,6 +133,7 @@ function Selection({ metaData }: { metaData: any }): JSX.Element {
               <TabStyle.TabPanel textAlign={'center'}>
                 <DropDown
                   defautlSelectedItem={'choose semester'}
+                  useInitialFocus={true}
                   menuItems={Object.keys(metaData)}
                   onClick={(
                     selectedItem: string,

src/lib/constant.ts

@@ -70,18 +70,18 @@ export const GITHUB_REPOS = [
 
 export const ROUTING = {
   home: '/',
-  developer: '/developer',
-  contribute: '/contribute',
-  profile: '/profile',
   timetable: '/timetable',
-  discussions: '/discussions',
-  free_class_rooms: '/freeclassrooms',
-  admin: '/admin',
   teachers: '/timetable/teachers',
   rooms: '/timetable/rooms',
-  clash_resolver: '/util/timetable_clashresolver',
+  free_class_rooms: '/freeclassrooms',
   room_activities: '/room-activities',
+  clash_resolver: '/util/timetable_clashresolver',
   past_papers: '/pastpaper',
+  developer: '/developer',
+  contribute: '/contribute',
+  profile: '/profile',
+  discussions: '/discussions',
+  admin: '/admin',
   blogs: '/blogs'
 };
 

src/pages/index.tsx

@@ -6,6 +6,7 @@ import { SocialLinks } from '~/components/seo/Seo';
 import MainAnimator from '~/components/design/MainAnimator';
 import FrontPageAd from '~/components/Ads/FrontPageAd';
 import StructuredData from '~/components/StructuredData';
+import A11Y from '~/components/A11Y';
 
 export default function Home() {
   useFirebaseAnalyticsReport(FIREBASE_ANALYTICS_EVENTS.home_page);
@@ -30,6 +31,7 @@ export default function Home() {
         <SocialLinks />
       </Head>
       <MainAnimator isDisabled>
+        <A11Y />
         <div className={'roboto'}>
           <Hero renderDescription={true} />
           <FrontPageAd />