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,127 +70,129 @@ const Element = withoutLink ? 'div' : 'a'
 const overallScoreInfo = makeOverallScoreInfo(overallScore)
 ---
 
-<Element
-  href={Element === 'a' ? `/service/${slug}` : undefined}
-  {...aProps}
-  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') &&
-      'opacity-75 transition-opacity hover:opacity-100 focus-visible:opacity-100',
-    className
-  )}
->
-  <!-- Header with Icon and Title -->
-  <div class="flex items-center gap-(--gap)">
-    <MyPicture
-      src={imageUrl}
-      fallback="service"
-      alt={name || 'Service logo'}
-      class={cn(
-        'size-12 shrink-0 rounded-sm object-contain text-white',
-        (serviceVisibility === 'ARCHIVED' || verificationStatus === 'VERIFICATION_FAILED') &&
-          'grayscale-67 transition-all group-hover/card:grayscale-0 group-focus-visible/card:grayscale-0'
-      )}
-      width={48}
-      height={48}
-    />
+<article {...htmlProps}>
+  <Element
+    href={Element === 'a' ? `/service/${slug}` : undefined}
+    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') &&
+        'opacity-75 transition-opacity hover:opacity-100 focus-visible:opacity-100',
+      className
+    )}
+  >
+    <!-- Header with Icon and Title -->
+    <div class="flex items-center gap-(--gap)">
+      <MyPicture
+        src={imageUrl}
+        fallback="service"
+        alt="Logo"
+        class={cn(
+          'size-12 shrink-0 rounded-sm object-contain text-white',
+          (serviceVisibility === 'ARCHIVED' || verificationStatus === 'VERIFICATION_FAILED') &&
+            'grayscale-67 transition-all group-hover/card:grayscale-0 group-focus-visible/card:grayscale-0'
+        )}
+        width={48}
+        height={48}
+      />
 
-    <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">
-        {name}{
-          statusIcon && (
-            <Tooltip
-              text={statusIcon.label}
-              position="right"
-              class="-my-2 shrink-0 whitespace-nowrap"
-              enabled={verificationStatus !== 'VERIFICATION_FAILED'}
-            >
-              {[
+      <div class="flex min-w-0 flex-1 flex-col justify-center self-stretch">
+        <h1 class="font-title text-lg leading-none font-medium tracking-wide text-white">
+          {name}{
+            statusIcon && (
+              <Tooltip
+                text={statusIcon.label}
+                position="right"
+                class="-my-2 shrink-0 whitespace-nowrap"
+                enabled={verificationStatus !== 'VERIFICATION_FAILED'}
+              >
+                {[
+                  <Icon
+                    is:inline={inlineIcons}
+                    name={statusIcon.icon}
+                    class={cn(
+                      'inline-block size-6 shrink-0 rounded-lg p-1 align-[-0.37em]',
+                      verificationStatus === 'VERIFICATION_FAILED' && 'pr-0',
+                      statusIcon.classNames.icon
+                    )}
+                  />,
+                  verificationStatus === 'VERIFICATION_FAILED' && (
+                    <span class="text-sm font-bold text-red-500">SCAM</span>
+                  ),
+                ]}
+              </Tooltip>
+            )
+          }{
+            serviceVisibility === 'ARCHIVED' && (
+              <Tooltip
+                text={serviceVisibilitiesById.ARCHIVED.label}
+                position="right"
+                class="-my-2 shrink-0 whitespace-nowrap"
+              >
                 <Icon
                   is:inline={inlineIcons}
-                  name={statusIcon.icon}
+                  name={serviceVisibilitiesById.ARCHIVED.icon}
                   class={cn(
                     'inline-block size-6 shrink-0 rounded-lg p-1 align-[-0.37em]',
-                    verificationStatus === 'VERIFICATION_FAILED' && 'pr-0',
-                    statusIcon.classNames.icon
+                    serviceVisibilitiesById.ARCHIVED.iconClass
                   )}
-                />,
-                verificationStatus === 'VERIFICATION_FAILED' && (
-                  <span class="text-sm font-bold text-red-500">SCAM</span>
-                ),
-              ]}
-            </Tooltip>
-          )
-        }{
-          serviceVisibility === 'ARCHIVED' && (
-            <Tooltip
-              text={serviceVisibilitiesById.ARCHIVED.label}
-              position="right"
-              class="-my-2 shrink-0 whitespace-nowrap"
-            >
-              <Icon
-                is:inline={inlineIcons}
-                name={serviceVisibilitiesById.ARCHIVED.icon}
-                class={cn(
-                  'inline-block size-6 shrink-0 rounded-lg p-1 align-[-0.37em]',
-                  serviceVisibilitiesById.ARCHIVED.iconClass
-                )}
-              />
-            </Tooltip>
-          )
-        }
-      </h3>
-      <div class="max-h-2 flex-1"></div>
-      <div class="flex items-center gap-4 overflow-hidden mask-r-from-[calc(100%-var(--spacing)*4)]">
+                />
+              </Tooltip>
+            )
+          }
+        </h1>
+        <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) => (
+              <span class="text-day-300 inline-flex shrink-0 items-center gap-1 text-sm leading-none">
+                <Icon name={category.icon} class="size-4" is:inline={inlineIcons} />
+                <span>{category.name}</span>
+              </span>
+            ))
+          }
+        </div>
+      </div>
+    </div>
+
+    <div class="flex-1">
+      <p class="text-day-400 line-clamp-3 text-sm leading-tight">
+        {description}
+      </p>
+    </div>
+
+    <div class="flex items-center justify-start">
+      <Tooltip
+        class={cn(
+          'inline-flex size-6 items-center justify-center rounded-sm text-lg font-bold',
+          overallScoreInfo.classNameBg
+        )}
+        text={`${Math.round(privacyScore).toLocaleString()}% Privacy | ${Math.round(trustScore).toLocaleString()}% Trust`}
+      >
+        {overallScoreInfo.formattedScore}
+      </Tooltip>
+
+      <span class="text-day-300 ml-3 text-sm font-bold whitespace-nowrap">
+        KYC &nbsp;{kycLevel.toLocaleString()}
+      </span>
+
+      <div class="-m-1 ml-auto flex">
         {
-          categories.map((category) => (
-            <span class="text-day-300 inline-flex shrink-0 items-center gap-1 text-sm leading-none">
-              <Icon name={category.icon} class="size-4" is:inline={inlineIcons} />
-              <span>{category.name}</span>
-            </span>
-          ))
+          currencies.map((currency) => {
+            const isAccepted = acceptedCurrencies.includes(currency.id)
+
+            return (
+              <Tooltip text={currency.name}>
+                <Icon
+                  is:inline={inlineIcons}
+                  name={currency.icon}
+                  class={cn('text-day-600 box-content size-4 p-1', { 'text-white': isAccepted })}
+                />
+              </Tooltip>
+            )
+          })
         }
       </div>
     </div>
