Merge pull request #175 from ELIXIR-NO/aria-labels

add aria-labels

Author: korbinib

src/components/navigation.tsx

@@ -72,6 +72,7 @@ export const Navigation = ({ pathname }) => {
                         <button
                             type="button"
                             onClick={() => setMobileMenuOpen(true)}
+                            aria-label="Open main menu"
                             className="-m-2.5 inline-flex items-center justify-center rounded-md p-2.5 text-gray-700"
                         >
                             <span className="sr-only">Open main menu</span>
@@ -89,7 +90,7 @@ export const Navigation = ({ pathname }) => {
                     </div>
                     <div className="hidden lg:flex gap-x-2 lg:flex-1 lg:justify-end">
                         <ThemeToggle/>
-                        <button onClick={onSearchClick}>
+                        <button onClick={onSearchClick} aria-label="Search">
                             <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth={1.5}
                                  stroke="currentColor" className="size-6">
                                 <path strokeLinecap="round" strokeLinejoin="round"
@@ -98,7 +99,7 @@ export const Navigation = ({ pathname }) => {
                         </button>
                     </div>
                 </nav>
-                <Dialog open={mobileMenuOpen} onClose={setMobileMenuOpen} className="lg:hidden">
+                <Dialog open={mobileMenuOpen} onClose={setMobileMenuOpen} className="lg:hidden" >
                     <div className="fixed inset-0 z-50"/>
                     <DialogPanel
                         className="fixed inset-y-0 right-0 z-50 w-full overflow-y-auto bg-white px-6 py-6 sm:max-w-sm sm:ring-1 sm:ring-gray-900/10">
@@ -115,6 +116,7 @@ export const Navigation = ({ pathname }) => {
                                 type="button"
                                 onClick={() => setMobileMenuOpen(false)}
                                 className="flex items-center justify-center"
+                                aria-label="Close menu"
                             >
                                 <span className="sr-only">Close menu</span>
                                 <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"

src/components/theme-toggle.tsx

@@ -8,7 +8,7 @@ export default function ThemeToggle() {
     };
 
     return (
-        <button onClick={onClick} className="h-8 w-8 p-0.5 hover:scale-110">
+        <button onClick={onClick} className="h-8 w-8 p-0.5 hover:scale-110" aria-label="Toggle Dark/Light Mode">
             <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth={1.5}
                  stroke="currentColor" className="size-6 block dark:hidden">
                 <path strokeLinecap="round" strokeLinejoin="round"
@@ -22,4 +22,4 @@ export default function ThemeToggle() {
         </button>
     );
 
-}
+}