fix(a11y): accessibility of the website

Author: Kumzy

app/components/SponsorSection.vue

@@ -9,67 +9,39 @@
     }"
   >
     <div class="flex flex-col items-center">
-      <!-- <template v-for="({ tier, sponsors }) of sponsorGroups" :key="tier"> -->
       <div class="w-full mb-24">
-        <!-- <UBadge color="neutral" variant="subtle" class="capitalize mb-2">
-              {{ tier }} sponsors
-            </UBadge> -->
-
-        <div class="w-full border border-default rounded-lg">
-          <table class="w-full">
-            <tbody>
-              <template
-                v-for="(_, rowIndex) in Math.ceil(sponsors.length / 3)"
-                :key="rowIndex"
-              >
-                <tr>
-                  <template v-for="colIndex in 3" :key="colIndex">
-                    <td
-                      v-if="rowIndex * 3 + colIndex - 1 < sponsors.length"
-                      class="border-b border-r border-default p-0 w-1/3 h-[120px]"
-                      :class="{
-                        'border-r-0': colIndex === 3,
-                        'border-b-0':
-                          rowIndex === Math.ceil(sponsors.length / 3) - 1,
-                      }"
-                    >
-                      <NuxtLink
-                        :to="sponsors[rowIndex * 3 + colIndex - 1].url"
-                        target="_blank"
-                        class="flex items-center gap-2 justify-center h-full hover:bg-muted/50 transition-colors"
-                      >
-                        <NuxtImg
-                          :src="`/sponsors/${sponsors[rowIndex * 3 + colIndex - 1]?.image.src}`"
-                          :alt="`${sponsors[rowIndex * 3 + colIndex - 1]?.image.alt}`"
-                          loading="lazy"
-                          class="h-10 max-w-[140px] object-contain rounded-lg"
-                          height="40"
-                          width="40"
-                        />
-                        <span class="text-base hidden sm:block font-semibold">{{
-                          sponsors[rowIndex * 3 + colIndex - 1].title
-                        }}</span>
-                      </NuxtLink>
-                    </td>
-                    <td
-                      v-else
-                      class="border-b border-r border-default p-0 w-1/3 h-[120px]"
-                      :class="{
-                        'border-r-0': colIndex === 3,
-                        'border-b-0':
-                          rowIndex === Math.ceil(sponsors.length / 3) - 1,
-                      }"
-                    >
-                      <div class="h-full" />
-                    </td>
-                  </template>
-                </tr>
-              </template>
-            </tbody>
-          </table>
-        </div>
+        <ul
+          class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 w-full border border-default rounded-lg overflow-hidden list-none p-0"
+        >
+          <li
+            v-for="(sponsor, index) in sponsors"
+            :key="sponsor.url"
+            class="h-[120px] border-default"
+            :class="{
+              'border-r': (index + 1) % 3 !== 0,
+              'border-b': index < sponsors.length - (sponsors.length % 3 || 3),
+            }"
+          >
+            <NuxtLink
+              :to="sponsor.url"
+              target="_blank"
+              class="flex items-center gap-2 justify-center h-full hover:bg-muted/50 transition-colors"
+            >
+              <NuxtImg
+                :src="`/sponsors/${sponsor.image.src}`"
+                :alt="sponsor.image.alt"
+                loading="lazy"
+                class="h-10 max-w-[140px] object-contain rounded-lg"
+                height="40"
+                width="40"
+              />
+              <span class="text-base hidden sm:block font-semibold">{{
+                sponsor.title
+              }}</span>
+            </NuxtLink>
+          </li>
+        </ul>
       </div>
-      <!-- </template> -->
     </div>
   </UPageSection>
 </template>

app/components/plugin/PluginItem.vue

@@ -98,7 +98,6 @@ const items = computed(() => [
   <UContextMenu :items="items">
     <UPageCard
       :to="`/plugins/${plugin?.key}`"
-      :title="plugin?.name"
       :description="plugin?.description"
       class="group"
       variant="subtle"
@@ -112,6 +111,10 @@ const items = computed(() => [
       }"
       @click="handleCardClick"
     >
+      <template #title>
+        <h3>{{ plugin?.name }}</h3>
+      </template>
+
       <template #leading>
         <UAvatar
           v-if="!isDefaultPluginIcon(plugin?.icon)"

app/pages/about.vue

@@ -228,9 +228,9 @@ const stats = [
           name="i-lucide-heart"
           class="w-12 h-12 mx-auto mb-4 text-primary-600 dark:text-primary-400"
         />
-        <h2 class="text-2xl font-bold text-gray-900 dark:text-white mb-4">
+        <h3 class="text-2xl font-bold text-gray-900 dark:text-white mb-4">
           Get Involved
-        </h2>
+        </h3>
         <p class="text-lg text-gray-600 dark:text-gray-400 mb-6">
           Every contribution is welcome and appreciated! Join our community and
           help make Litestar even better.

app/pages/plugins/index.vue

@@ -299,6 +299,7 @@ initializePlugins()
 
     <UPage id="smooth" class="relative z-20">
       <UPageBody>
+        <h2 class="sr-only">Browse plugins</h2>
         <div class="flex items-center gap-2 mb-4 text-muted">
           <UIcon name="i-lucide-info" class="size-4" />
           <span class="text-xs"