-  </div>
-
-  <div class="flex-1">
-    <p class="text-day-400 line-clamp-3 text-sm leading-tight">
-      {description}
-    </p>
-  </div>
-
-  <div class="flex items-center justify-start">
-    <Tooltip
-      class={cn(
-        'inline-flex size-6 items-center justify-center rounded-sm text-lg font-bold',
-        overallScoreInfo.classNameBg
-      )}
-      text={`${Math.round(privacyScore).toLocaleString()}% Privacy | ${Math.round(trustScore).toLocaleString()}% Trust`}
-    >
-      {overallScoreInfo.formattedScore}
-    </Tooltip>
-
-    <span class="text-day-300 ml-3 text-sm font-bold whitespace-nowrap">
-      KYC &nbsp;{kycLevel.toLocaleString()}
-    </span>
-
-    <div class="-m-1 ml-auto flex">
-      {
-        currencies.map((currency) => {
-          const isAccepted = acceptedCurrencies.includes(currency.id)
-
-          return (
-            <Tooltip text={currency.name}>
-              <Icon
-                is:inline={inlineIcons}
-                name={currency.icon}
-                class={cn('text-day-600 box-content size-4 p-1', { 'text-white': isAccepted })}
-              />
-            </Tooltip>
-          )
-        })
-      }
-    </div>
-  </div>
-</Element>
+  </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,24 +347,26 @@ 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) => (
-            <ServiceCard
-              inlineIcons={inlineIcons}
-              service={service}
-              data-hx-search-results-card
-              {...(i === services.length - 1 && currentPage < totalPages
-                ? {
-                    'hx-get': createPageUrl(currentPage + 1, Astro.url, { 'sort-seed': sortSeed }),
-                    'hx-trigger': 'revealed',
-                    'hx-swap': 'afterend',
-                    'hx-select': '[data-hx-search-results-card]',
-                    'hx-indicator': '#infinite-scroll-indicator',
-                  }
-                : {})}
-            />
+            <li>
+              <ServiceCard
+                inlineIcons={inlineIcons}
+                service={service}
+                data-hx-search-results-card
+                {...(i === services.length - 1 && currentPage < totalPages
+                  ? {
+                      'hx-get': createPageUrl(currentPage + 1, Astro.url, { 'sort-seed': sortSeed }),
+                      'hx-trigger': 'revealed',
+                      'hx-swap': 'afterend',
+                      'hx-select': '[data-hx-search-results-card]',
+                      'hx-indicator': '#infinite-scroll-indicator',
+                    }
+                  : {})}
+              />
+            </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>
   {