feat: add missing aria-labels

apps/ui/locales/en.json

@@ -51,6 +51,7 @@
       "addon": "Add-on"
     },
     "comparisonTable": {
+      "feature": "Feature",
       "included": "Included",
       "notIncluded": "Not included"
     },
@@ -90,6 +91,13 @@
   "sections": {
     "faq": {
       "title": "Frequently Asked Questions"
+    },
+    "meetTheTeam": {
+      "allTeams": "All teams",
+      "filterByTeam": "Filter by team"
+    },
+    "testimonies": {
+      "watchVideo": "Watch video"
     }
   },
   "caseStudies": {
@@ -250,6 +258,11 @@
     "disclaimerTitle": "Disclaimer",
     "disclaimer": "The data on this page is regularly updated, however don't hesitate to [contact us](mailto:marketing@strapi.io) if you notice a mistake."
   },
+  "media": {
+    "embed": {
+      "fallbackTitle": "Interactive demo"
+    }
+  },
   "newsletter": {
     "title": "Join our Newsletter",
     "description": "Get all the latest news and events.",

apps/ui/src/components/page-builder/components/media/StrapiEmbed.tsx

@@ -1,4 +1,5 @@
 import type { Data } from "@repo/strapi-types"
+import { useTranslations } from "next-intl"
 
 import { Container } from "@/components/elementary/Container"
 
@@ -7,6 +8,8 @@ export function StrapiEmbed({
 }: {
   readonly component: Data.Component<"media.embed">
 }) {
+  const t = useTranslations("media.embed")
+
   if (!component.url) {
     return null
   }
@@ -26,7 +29,7 @@ export function StrapiEmbed({
         >
           <iframe
             src={component.url}
-            title={component.title || undefined}
+            title={component.title?.trim() || t("fallbackTitle")}
             className="absolute inset-0 size-full overflow-hidden border-0"
             allow="clipboard-read; clipboard-write"
             allowFullScreen

apps/ui/src/components/page-builder/components/plans/StrapiPlanComparisonTable.tsx

@@ -173,7 +173,11 @@ export function StrapiPlanComparisonTable({
         <table className="w-full table-fixed border-collapse">
           <thead>
             <tr>
-              <th className="w-64 px-4 py-2 text-left" />
+              <th className="w-64 px-4 py-2 text-left">
+                <span className="sr-only">
+                  {t("plans.comparisonTable.feature")}
+                </span>
+              </th>
               {plans.map((plan) => (
                 <th
                   key={plan.id}

apps/ui/src/components/page-builder/components/sections/strapi-meet-the-team/StrapiMeetTheTeam.tsx

@@ -1,6 +1,7 @@
 "use client"
 
 import type { Data } from "@repo/strapi-types"
+import { useTranslations } from "next-intl"
 import { useMemo, useState } from "react"
 
 import { Container } from "@/components/elementary/Container"
@@ -35,6 +36,7 @@ export function StrapiMeetTheTeam({
 }: {
   readonly component: Data.Component<"sections.meet-the-team">
 }) {
+  const t = useTranslations("sections.meetTheTeam")
   const [selectedDepartment, setSelectedDepartment] = useState(ALL_TEAMS)
   const [selectedMember, setSelectedMember] =
     useState<Data.Component<"elements.team-member-item"> | null>(null)
@@ -83,11 +85,14 @@ export function StrapiMeetTheTeam({
               value={selectedDepartment}
               onValueChange={setSelectedDepartment}
             >
-              <SelectTrigger className="w-auto min-w-40">
-                <SelectValue placeholder="All teams" />
+              <SelectTrigger
+                className="w-auto min-w-40"
+                aria-label={t("filterByTeam")}
+              >
+                <SelectValue placeholder={t("allTeams")} />
               </SelectTrigger>
               <SelectContent>
-                <SelectItem value={ALL_TEAMS}>All teams</SelectItem>
+                <SelectItem value={ALL_TEAMS}>{t("allTeams")}</SelectItem>
                 {departments.map((dept) => (
                   <SelectItem key={dept} value={dept}>
                     {dept}

apps/ui/src/components/page-builder/components/sections/strapi-testimonies/TestimonyCard.tsx

@@ -1,13 +1,29 @@
 import { PlayIcon } from "@phosphor-icons/react/ssr"
 import type { Data } from "@repo/strapi-types"
+import { useTranslations } from "next-intl"
 
 import { StrapiBasicImage } from "@/components/page-builder/components/utilities/StrapiBasicImage"
+import type { StrapiImageMedia } from "@/types/api"
+
+function testimonyLinkLabel(
+  image: Data.Component<"utilities.basic-image"> | null | undefined,
+  fallback: string
+) {
+  const media = (image?.media ?? null) as StrapiImageMedia | null
+  const label =
+    image?.alt?.trim() ||
+    media?.alternativeText?.trim() ||
+    media?.caption?.trim()
+
+  return label || fallback
+}
 
 export function TestimonyCard({
   item,
 }: {
   readonly item: Data.Component<"elements.testimony-item">
 }) {
+  const t = useTranslations("sections.testimonies")
   const content = (
     <div className="bg-strapi-neutral-200 relative aspect-video w-full overflow-hidden rounded-lg">
       <StrapiBasicImage
@@ -29,6 +45,7 @@ export function TestimonyCard({
         href={item.videoUrl}
         target="_blank"
         rel="noopener noreferrer"
+        aria-label={testimonyLinkLabel(item.image, t("watchVideo"))}
         className="animate-spring-sm block no-underline hover:opacity-90"
       >
         {content}