From 944a1da024a3b61070004ae917895f78a9099e15 Mon Sep 17 00:00:00 2001
From: Abhishek-17H <abhishekhegaje1702@gmail.com>
Date: Wed, 15 Jan 2025 10:16:10 +0530
Subject: [PATCH 1/2] Fix: Associate labels with input fields of File and
 Checkbox Widget

---
 packages/volto/news/6341.bugfix                                | 1 +
 .../volto/src/components/manage/Widgets/CheckboxWidget.jsx     | 1 +
 packages/volto/src/components/manage/Widgets/FileWidget.jsx    | 2 +-
 .../manage/Widgets/__snapshots__/CheckboxWidget.test.jsx.snap  | 2 ++
 .../manage/Widgets/__snapshots__/FileWidget.test.jsx.snap      | 3 +++
 5 files changed, 8 insertions(+), 1 deletion(-)
 create mode 100644 packages/volto/news/6341.bugfix

diff --git a/packages/volto/news/6341.bugfix b/packages/volto/news/6341.bugfix
new file mode 100644
index 0000000000..501e3ce2fa
--- /dev/null
+++ 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
\ No newline at end of file
diff --git a/packages/volto/src/components/manage/Widgets/CheckboxWidget.jsx b/packages/volto/src/components/manage/Widgets/CheckboxWidget.jsx
index aeefdaf6d2..885821e0a5 100644
--- 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
index 9579711224..a552cf5337 100644
--- 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
index fe2a7b4842..a2c0132a86 100644
--- 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
index 72f5467cb7..d57063bc63 100644
--- 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>

From da0f8fe28023ca26ade7df9f734e4d9b9e21b69f Mon Sep 17 00:00:00 2001
From: Abhishek-17H <abhishekhegaje1702@gmail.com>
Date: Wed, 15 Jan 2025 14:37:17 +0530
Subject: [PATCH 2/2] Fix duplicate id issue in FileWidget and CheckboxWidget
 tests

---
 .../manage/Widgets/CheckboxWidget.test.jsx    | 10 ++--
 .../manage/Widgets/FileWidget.test.jsx        | 12 ++---
 .../CheckboxWidget.test.jsx.snap              | 20 ++++----
 .../__snapshots__/FileWidget.test.jsx.snap    | 46 +++++++++----------
 4 files changed, 46 insertions(+), 42 deletions(-)

