Add aria-labelled by to dropdowns (#55)

miljodir · Dec 14, 2023 · 4aadd16 · 4aadd16
1 parent 30c4bb0
commit 4aadd16
Show file tree

Hide file tree

Showing 4 changed files with 24 additions and 5 deletions.
diff --git a/packages/react/package.json b/packages/react/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@miljodirektoratet/md-react",
-  "version": "1.0.36",
+  "version": "1.0.37",
   "description": "React-komponenter for Miljødirektoratet",
   "author": "Miljødirektoratet",
   "main": "./dist/index.js",

diff --git a/packages/react/src/formElements/MdAutocomplete.tsx b/packages/react/src/formElements/MdAutocomplete.tsx
@@ -108,7 +108,11 @@ const MdAutocomplete = React.forwardRef<HTMLInputElement, MdAutocompleteProps>(
     return (
       <div className={classNames}>
         <div className="md-autocomplete__label">
-          {label && label !== '' && <label htmlFor={`md-autocomplete_${uuid}`}>{label}</label>}
+          {label && label !== '' && (
+            <label id={`md-autocomplete_label_${uuid}`} htmlFor={`md-autocomplete_${uuid}`}>
+              {label}
+            </label>
+          )}
           {helpText && helpText !== '' && (
             <div className="md-autocomplete__help-button">
               <MdHelpButton
@@ -192,7 +196,12 @@ const MdAutocomplete = React.forwardRef<HTMLInputElement, MdAutocompleteProps>(
           </div>
 
           {options && options.length > 0 && (
-            <div role="listbox" id={'md-autocomplete__dropdown_${uuid}'} className="md-autocomplete__dropdown">
+            <div
+              aria-labelledby={`md-autocomplete_label_${uuid}`}
+              role="listbox"
+              id={'md-autocomplete__dropdown_${uuid}'}
+              className="md-autocomplete__dropdown"
+            >
               {(autocompleteValue ? results : defaultOptions ? defaultOptions : options ? options : []).map(option => {
                 return (
                   <button

diff --git a/packages/react/src/formElements/MdMultiSelect.tsx b/packages/react/src/formElements/MdMultiSelect.tsx
@@ -201,7 +201,12 @@ const MdMultiSelect: React.FunctionComponent<MdMultiSelectProps> = ({
         </button>
 
         {options && options.length > 0 && (
-          <div role="listbox" id={'md-multiselect_dropdown_${uuid}'} className={dropDownClassNames}>
+          <div
+            aria-labelledby={`md-multiselect_label_${uuid}`}
+            role="listbox"
+            id={'md-multiselect_dropdown_${uuid}'}
+            className={dropDownClassNames}
+          >
             {options.map(option => {
               return (
                 <div key={`checkbox_key_${uuid}_${option.value}`} className={optionClass(option)}>

diff --git a/packages/react/src/formElements/MdSelect.tsx b/packages/react/src/formElements/MdSelect.tsx
@@ -185,7 +185,12 @@ const MdSelect = React.forwardRef<HTMLButtonElement, MdSelectProps>(
           </button>
 
           {options && options.length > 0 && (
-            <div role="listbox" className="md-select__dropdown" id={'md-select_dropdown_${uuid}'}>
+            <div
+              aria-labelledby={`md-select_label_${uuid}`}
+              role="listbox"
+              className="md-select__dropdown"
+              id={'md-select_dropdown_${uuid}'}
+            >
               {options.map(option => {
                 return (
                   <button