root
/
grafana
mirror of https://github.com/grafana/grafana.git
1
0
Fork 0
Code Issues Actions 142 Packages Projects Releases Wiki Activity

Docs: improve form field accessibility guidance (#110826) 

improve form field accessibility guidance
This commit is contained in:
Luminessa Starlight 2025-09-10 08:58:30 -04:00 committed by GitHub
parent 09ef9c8176
commit c7dbe46131
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
1 changed files with 12 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
contribute/style-guides/accessibility.md
View File

@ -17,21 +17,27 @@ The form components from `grafana/ui` provide an easier way to achieve that. The
For example: For example:
```tsx ```tsx
const id = useId(); // React's useId provides a stable globally unique identifier
return (
<Field label="Name"> <Field label="Name">
<Input id="name" placeholder="Enter a name" /> <Input id={id} placeholder="Enter a name" />
</Field> </Field>
);
``` ```
In the previous example, the code is rendered as: In the previous example, the code is rendered as:
```html ```html
<div> <div>
<label for="name"> Name </label> <label for=":r0:"> Name </label>
<input name="name" type="text" id="name" placeholder="Enter a name" value="" /> <input name="name" type="text" id=":r0:" placeholder="Enter a name" value="" />
</div> </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 ### Write tests with accessibility in mind