diff --git a/packages/volto/src/components/manage/Widgets/CheckboxWidget.test.jsx b/packages/volto/src/components/manage/Widgets/CheckboxWidget.test.jsx
index bb752a9813..28a722977d 100644
--- a/packages/volto/src/components/manage/Widgets/CheckboxWidget.test.jsx
+++ b/packages/volto/src/components/manage/Widgets/CheckboxWidget.test.jsx
@@ -18,7 +18,11 @@ describe('CheckboxWidget', () => {
 
     const { asFragment } = render(
       <Provider store={store}>
-        <CheckboxWidget id="my-field" title="My field" onChange={() => {}} />
+        <CheckboxWidget
+          id="checkbox-widget"
+          title="Checkbox Widget"
+          onChange={() => {}}
+        />
       </Provider>,
     );
 
@@ -37,8 +41,8 @@ describe('CheckboxWidget', () => {
       <Provider store={store}>
         <CheckboxWidget
           value={true}
-          id="my-field"
-          title="My field"
+          id="checked-checkbox-widget"
+          title="Checked Checkbox Widget"
           onChange={() => {}}
         />
       </Provider>,
diff --git a/packages/volto/src/components/manage/Widgets/FileWidget.test.jsx b/packages/volto/src/components/manage/Widgets/FileWidget.test.jsx
index f003c1b8c7..2797d7ea36 100644
--- a/packages/volto/src/components/manage/Widgets/FileWidget.test.jsx
+++ b/packages/volto/src/components/manage/Widgets/FileWidget.test.jsx
@@ -21,8 +21,8 @@ describe('FileWidget', () => {
     const { container } = render(
       <Provider store={store}>
         <FileWidget
-          id="my-field"
-          title="My field"
+          id="empty-file-widget"
+          title="Empty File Widget"
           fieldSet="default"
           onChange={() => {}}
         />
@@ -43,8 +43,8 @@ describe('FileWidget', () => {
     const { container } = render(
       <Provider store={store}>
         <FileWidget
-          id="my-field"
-          title="My field"
+          id="file-widget-with-value"
+          title="File Widget With Value"
           fieldSet="default"
           onChange={() => {}}
           value={{
@@ -71,8 +71,8 @@ describe('FileWidget', () => {
     const { container } = render(
       <Provider store={store}>
         <FileWidget
-          id="my-field"
-          title="My field"
+          id="file-widget-raw-data"
+          title="File Widget With Raw Data"
           fieldSet="default"
           onChange={() => {}}
           value={{
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
index a2c0132a86..ab1f1b8be6 100644
--- a/packages/volto/src/components/manage/Widgets/__snapshots__/CheckboxWidget.test.jsx.snap
+++ b/packages/volto/src/components/manage/Widgets/__snapshots__/CheckboxWidget.test.jsx.snap
@@ -3,7 +3,7 @@
 exports[`CheckboxWidget renders a checkbox widget component 1`] = `
 <DocumentFragment>
   <div
-    class="inline field field-wrapper-my-field"
+    class="inline field field-wrapper-checkbox-widget"
   >
     <div
       class="ui grid"
@@ -22,17 +22,17 @@ exports[`CheckboxWidget renders a checkbox widget component 1`] = `
             >
               <input
                 class="hidden"
-                id="field-my-field"
-                name="field-my-field"
+                id="field-checkbox-widget"
+                name="field-checkbox-widget"
                 readonly=""
                 tabindex="0"
                 type="checkbox"
                 value=""
               />
               <label
-                for="field-my-field"
+                for="field-checkbox-widget"
               >
-                My field
+                Checkbox Widget
               </label>
             </div>
           </div>
@@ -46,7 +46,7 @@ exports[`CheckboxWidget renders a checkbox widget component 1`] = `
 exports[`CheckboxWidget renders a checkbox widget component checked 1`] = `
 <DocumentFragment>
   <div
-    class="inline field field-wrapper-my-field"
+    class="inline field field-wrapper-checked-checkbox-widget"
   >
     <div
       class="ui grid"
@@ -66,17 +66,17 @@ exports[`CheckboxWidget renders a checkbox widget component checked 1`] = `
               <input
                 checked=""
                 class="hidden"
-                id="field-my-field"
-                name="field-my-field"
+                id="field-checked-checkbox-widget"
+                name="field-checked-checkbox-widget"
                 readonly=""
                 tabindex="0"
                 type="checkbox"
                 value=""
               />
               <label
-                for="field-my-field"
+                for="field-checked-checkbox-widget"
               >
-                My field
+                Checked Checkbox Widget
               </label>
             </div>
           </div>
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
index d57063bc63..4cd703dcbf 100644
--- a/packages/volto/src/components/manage/Widgets/__snapshots__/FileWidget.test.jsx.snap
+++ b/packages/volto/src/components/manage/Widgets/__snapshots__/FileWidget.test.jsx.snap
@@ -3,7 +3,7 @@
 exports[`FileWidget renders a file widget component with value 1`] = `
 <div>
   <div
-    class="inline field field-wrapper-my-field"
+    class="inline field field-wrapper-file-widget-with-value"
   >
     <div
       class="ui grid"
@@ -18,10 +18,10 @@ exports[`FileWidget renders a file widget component with value 1`] = `
             class="wrapper"
           >
             <label
-              for="field-my-field"
-              id="fieldset-default-field-label-my-field"
+              for="field-file-widget-with-value"
+              id="fieldset-default-field-label-file-widget-with-value"
             >
-              My field
+              File Widget With Value
             </label>
           </div>
         </div>
@@ -34,20 +34,20 @@ exports[`FileWidget renders a file widget component with value 1`] = `
           >
             <img
               class="ui small image image-preview"
-              id="field-my-field-image"
+              id="field-file-widget-with-value-image"
               src="http://myfile?id=0"
             />
             <label
               class="label-file-widget-input"
-              for="field-my-field"
+              for="field-file-widget-with-value"
             >
               Replace existing file
             </label>
             <input
               autocomplete="off"
-              id="field-my-field"
+              id="field-file-widget-with-value"
               multiple=""
-              name="my-field"
+              name="file-widget-with-value"
               style="display: none;"
               tabindex="-1"
               type="file"
@@ -87,7 +87,7 @@ exports[`FileWidget renders a file widget component with value 1`] = `
 exports[`FileWidget renders a file widget component with value in raw data 1`] = `
 <div>
   <div
-    class="inline field field-wrapper-my-field"
+    class="inline field field-wrapper-file-widget-raw-data"
   >
     <div
       class="ui grid"
@@ -102,10 +102,10 @@ exports[`FileWidget renders a file widget component with value in raw data 1`] =
             class="wrapper"
           >
             <label
-              for="field-my-field"
-              id="fieldset-default-field-label-my-field"
+              for="field-file-widget-raw-data"
+              id="fieldset-default-field-label-file-widget-raw-data"
             >
-              My field
+              File Widget With Raw Data
             </label>
           </div>
         </div>
@@ -118,20 +118,20 @@ exports[`FileWidget renders a file widget component with value in raw data 1`] =
           >
             <img
               class="ui small image image-preview"
-              id="field-my-field-image"
+              id="field-file-widget-raw-data-image"
               src="data:image/png;base64,oiweurtksdgfjaslfqw9523563456"
             />
             <label
               class="label-file-widget-input"
-              for="field-my-field"
+              for="field-file-widget-raw-data"
             >
               Replace existing file
             </label>
             <input
               autocomplete="off"
-              id="field-my-field"
+              id="field-file-widget-raw-data"
               multiple=""
-              name="my-field"
+              name="file-widget-raw-data"
               style="display: none;"
               tabindex="-1"
               type="file"
@@ -170,7 +170,7 @@ exports[`FileWidget renders a file widget component with value in raw data 1`] =
 exports[`FileWidget renders an empty file widget component 1`] = `
 <div>
   <div
-    class="inline field field-wrapper-my-field"
+    class="inline field field-wrapper-empty-file-widget"
   >
     <div
       class="ui grid"
@@ -185,10 +185,10 @@ exports[`FileWidget renders an empty file widget component 1`] = `
             class="wrapper"
           >
             <label
-              for="field-my-field"
-              id="fieldset-default-field-label-my-field"
+              for="field-empty-file-widget"
+              id="fieldset-default-field-label-empty-file-widget"
             >
-              My field
+              Empty File Widget
             </label>
           </div>
         </div>
@@ -210,15 +210,15 @@ exports[`FileWidget renders an empty file widget component 1`] = `
             </div>
             <label
               class="label-file-widget-input"
-              for="field-my-field"
+              for="field-empty-file-widget"
             >
               Choose a file
             </label>
             <input
               autocomplete="off"
-              id="field-my-field"
+              id="field-empty-file-widget"
               multiple=""
-              name="my-field"
+              name="empty-file-widget"
               style="display: none;"
               tabindex="-1"
               type="file"