Merge pull request #17279 from backstage/a11y/software-templates

[Accessibility] fix accessibility issues for software templates

plugins/scaffolder-react/src/next/components/ScaffolderPageContextMenu/ScaffolderPageContextMenu.tsx

@@ -68,9 +68,12 @@ export function ScaffolderPageContextMenu(
   return (
     <>
       <IconButton
+        id="long-menu"
         aria-label="more"
         aria-controls="long-menu"
+        aria-expanded={!!anchorEl}
         aria-haspopup="true"
+        role="button"
         onClick={onOpen}
         data-testid="menu-button"
         color="inherit"
@@ -79,6 +82,7 @@ export function ScaffolderPageContextMenu(
         <MoreVert />
       </IconButton>
       <Popover
+        aria-labelledby="long-menu"
         open={Boolean(anchorEl)}
         onClose={onClose}
         anchorEl={anchorEl}

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)}