Add missing for-attribute and (hidden) label to input

plone · Aug 12, 2024 · 4936689 · 4936689
1 parent 86d9a50
commit 4936689
Show file tree

Hide file tree

Showing 3 changed files with 6 additions and 3 deletions.
diff --git a/packages/components/news/6249.fix b/packages/components/news/6249.fix
@@ -0,0 +1 @@
+Add missing for-attribute to checkbox * label to input (a11y). - @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,8 +21,10 @@ const CheckboxFacet = (props) => {
         {choices.map(({ label, value }, i) => (
           <div className="entry" key={value}>
             <Checkbox
+              id={value}
               disabled={isEditMode}
               label={label}
+              htmlFor={value}
               radio={!isMulti}
               checked={
                 isMulti

diff --git a/packages/volto/src/components/manage/Blocks/Search/components/SearchInput.jsx b/packages/volto/src/components/manage/Blocks/Search/components/SearchInput.jsx
@@ -22,15 +22,15 @@ const SearchInput = (props) => {
     removeSearchQuery,
   } = props;
   const intl = useIntl();
+  const label = data.searchInputPrompt || intl.formatMessage(messages.search);
 
   return (
     <div className="search-input">
       <Input
         id={`${props.id}-searchtext`}
         value={searchText}
-        placeholder={
-          data.searchInputPrompt || intl.formatMessage(messages.search)
-        }
+        aria-label={label}
+        placeholder={label}
         fluid
         onKeyPress={(event) => {
           if (isLive || event.key === 'Enter') onTriggerSearch(searchText);
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1 @@
		Add missing for-attribute to checkbox * label to input (a11y). - @gomez