Release 202507080931

web/src/components/AnnouncementBanner.astro

@@ -43,6 +43,7 @@ const Tag = announcement.link ? 'a' : 'div'
     'group xs:px-6 2xs:px-4 relative isolate z-50 flex items-center justify-center gap-x-2 overflow-hidden border-b border-zinc-800 bg-black px-2 py-2 focus-visible:outline-none sm:gap-x-6 sm:px-3.5',
     className
   )}
+  aria-label="Announcement banner"
   {...props}
 >
   <div

web/src/components/Header.astro

@@ -37,6 +37,7 @@ const splashText = showSplashText ? sample(splashTexts) : null
     }
   )}
   transition:name="header-container"
+  aria-label="Header"
 >
   <nav class={cn('container mx-auto flex h-full w-full items-stretch justify-between px-4', classNames?.nav)}>
     <div class="@container -ml-4 flex max-w-[192px] grow-99999 items-center">

web/src/components/ServiceCard.astro

@@ -13,7 +13,7 @@ import Tooltip from './Tooltip.astro'
 import type { Prisma } from '@prisma/client'
 import type { HTMLAttributes } from 'astro/types'
 
-type Props = HTMLAttributes<'a'> & {
+type Props = HTMLAttributes<'article'> & {
   inlineIcons?: boolean
   withoutLink?: boolean
   service: Prisma.ServiceGetPayload<{
@@ -57,7 +57,7 @@ const {
   },
   class: className,
   withoutLink = false,
-  ...aProps
+  ...htmlProps
 } = Astro.props
 
 const statusIcon = {
@@ -70,9 +70,10 @@ const Element = withoutLink ? 'div' : 'a'
 const overallScoreInfo = makeOverallScoreInfo(overallScore)
 ---
 
+<article {...htmlProps}>
   <Element
     href={Element === 'a' ? `/service/${slug}` : undefined}
-  {...aProps}
+    aria-label={Element === 'a' ? name : undefined}
     class={cn(
       'border-night-600 group/card bg-night-800 flex flex-col gap-(--gap) rounded-xl border p-(--gap) [--gap:calc(var(--spacing)*3)]',
       (serviceVisibility === 'ARCHIVED' || verificationStatus === 'VERIFICATION_FAILED') &&
@@ -85,7 +86,7 @@ const overallScoreInfo = makeOverallScoreInfo(overallScore)
       <MyPicture
         src={imageUrl}
         fallback="service"
-      alt={name || 'Service logo'}
+        alt="Logo"
         class={cn(
           'size-12 shrink-0 rounded-sm object-contain text-white',
           (serviceVisibility === 'ARCHIVED' || verificationStatus === 'VERIFICATION_FAILED') &&
@@ -96,7 +97,7 @@ const overallScoreInfo = makeOverallScoreInfo(overallScore)
       />
 
       <div class="flex min-w-0 flex-1 flex-col justify-center self-stretch">
-      <h3 class="font-title text-lg leading-none font-medium tracking-wide text-white">
+        <h1 class="font-title text-lg leading-none font-medium tracking-wide text-white">
           {name}{
             statusIcon && (
               <Tooltip
@@ -139,8 +140,8 @@ const overallScoreInfo = makeOverallScoreInfo(overallScore)
               </Tooltip>
             )
           }
-      </h3>
+        </h1>
-      <div class="max-h-2 flex-1"></div>
+        <div class="max-h-2 flex-1" aria-hidden="true"></div>
         <div class="flex items-center gap-4 overflow-hidden mask-r-from-[calc(100%-var(--spacing)*4)]">
           {
             categories.map((category) => (
@@ -194,3 +195,4 @@ const overallScoreInfo = makeOverallScoreInfo(overallScore)
       </div>
     </div>
   </Element>
+</article>

web/src/components/ServiceFiltersPill.astro

@@ -39,6 +39,7 @@ const makeUrlWithoutFilter = (filter: string, value?: string) => {
     'bg-night-800 hover:bg-night-900 border-night-400 flex h-8 shrink-0 items-center gap-2 rounded-full border px-3 text-sm text-white',
     className
   )}
+  aria-label={`Remove filter: ${text}`}
 >
   {icon && <Icon name={icon} class={cn('size-4', iconClass)} is:inline={inlineIcons} />}
   {text}

web/src/components/ServiceFiltersPillsRow.astro

@@ -50,6 +50,7 @@ const {
     'not-pointer-coarse:no-scrollbar -ml-4 flex shrink grow items-center gap-2 overflow-x-auto mask-r-from-[calc(100%-var(--spacing)*16)] pr-12 pl-4',
     className
   )}
+  aria-label="Applied filters"
   {...divProps}
 >
   {

web/src/components/ServicesSearchResults.astro

@@ -201,6 +201,7 @@ const searchTitle = (() => {
         name="ri:loader-4-line"
         id="search-indicator"
         class="htmx-request:opacity-100 xs:-mx-1.5 -mx-1 inline-block size-4 animate-spin text-white opacity-0 transition-opacity duration-500 sm:-mx-3"
+        aria-hidden="true"
         is:inline={inlineIcons}
       />
 
@@ -346,8 +347,9 @@ const searchTitle = (() => {
       </div>
     ) : (
       <>
-        <div class="mt-6 grid grid-cols-1 gap-4 sm:gap-6 md:grid-cols-[repeat(auto-fill,minmax(calc(var(--spacing)*80),1fr))]">
+        <ol class="mt-6 grid grid-cols-1 gap-4 sm:gap-6 md:grid-cols-[repeat(auto-fill,minmax(calc(var(--spacing)*80),1fr))]">
           {services.map((service, i) => (
+            <li>
               <ServiceCard
                 inlineIcons={inlineIcons}
                 service={service}
@@ -362,8 +364,9 @@ const searchTitle = (() => {
                     }
                   : {})}
               />
+            </li>
           ))}
-        </div>
+        </ol>
 
         <div class="no-js:hidden mt-8 flex justify-center" id="infinite-scroll-indicator">
           <div class="htmx-request:opacity-100 flex items-center gap-2 opacity-0 transition-opacity duration-500">

web/src/components/Tooltip.astro

@@ -33,6 +33,7 @@ const {
     enabled && (
       <span
         tabindex="-1"
+        aria-hidden="true"
         class={cn(
           'pointer-events-none hidden select-none group-hover/tooltip:flex',
           'ease-out-cubic scale-75 opacity-0 transition-all transition-discrete duration-100 group-hover/tooltip:scale-100 group-hover/tooltip:opacity-100 starting:group-hover/tooltip:scale-75 starting:group-hover/tooltip:opacity-0',

web/src/pages/index.astro

@@ -492,6 +492,7 @@ const showFiltersId = 'show-filters'
     />
     <div
       class="bg-night-700 fixed top-0 left-0 z-50 hidden h-dvh w-dvw shrink-0 translate-y-full overflow-y-auto overscroll-contain border-t border-green-500/30 px-8 pt-4 transition-transform peer-checked:translate-y-0 max-sm:peer-checked:block sm:relative sm:z-auto sm:block sm:h-auto sm:w-64 sm:translate-y-0 sm:overflow-visible sm:border-none sm:bg-none sm:p-0"
+      aria-label="Search filters"
     >
       <ServicesFilters
         searchResultsId={searchResultsId}
@@ -519,6 +520,7 @@ const showFiltersId = 'show-filters'
       filtersOptions={filtersOptions}
       attributes={attributes}
       attributeOptions={attributeOptions}
+      aria-label="Search results"
     />
   </div>
   {