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

[Accessibility] fix accessibility issues for software templates

.changeset/gentle-walls-invent.md

@@ -0,0 +1,6 @@
+---
+'@backstage/plugin-scaffolder-react': patch
+'@backstage/plugin-scaffolder': patch
+---
+
+Accessibility issues identified using lighthouse fixed.

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

plugins/scaffolder/src/components/ActionsPage/ActionsPage.tsx

@@ -251,7 +251,9 @@ export const ActionsPage = () => {
 
     return (
       <>
-        <Typography variant="h6">{name}</Typography>
+        <Typography variant="h6" component="h4">
+          {name}
+        </Typography>
         {input.map((i, index) => (
           <div key={index}>
             {renderTable(
@@ -275,13 +277,15 @@ export const ActionsPage = () => {
     );
     return (
       <Box pb={4} key={action.id}>
-        <Typography variant="h4" className={classes.code}>
+        <Typography variant="h4" component="h2" className={classes.code}>
           {action.id}
         </Typography>
         {action.description && <MarkdownContent content={action.description} />}
         {action.schema?.input && (
           <Box pb={2}>
-            <Typography variant="h5">Input</Typography>
+            <Typography variant="h5" component="h3">
+              Input
+            </Typography>
             {renderTable(
               formatRows(`${action.id}.input`, action?.schema?.input),
             )}
@@ -290,7 +294,9 @@ export const ActionsPage = () => {
         )}
         {action.schema?.output && (
           <Box pb={2}>
-            <Typography variant="h5">Output</Typography>
+            <Typography variant="h5" component="h3">
+              Output
+            </Typography>
             {renderTable(
               formatRows(`${action.id}.output`, action?.schema?.output),
             )}
@@ -299,7 +305,9 @@ export const ActionsPage = () => {
         {action.examples && (
           <Accordion>
             <AccordionSummary expandIcon={<ExpandMoreIcon />}>
-              <Typography variant="h5">Examples</Typography>
+              <Typography variant="h5" component="h3">
+                Examples
+              </Typography>
             </AccordionSummary>
             <AccordionDetails>
               <Box pb={2}>

plugins/scaffolder/src/components/ListTasksPage/OwnerListPicker.tsx

@@ -99,16 +99,21 @@ export const OwnerListPicker = (props: {
     <Card className={classes.root}>
       {filterGroups.map(group => (
         <Fragment key={group.name}>
-          <Typography variant="subtitle2" className={classes.title}>
+          <Typography
+            variant="subtitle2"
+            component="span"
+            className={classes.title}
+          >
             {group.name}
           </Typography>
           <Card className={classes.groupWrapper}>
-            <List disablePadding dense>
+            <List disablePadding dense role="menu">
               {group.items.map(item => (
                 <MenuItem
                   key={item.id}
                   button
                   divider
+                  ContainerProps={{ role: 'menuitem' }}
                   onClick={() => onSelectOwner(item.id as 'owned' | 'all')}
                   selected={item.id === filter}
                   className={classes.menuItem}

plugins/scaffolder/src/components/MultistepJsonForm/MultistepJsonForm.tsx

@@ -172,7 +172,7 @@ export const MultistepJsonForm = (props: MultistepJsonFormProps) => {
                 aria-disabled="false"
                 tabIndex={0}
               >
-                <Typography variant="h6" component="h3">
+                <Typography variant="h6" component="h2">
                   {title}
                 </Typography>
               </StepLabel>

plugins/scaffolder/src/components/ScaffolderPage/ScaffolderPageContextMenu.tsx

@@ -77,9 +77,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"
@@ -88,6 +91,7 @@ export function ScaffolderPageContextMenu(
         <MoreVert />
       </IconButton>
       <Popover
+        aria-labelledby="long-menu"
         open={Boolean(anchorEl)}
         onClose={onClose}
         anchorEl={anchorEl}

plugins/scaffolder/src/components/TemplateEditorPage/CustomFieldExplorer.tsx

@@ -144,7 +144,7 @@ export const CustomFieldExplorer = ({
           </Select>
         </FormControl>
 
-        <IconButton size="medium" onClick={onClose}>
+        <IconButton size="medium" onClick={onClose} aria-label="Close">
           <CloseIcon />
         </IconButton>
       </div>

plugins/scaffolder/src/components/TemplateEditorPage/TemplateEditorIntro.tsx

@@ -59,7 +59,8 @@ export function TemplateEditorIntro(props: EditorIntroProps) {
       >
         <CardContent>
           <Typography
-            variant="h5"
+            variant="h4"
+            component="h3"
             gutterBottom
             color={supportsLoad ? undefined : 'textSecondary'}
             style={{ display: 'flex', flexFlow: 'row nowrap' }}
@@ -92,7 +93,7 @@ export function TemplateEditorIntro(props: EditorIntroProps) {
     <Card className={classes.card} elevation={4}>
       <CardActionArea onClick={() => props.onSelect?.('form')}>
         <CardContent>
-          <Typography variant="h5" gutterBottom>
+          <Typography variant="h4" component="h3" gutterBottom>
             Edit Template Form
           </Typography>
           <Typography variant="body1">
@@ -108,7 +109,7 @@ export function TemplateEditorIntro(props: EditorIntroProps) {
     <Card className={classes.card} elevation={4}>
       <CardActionArea onClick={() => props.onSelect?.('field-explorer')}>
         <CardContent>
-          <Typography variant="h5" gutterBottom>
+          <Typography variant="h4" component="h3" gutterBottom>
             Custom Field Explorer
           </Typography>
           <Typography variant="body1">
@@ -122,7 +123,7 @@ export function TemplateEditorIntro(props: EditorIntroProps) {
 
   return (
     <div style={props.style}>
-      <Typography variant="h6" className={classes.introText}>
+      <Typography variant="h4" component="h2" className={classes.introText}>
         Get started by choosing one of the options below
       </Typography>
       <div

plugins/scaffolder/src/components/TemplateEditorPage/TemplateFormPreviewer.tsx

@@ -194,7 +194,7 @@ export const TemplateFormPreviewer = ({
             </Select>
           </FormControl>
 
-          <IconButton size="medium" onClick={onClose}>
+          <IconButton size="medium" onClick={onClose} aria-label="Close">
             <CloseIcon />
           </IconButton>
         </div>

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

plugins/scaffolder/src/next/TemplateEditorPage/CustomFieldExplorer.tsx

@@ -140,7 +140,7 @@ export const CustomFieldExplorer = ({
           </Select>
         </FormControl>
 
-        <IconButton size="medium" onClick={onClose}>
+        <IconButton size="medium" onClick={onClose} aria-label="Close">
           <CloseIcon />
         </IconButton>
       </div>