Fix terrible dropdown aria usage

collective · Nov 28, 2024 · ed41c2a · ed41c2a
1 parent e49504a
commit ed41c2a
Showing 1 changed file with 3 additions and 3 deletions.
diff --git a/examples/nuxt-blog-starter/components/header.vue b/examples/nuxt-blog-starter/components/header.vue
@@ -24,14 +24,14 @@
                 <li v-if="!item.items.length">
                     <NuxtLink :to="getUrl(item)" class="block py-2 px-3 text-blue-600 border-b border-gray-100 hover:bg-gray-50 md:hover:bg-transparent md:border-0 md:hover:text-blue-600 md:p-0 dark:text-blue-500 md:dark:hover:text-blue-500 dark:hover:bg-gray-700 dark:hover:text-blue-500 md:dark:hover:bg-transparent dark:border-gray-700" aria-current="page">{{ item.title }}</NuxtLink>
                 </li>
-                <li v-else>
-                    <button id="mega-menu-dropdown-button" :data-dropdown-toggle="getId(item)" class="flex items-center z-30 justify-between w-full py-2 px-3 font-medium text-gray-900 border-b border-gray-100 md:w-auto hover:bg-gray-50 md:hover:bg-transparent md:border-0 md:hover:text-blue-600 md:p-0 dark:text-white md:dark:hover:text-blue-500 dark:hover:bg-gray-700 dark:hover:text-blue-500 md:dark:hover:bg-transparent dark:border-gray-700">
+                <li v-else >
+                    <button :id="`mega-menu-dropdown-button-${getId(item)}`" :data-dropdown-toggle="getId(item)" class="flex items-center z-30 justify-between w-full py-2 px-3 font-medium text-gray-900 border-b border-gray-100 md:w-auto hover:bg-gray-50 md:hover:bg-transparent md:border-0 md:hover:text-blue-600 md:p-0 dark:text-white md:dark:hover:text-blue-500 dark:hover:bg-gray-700 dark:hover:text-blue-500 md:dark:hover:bg-transparent dark:border-gray-700">
                         {{item.title}} <svg class="w-2.5 h-2.5 ms-3" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 10 6">
                         <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m1 1 4 4 4-4"/>
                         </svg>
                     </button>
                     <div :id="getId(item)" class="absolute z-40 grid hidden w-auto grid-cols-2 text-sm bg-white border border-gray-100 rounded-lg shadow-md dark:border-gray-700 md:grid-cols-3 dark:bg-gray-700">
-                        <div v-for="(chunk) in chunkArray(item.items, 4)" class="p-4 pb-0 text-gray-900 md:pb-4 dark:text-white" aria-labelledby="mega-menu-dropdown-button">
+                        <div v-for="(chunk) in chunkArray(item.items, 4)" class="p-4 pb-0 text-gray-900 md:pb-4 dark:text-white">
                             <ul class="space-y-4" >
                                 <li v-for="(item) in chunk">
                                     <NuxtLink :to="getUrl(item)"  class="text-gray-500 dark:text-gray-400 hover:text-blue-600 dark:hover:text-blue-500">