Add id to Checkbox component to proper a11y identification (#6771)

Co-authored-by: Giulia Ghisini <[email protected]>
plone · Mar 5, 2025 · ba43ff6 · ba43ff6
1 parent 583e3b2
commit ba43ff6
Show file tree

Hide file tree

Showing 4 changed files with 5 additions and 0 deletions.
diff --git a/news/6771.bugfix b/news/6771.bugfix
@@ -0,0 +1 @@
+a11y - Added id attribute to checkbox widget for proper identification and fixes label functionality for screen readers. @Wagner3UB
diff --git a/src/components/manage/Blocks/LeadImage/__snapshots__/LeadImageSidebar.test.jsx.snap b/src/components/manage/Blocks/LeadImage/__snapshots__/LeadImageSidebar.test.jsx.snap
@@ -387,6 +387,7 @@ exports[`renders a Lead Image block Sidebar component 1`] = `
                   <input
                     checked={false}
                     className="hidden"
+                    id="field-openLinkInNewTab"
                     name="field-openLinkInNewTab"
                     readOnly={true}
                     tabIndex={0}

diff --git a/src/components/manage/Widgets/CheckboxWidget.jsx b/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/src/components/manage/Widgets/__snapshots__/CheckboxWidget.test.jsx.snap b/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"
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1 @@
		a11y - Added id attribute to checkbox widget for proper identification and fixes label functionality for screen readers. @Wagner3UB