Nuxt example frontend lighthouse fixes

Makefile

@@ -126,4 +126,8 @@ example-nextjs-admin: ## Starts Volto, allowing reloading of the add-on during d
 ## Examples
 .PHONY: example-nextjs-frontend
 example-nextjs-frontend: ## Starts nextjs example frontend
-	pnpm example:nextjs
+	pnpm example:nextjs
+
+.PHONY: example-nuxt-frontend
+example-nuxt-frontend: ## Starts nuxt example frontend
+	pnpm example:nuxt

examples/nuxt-blog-starter/components/block.vue

@@ -86,15 +86,16 @@
           <div
             class="max-w-sm p-6 bg-slate-200/90 border border-gray-200 m-12 rounded-lg shadow dark:bg-gray-800 dark:border-gray-700 absolute"
             :class="{ 'right-0': block.flagAlign == 'right' }">
-            <NuxtLink :to="getUrl(block.href[0])">
-              <div>{{ block.head_title }}</div>
-              <h5 class="mb-2 text-2xl font-bold tracking-tight text-gray-900 dark:text-white"
-                data-editable-field="title">{{ block.title }}</h5>
-            </NuxtLink>
+            <div>{{ block.head_title }}</div>
+            <h5 :id="`heading-${block['@id']}`"
+              class="mb-2 text-2xl font-bold tracking-tight text-gray-900 dark:text-white" data-editable-field="title">
+              {{ block.title }}</h5>
             <p class="mb-3 font-normal text-gray-700 dark:text-gray-400" data-editable-field="description">
               {{ block.description }}</p>
-            <NuxtLink v-if="block.href" :to="getUrl(block.href[0])" data-editable-field="buttonText"
-              class="inline-flex items-center px-3 py-2 text-sm font-medium text-center text-white bg-blue-700 rounded-lg hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800">
+              <NuxtLink v-if="block.href" :to="getUrl(block.href[0])" data-editable-field="buttonText"
+              class="inline-flex items-center px-3 py-2 text-sm font-medium text-center text-white bg-blue-700 rounded-lg hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800"
+              :aria-describedby="`heading-${block['@id']}`">
+
               {{ block.buttonText || 'Read More' }}</NuxtLink>
           </div>
         </div>

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">

examples/nuxt-blog-starter/nuxt.config.ts

@@ -1,6 +1,13 @@
 import mkcert from 'vite-plugin-mkcert'
 
 export default defineNuxtConfig({
+  app: {
+    head: {
+      htmlAttrs: {
+        lang: 'en',
+      },
+    },
+  },
   modules: [
     '@nuxtjs/tailwindcss', 
     'nuxt-security',