Associate the label for the text field with the text field input (#7548)

keystonejs · May 20, 2022 · ea34fb1 · ea34fb1
1 parent a7b8d7f
commit ea34fb1
Show file tree

Hide file tree

Showing 2 changed files with 6 additions and 1 deletion.
diff --git a/.changeset/small-beers-knock.md b/.changeset/small-beers-knock.md
@@ -0,0 +1,5 @@
+---
+'@keystone-6/core': patch
+---
+
+The label shown for a text field in the Admin UI is now associated with the input so the label can be read by screen readers
diff --git a/packages/core/src/fields/types/text/views/index.tsx b/packages/core/src/fields/types/text/views/index.tsx
@@ -24,7 +24,7 @@ export const Field = ({
   const validationMessages = validate(value, field.validation, field.label);
   return (
     <FieldContainer>
-      <FieldLabel>{field.label}</FieldLabel>
+      <FieldLabel htmlFor={field.path}>{field.label}</FieldLabel>
       {onChange ? (
         <Stack gap="small">
           {field.displayMode === 'textarea' ? (