fix label for template type picker

Signed-off-by: Emma Indal <emma.indahl@gmail.com>
2023-04-06 14:56:54 +02:00
parent 90560e118d
commit eb8df1dd8b
2 changed files with 16 additions and 4 deletions
@@ -58,10 +58,16 @@ export const TemplateCategoryPicker = () => {

  return (
    <Box pb={1} pt={1}>
-      <Typography variant="button">Categories</Typography>
+      <Typography
+        variant="button"
+        component="label"
+        htmlFor="categories-picker"
+      >
+        Categories
+      </Typography>
      <Autocomplete
        multiple
-        aria-label="Categories"
+        id="categories-picker"
        options={availableTypes}
        value={selectedTypes}
        onChange={(_: object, value: string[]) => setSelectedTypes(value)}
@@ -58,10 +58,16 @@ export const TemplateTypePicker = () => {

  return (
    <Box pb={1} pt={1}>
-      <Typography variant="button">Categories</Typography>
+      <Typography
+        variant="button"
+        component="label"
+        htmlFor="categories-picker"
+      >
+        Categories
+      </Typography>
      <Autocomplete
+        id="categories-picker"
        multiple
-        aria-label="Categories"
        options={availableTypes}
        value={selectedTypes}
        onChange={(_: object, value: string[]) => setSelectedTypes(value)}