Fix: Associate labels with input fields of File and Checkbox Widget

plone · Jan 15, 2025 · 6bd7de3 · 6bd7de3
1 parent 6f6f98f
commit 6bd7de3
Show file tree

Hide file tree

Showing 5 changed files with 8 additions and 1 deletion.
diff --git a/packages/volto/news/6341.bugfix b/packages/volto/news/6341.bugfix
@@ -0,0 +1 @@
+The input fields in FileWidget and CheckboxWidget are now programmatically associated with their labels, improving accessibility. Previously, the labels were not linked to their corresponding input fields. @Abhishek-17h
diff --git a/packages/volto/src/components/manage/Widgets/CheckboxWidget.jsx b/packages/volto/src/components/manage/Widgets/CheckboxWidget.jsx
@@ -31,6 +31,7 @@ const CheckboxWidget = (props) => {
     <FormFieldWrapper {...props} columns={1}>
       <div className="wrapper">
         <Checkbox
+          id={`field-${id}`}
           name={`field-${id}`}
           checked={value || false}
           disabled={isDisabled}

diff --git a/packages/volto/src/components/manage/Widgets/FileWidget.jsx b/packages/volto/src/components/manage/Widgets/FileWidget.jsx
@@ -154,7 +154,7 @@ const FileWidget = (props) => {
               </div>
             )}
 
-            <label className="label-file-widget-input">
+            <label htmlFor={`field-${id}`} className="label-file-widget-input">
               {value
                 ? intl.formatMessage(messages.replaceFile)
                 : intl.formatMessage(messages.addNewFile)}

diff --git a/packages/volto/src/components/manage/Widgets/__snapshots__/CheckboxWidget.test.jsx.snap b/packages/volto/src/components/manage/Widgets/__snapshots__/CheckboxWidget.test.jsx.snap
@@ -22,6 +22,7 @@ exports[`CheckboxWidget renders a checkbox widget component 1`] = `
             >
               <input
                 class="hidden"
+                id="field-my-field"
                 name="field-my-field"
                 readonly=""
                 tabindex="0"
@@ -65,6 +66,7 @@ exports[`CheckboxWidget renders a checkbox widget component checked 1`] = `
               <input
                 checked=""
                 class="hidden"
+                id="field-my-field"
                 name="field-my-field"
                 readonly=""
                 tabindex="0"

diff --git a/packages/volto/src/components/manage/Widgets/__snapshots__/FileWidget.test.jsx.snap b/packages/volto/src/components/manage/Widgets/__snapshots__/FileWidget.test.jsx.snap
@@ -39,6 +39,7 @@ exports[`FileWidget renders a file widget component with value 1`] = `
             />
             <label
               class="label-file-widget-input"
+              for="field-my-field"
             >
               Replace existing file
             </label>
@@ -122,6 +123,7 @@ exports[`FileWidget renders a file widget component with value in raw data 1`] =
             />
             <label
               class="label-file-widget-input"
+              for="field-my-field"
             >
               Replace existing file
             </label>
@@ -208,6 +210,7 @@ exports[`FileWidget renders an empty file widget component 1`] = `
             </div>
             <label
               class="label-file-widget-input"
+              for="field-my-field"
             >
               Choose a file
             </label>
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1 @@
		The input fields in FileWidget and CheckboxWidget are now programmatically associated with their labels, improving accessibility. Previously, the labels were not linked to their corresponding input fields. @Abhishek-17h