From c7dbe46131185999d5d51f2ae0d62b2c7cefbf64 Mon Sep 17 00:00:00 2001
From: Luminessa Starlight <git@samsch.org>
Date: Wed, 10 Sep 2025 08:58:30 -0400
Subject: [PATCH] Docs: improve form field accessibility guidance (#110826)

improve form field accessibility guidance
---
 contribute/style-guides/accessibility.md | 18 ++++++++++++------
 1 file changed, 12 insertions(+), 6 deletions(-)

diff --git a/contribute/style-guides/accessibility.md b/contribute/style-guides/accessibility.md
index f7d5a72e2ac..6d783ae4e40 100644
--- a/contribute/style-guides/accessibility.md
+++ b/contribute/style-guides/accessibility.md
@@ -17,21 +17,27 @@ The form components from `grafana/ui` provide an easier way to achieve that. The
 For example:
 
 ```tsx
-<Field label="Name">
-  <Input id="name" placeholder="Enter a name" />
-</Field>
+const id = useId(); // React's useId provides a stable globally unique identifier
+
+return (
+  <Field label="Name">
+    <Input id={id} placeholder="Enter a name" />
+  </Field>
+);
 ```
 
 In the previous example, the code is rendered as:
 
 ```html
 <div>
-  <label for="name"> Name </label>
-  <input name="name" type="text" id="name" placeholder="Enter a name" value="" />
+  <label for=":r0:"> Name </label>
+  <input name="name" type="text" id=":r0:" placeholder="Enter a name" value="" />
 </div>
 ```
 
-As long as the form element has a unique `id` attribute specified, it's automatically accessible when rendered.
+As long as the form element has a globally unique `id` attribute specified and is the direct child element of Field, it's automatically accessible when rendered.
+
+Make sure you test that each field can be selected by clicking its label!
 
 ### Write tests with accessibility in mind