Add missing for-attribute (#6249)

Co-authored-by: ichim-david <[email protected]>
plone · Sep 24, 2024 · 6429d49 · 6429d49
1 parent 08aab5a
commit 6429d49
Show file tree

Hide file tree

Showing 3 changed files with 10 additions and 2 deletions.
diff --git a/packages/volto/news/6249.bugfix b/packages/volto/news/6249.bugfix
@@ -0,0 +1 @@
+Add missing `for` attribute to checkbox label to improve accessibility. @gomez
diff --git a/packages/volto/src/components/manage/Blocks/Search/components/CheckboxFacet.jsx b/packages/volto/src/components/manage/Blocks/Search/components/CheckboxFacet.jsx
@@ -21,6 +21,7 @@ const CheckboxFacet = (props) => {
         {choices.map(({ label, value }, i) => (
           <div className="entry" key={value}>
             <Checkbox
+              id={value}
               disabled={isEditMode}
               label={label}
               radio={!isMulti}

diff --git a/.../src/components/manage/Blocks/Search/components/__snapshots__/CheckboxFacet.test.jsx.snap b/.../src/components/manage/Blocks/Search/components/__snapshots__/CheckboxFacet.test.jsx.snap
@@ -25,11 +25,14 @@ exports[`CheckboxFacet renders a facet component with checkboxes 1`] = `
         <input
           checked={false}
           className="hidden"
+          id="first"
           readOnly={true}
           tabIndex={0}
           type="checkbox"
         />
-        <label>
+        <label
+          htmlFor="first"
+        >
           First
         </label>
       </div>
@@ -47,11 +50,14 @@ exports[`CheckboxFacet renders a facet component with checkboxes 1`] = `
         <input
           checked={false}
           className="hidden"
+          id="second"
           readOnly={true}
           tabIndex={0}
           type="checkbox"
         />
-        <label>
+        <label
+          htmlFor="second"
+        >
           Second
         </label>
       </div>