add arialabel

zizdlp · Oct 1, 2024 · ab61315 · ab61315
1 parent adee173
commit ab61315
Show file tree

Hide file tree

Showing 7 changed files with 29 additions and 9 deletions.
diff --git a/zbook_frontend/src/app/[locale]/page.tsx b/zbook_frontend/src/app/[locale]/page.tsx
@@ -188,9 +188,9 @@ export default async function Home() {
                 <h1 className="max-w-2xl block">{t("SimpleDocumentation")}</h1>
                 <h1 className="max-w-2xl block">{t("VisuallyAppealing")}</h1>
               </div>
-              <div className="mt-3.5 flex justify-center">
-                <h3 className="max-w-sm">{t("DocumentationForTeam")}</h3>
-              </div>
+              <p className="mt-4 max-w-[26rem] mx-auto md:max-w-xl text-primary dark:text-primary-light/80 md:leading-loose">
+                {t("DocumentationForTeam")}
+              </p>
             </div>
             <div className="px-12 mt-8 flex justify-center items-center flex-col sm:flex-row space-y-4 sm:space-y-0 sm:space-x-10">
               <Link

diff --git a/zbook_frontend/src/components/navbars/NavLang.tsx b/zbook_frontend/src/components/navbars/NavLang.tsx
@@ -18,7 +18,10 @@ export default function NavLink() {
   return (
     <Listbox value={selected} onChange={setSelected}>
       <div className="relative">
-        <Listbox.Button className="relative flex w-full cursor-pointer rounded-lg text-left focus:outline-none focus-visible:border-indigo-500 focus-visible:ring-2 focus-visible:ring-white/75 focus-visible:ring-offset-2 focus-visible:ring-offset-orange-300 sm:text-sm">
+        <Listbox.Button
+          aria-label="Select language"
+          className="relative flex w-full cursor-pointer rounded-lg text-left focus:outline-none focus-visible:border-indigo-500 focus-visible:ring-2 focus-visible:ring-white/75 focus-visible:ring-offset-2 focus-visible:ring-offset-orange-300 sm:text-sm"
+        >
           <svg
             stroke="currentColor"
             fill="currentColor"

diff --git a/zbook_frontend/src/components/navbars/NavNotification.tsx b/zbook_frontend/src/components/navbars/NavNotification.tsx
@@ -116,7 +116,10 @@ export default function NavNotification({
       }}
     >
       <Badge count={unReadCount} className="text-slate-700 dark:text-slate-200">
-        <MdOutlineNotificationsNone className="block w-6 h-6  hover:text-sky-600 dark:hover:text-sky-400 cursor-pointer" />
+        <MdOutlineNotificationsNone
+          aria-label="notifications"
+          className="block w-6 h-6  hover:text-sky-600 dark:hover:text-sky-400 cursor-pointer"
+        />
       </Badge>
     </div>
   );

diff --git a/zbook_frontend/src/components/navbars/NavTheme.tsx b/zbook_frontend/src/components/navbars/NavTheme.tsx
@@ -26,7 +26,10 @@ export default function NavLang() {
   return (
     <Listbox value={theme} onChange={setTheme}>
       <div className="relative">
-        <Listbox.Button className="relative flex w-full cursor-pointer rounded-lg text-left focus:outline-none focus-visible:border-indigo-500 focus-visible:ring-2 focus-visible:ring-white/75 focus-visible:ring-offset-2 focus-visible:ring-offset-orange-300 sm:text-sm">
+        <Listbox.Button
+          aria-label="Select Theme(e.g. dark)"
+          className="relative flex w-full cursor-pointer rounded-lg text-left focus:outline-none focus-visible:border-indigo-500 focus-visible:ring-2 focus-visible:ring-white/75 focus-visible:ring-offset-2 focus-visible:ring-offset-orange-300 sm:text-sm"
+        >
           <NavBarIcon
             Icon={
               theme == "dark"

diff --git a/zbook_frontend/src/components/navbars/NavUserState.tsx b/zbook_frontend/src/components/navbars/NavUserState.tsx
@@ -17,20 +17,29 @@ export default async function UserState() {
           }}
         >
           <button type="submit">
-            <RiLogoutBoxLine className="block w-6 h-6  hover:text-sky-600 dark:hover:text-sky-400 cursor-pointer" />
+            <RiLogoutBoxLine
+              aria-label="Logout"
+              className="block w-6 h-6  hover:text-sky-600 dark:hover:text-sky-400 cursor-pointer"
+            />
           </button>
         </form>
         <GlobalSearchButton />
         <Link href={`/workspace/${session.username}`}>
-          <AiOutlineUser className="block w-6 h-6  hover:text-sky-600 dark:hover:text-sky-400 cursor-pointer" />
+          <AiOutlineUser
+            aria-label="User Center"
+            className="block w-6 h-6  hover:text-sky-600 dark:hover:text-sky-400 cursor-pointer"
+          />
         </Link>
       </>
     );
   } else {
     return (
       <>
         <Link href={`/auth/login`}>
-          <RiLoginBoxLine className="block w-6 h-6  hover:text-sky-600 dark:hover:text-sky-400 cursor-pointer" />
+          <RiLoginBoxLine
+            aria-label="Login"
+            className="block w-6 h-6  hover:text-sky-600 dark:hover:text-sky-400 cursor-pointer"
+          />
         </Link>
       </>
     );

diff --git a/zbook_frontend/src/components/navbars/SideBarToggle.tsx b/zbook_frontend/src/components/navbars/SideBarToggle.tsx
@@ -28,6 +28,7 @@ export default function SideBarToggle() {
         setSideBarOpen(!sideBarOpen);
         localStorage.setItem("sidebarValue", JSON.stringify(!sideBarOpen));
       }}
+      aria-label="sidebar toggle"
       mounted={true}
     />
   );

diff --git a/zbook_frontend/src/providers/dialogs/GlobalSearchButton.tsx b/zbook_frontend/src/providers/dialogs/GlobalSearchButton.tsx
@@ -13,6 +13,7 @@ export default function GlobalSearchButton() {
         setSearchType(SearchType.DOCUMENT);
         setSearchDialogOpen(true);
       }}
+      aria-label="search"
       className="block w-6 h-6  hover:text-sky-600 dark:hover:text-sky-400 cursor-pointer"
     />
   );