From eb8df1dd8b1b92138cfedb30c771905149845e10 Mon Sep 17 00:00:00 2001
From: Emma Indal <emma.indahl@gmail.com>
Date: Thu, 6 Apr 2023 14:56:54 +0200
Subject: [PATCH] fix label for template type picker

Signed-off-by: Emma Indal <emma.indahl@gmail.com>
---
 .../TemplateCategoryPicker/TemplateCategoryPicker.tsx  | 10 ++++++++--
 .../TemplateTypePicker/TemplateTypePicker.tsx          | 10 ++++++++--
 2 files changed, 16 insertions(+), 4 deletions(-)

diff --git a/plugins/scaffolder-react/src/next/components/TemplateCategoryPicker/TemplateCategoryPicker.tsx b/plugins/scaffolder-react/src/next/components/TemplateCategoryPicker/TemplateCategoryPicker.tsx
index 028ce3a701..b850c3bcfe 100644
--- a/plugins/scaffolder-react/src/next/components/TemplateCategoryPicker/TemplateCategoryPicker.tsx
+++ b/plugins/scaffolder-react/src/next/components/TemplateCategoryPicker/TemplateCategoryPicker.tsx
@@ -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)}
diff --git a/plugins/scaffolder/src/components/TemplateTypePicker/TemplateTypePicker.tsx b/plugins/scaffolder/src/components/TemplateTypePicker/TemplateTypePicker.tsx
index e7c2c965f2..88ddef2b92 100644
--- a/plugins/scaffolder/src/components/TemplateTypePicker/TemplateTypePicker.tsx
+++ b/plugins/scaffolder/src/components/TemplateTypePicker/TemplateTypePicker.tsx
@@ -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)}