Fix accessibility for buttons with aria-label

Author: davidde

src/components/common/searchbar.tsx

@@ -37,6 +37,7 @@ export default function Searchbar(props: { className?: string }) {
       />
       <Button
         type='submit'
+        aria-label='search'
         className='w-11 h-10 leading-8 align-middle text-center rounded-lg ml-4 cursor-pointer
                    bg-(--link-color) dark:bg-(--hover-bg-color) hover:bg-(--hover-fg-color)
                    text-(--main-bg-color) dark:text-(--hover-fg-color) hover:text-white'

src/components/header/toggles/index.tsx

@@ -1,14 +1,14 @@
-import DarkmodeToggle from './darkmode-toggle';
-import EthNetworkToggle from './eth-network-toggle';
+import ThemeToggle from './theme-toggle';
+import NetworkPicker from './network-picker';
 
 
 export default function Toggles() {
   return (
     <span className='flex flex-row justify-end min-w-18 mr-3'>
-      <DarkmodeToggle
+      <ThemeToggle
         className='w-6 min-w-6 cursor-pointer hover:text-(--hover-fg-color)'
       />
-      <EthNetworkToggle
+      <NetworkPicker
         className='w-6 h-6 ml-5 cursor-pointer hover:invert-[0.65]'
       />
     </span>

…ts/header/toggles/eth-network-toggle.tsx …onents/header/toggles/network-picker.tsxsrc/components/header/toggles/eth-network-toggle.tsx renamed to src/components/header/toggles/network-picker.tsx src/components/header/toggles/eth-network-toggle.tsx renamed to src/components/header/toggles/network-picker.tsx

@@ -6,7 +6,7 @@ import Link from 'next/link';
 import { useNetwork } from '@/components/common/network-context';
 
 
-export default function EthNetworkToggle(props: { className?: string }) {
+export default function NetworkPicker(props: { className?: string }) {
   const [ mounted, setMounted ] = useState(false);
   const { network } = useNetwork();
   const sepolia = network === 'sepolia';
@@ -23,7 +23,8 @@ export default function EthNetworkToggle(props: { className?: string }) {
   return (
     <Menu>
       <MenuButton className={`${props.className}
-        bg-(image:--eth-logo-url) bg-contain bg-no-repeat bg-right`} />
+        bg-(image:--eth-logo-url) bg-contain bg-no-repeat bg-right`}
+        aria-label='Network picker' />
       <MenuItems
         className='bg-(--main-bg-color)
                    border-2 border-(--border-color)

…nents/header/toggles/darkmode-toggle.tsx …mponents/header/toggles/theme-toggle.tsxsrc/components/header/toggles/darkmode-toggle.tsx renamed to src/components/header/toggles/theme-toggle.tsx src/components/header/toggles/darkmode-toggle.tsx renamed to src/components/header/toggles/theme-toggle.tsx

@@ -9,7 +9,7 @@ type Props = {
   className?: string
 }
 
-export default function DarkmodeToggle(props: Props) {
+export default function ThemeToggle(props: Props) {
   const { resolvedTheme, setTheme } = useTheme();
   const [ mounted, setMounted ] = useState(false);
 
@@ -45,7 +45,7 @@ export default function DarkmodeToggle(props: Props) {
   }
 
   return (
-    <button className={props.className} onClick={toggleTheme} >
+    <button className={props.className} onClick={toggleTheme} aria-label='Theme toggle'>
       {
         resolvedTheme === 'dark' ?
         <SunIcon />