From 8ce98a802f1d378bd828c2b8a4128ba2d1cba19f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Marc-Andr=C3=A9=20Bombeck?= <mbombeck@gmail.com>
Date: Tue, 30 Jun 2026 18:24:15 +0200
Subject: [PATCH] fix(measurements): give the custom-metrics section an
 accessible add button

The custom-metrics add button hid its label below sm and carried no
accessible name, so on mobile it read as a bare "+". Add an aria-label to
both the header and empty-state add buttons, and separate the section from
the built-in measurement list above it with a top border so it reads as
its own block.
---
 src/components/custom-metrics/custom-metric-list.tsx | 12 ++++++++++--
 1 file changed, 10 insertions(+), 2 deletions(-)

diff --git a/src/components/custom-metrics/custom-metric-list.tsx b/src/components/custom-metrics/custom-metric-list.tsx
index efd023028..e9492c6df 100644
--- a/src/components/custom-metrics/custom-metric-list.tsx
+++ b/src/components/custom-metrics/custom-metric-list.tsx
@@ -47,7 +47,10 @@ export function CustomMetricList() {
   }
 
   return (
-    <section className="space-y-3" data-slot="custom-metric-list">
+    <section
+      className="border-border space-y-3 border-t pt-6"
+      data-slot="custom-metric-list"
+    >
       <div className="flex items-center justify-between gap-2">
         <div className="min-w-0">
           <h2 className="text-lg font-semibold tracking-tight">
@@ -62,6 +65,7 @@ export function CustomMetricList() {
           size="sm"
           className="min-h-11 shrink-0 sm:min-h-9"
           onClick={() => setAddOpen(true)}
+          aria-label={t("customMetrics.add")}
         >
           <Plus className="h-4 w-4" />
           <span className="hidden sm:inline">{t("customMetrics.add")}</span>
@@ -86,7 +90,11 @@ export function CustomMetricList() {
             <p className="text-muted-foreground text-sm">
               {t("customMetrics.emptyDescription")}
             </p>
-            <Button size="sm" onClick={() => setAddOpen(true)}>
+            <Button
+              size="sm"
+              onClick={() => setAddOpen(true)}
+              aria-label={t("customMetrics.add")}
+            >
               {t("customMetrics.add")}
             </Button>
           </CardContent>