From ba43ff68edf7b56ecb9bea8d1dd8e4252a4f9f02 Mon Sep 17 00:00:00 2001
From: Wagner Trezub <60133113+Wagner3UB@users.noreply.github.com>
Date: Wed, 5 Mar 2025 06:55:23 +0100
Subject: [PATCH] Add id to Checkbox component to proper a11y identification
 (#6771)

Co-authored-by: Giulia Ghisini <51911425+giuliaghisini@users.noreply.github.com>
---
 news/6771.bugfix                                                | 1 +
 .../LeadImage/__snapshots__/LeadImageSidebar.test.jsx.snap      | 1 +
 src/components/manage/Widgets/CheckboxWidget.jsx                | 1 +
 .../manage/Widgets/__snapshots__/CheckboxWidget.test.jsx.snap   | 2 ++
 4 files changed, 5 insertions(+)
 create mode 100644 news/6771.bugfix

diff --git a/news/6771.bugfix b/news/6771.bugfix
new file mode 100644
index 0000000000..5e1b1ac2ff
--- /dev/null
+++ 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
index 80485227f7..b89f8f597c 100644
--- 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
index b787a2557b..110a496f46 100644
--- 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
index fe2a7b4842..a2c0132a86 100644
--- 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"