Merge pull request #5258 from gtzefrain/accessibility/scaffolder-plugin-headings

Accessibility: Scaffolder Headings adjustments

.changeset/flat-paws-rule.md

@@ -0,0 +1,6 @@
+---
+'@backstage/core': patch
+'@backstage/plugin-scaffolder': patch
+---
+
+Adding Headings for Accessibility on the Scaffolder Plugin

packages/core/src/components/Lifecycle/Lifecycle.tsx

@@ -25,7 +25,7 @@ type Props = CSS.Properties & {
 
 const useStyles = makeStyles({
   alpha: {
-    color: '#d00150',
+    color: '#ffffff',
     fontFamily: 'serif',
     fontWeight: 'normal',
     fontStyle: 'italic',

packages/core/src/layout/ContentHeader/ContentHeader.tsx

@@ -66,7 +66,12 @@ const DefaultTitle = ({
   title = 'Unknown page',
   className,
 }: DefaultTitleProps) => (
-  <Typography variant="h4" className={className} data-testid="header-title">
+  <Typography
+    variant="h4"
+    component="h2"
+    className={className}
+    data-testid="header-title"
+  >
     {title}
   </Typography>
 );

packages/core/src/layout/Header/Header.tsx

@@ -140,7 +140,7 @@ const TypeFragment = ({
 
 const TitleFragment = ({ pageTitle, classes, tooltip }: TitleFragmentProps) => {
   const FinalTitle = (
-    <Typography className={classes.title} variant="h4">
+    <Typography className={classes.title} variant="h1">
       {pageTitle}
     </Typography>
   );
@@ -166,7 +166,11 @@ const SubtitleFragment = ({ classes, subtitle }: SubtitleFragmentProps) => {
   }
 
   return (
-    <Typography className={classes.subtitle} variant="subtitle2">
+    <Typography
+      className={classes.subtitle}
+      variant="subtitle2"
+      component="span"
+    >
       {subtitle}
     </Typography>
   );

packages/core/src/layout/InfoCard/InfoCard.tsx

@@ -125,6 +125,7 @@ type Props = {
   actionsTopRight?: ReactNode;
   className?: string;
   noPadding?: boolean;
+  titleTypographyProps?: object;
 };
 
 export const InfoCard = ({
@@ -143,6 +144,7 @@ export const InfoCard = ({
   actionsTopRight,
   className,
   noPadding,
+  titleTypographyProps,
 }: Props): JSX.Element => {
   const classes = useStyles();
   /**
@@ -183,6 +185,7 @@ export const InfoCard = ({
             title={title}
             subheader={subheader}
             style={{ ...headerStyle }}
+            titleTypographyProps={titleTypographyProps}
             {...headerProps}
           />
         )}

packages/core/src/layout/ItemCard/ItemCardHeader.tsx

@@ -77,8 +77,16 @@ export const ItemCardHeader = (props: ItemCardHeaderProps) => {
   const classes = useStyles(props);
   return (
     <div className={classes.root}>
-      {subtitle && <Typography variant="subtitle2">{subtitle}</Typography>}
-      {title && <Typography variant="h6">{title}</Typography>}
+      {subtitle && (
+        <Typography variant="subtitle2" component="h3">
+          {subtitle}
+        </Typography>
+      )}
+      {title && (
+        <Typography variant="h6" component="h4">
+          {title}
+        </Typography>
+      )}
       {children}
     </div>
   );

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

@@ -71,11 +71,17 @@ export const MultistepJsonForm = ({
   return (
     <>
       <Stepper activeStep={activeStep} orientation="vertical">
-        {steps.map(({ title, schema, ...formProps }) => {
+        {steps.map(({ title, schema, ...formProps }, index) => {
           return (
             <StepUI key={title}>
-              <StepLabel>
-                <Typography variant="h6">{title}</Typography>
+              <StepLabel
+                aria-label={`Step ${index + 1} ${title}`}
+                aria-disabled="false"
+                tabIndex={0}
+              >
+                <Typography variant="h6" component="h3">
+                  {title}
+                </Typography>
               </StepLabel>
               <StepContent key={title}>
                 <Form

plugins/scaffolder/src/components/TemplateCard/TemplateCard.tsx

@@ -85,7 +85,7 @@ export const TemplateCard = ({
         <Box className={classes.description}>{description}</Box>
       </CardContent>
       <CardActions>
-        <Button color="primary" to={href}>
+        <Button color="primary" to={href} aria-label={`Choose ${title} `}>
           Choose
         </Button>
       </CardActions>

plugins/scaffolder/src/components/TemplatePage/TemplatePage.tsx

@@ -187,7 +187,11 @@ export const TemplatePage = () => {
       <Content>
         {loading && <LinearProgress data-testid="loading-progress" />}
         {schema && (
-          <InfoCard title={schema.title} noPadding>
+          <InfoCard
+            title={schema.title}
+            noPadding
+            titleTypographyProps={{ component: 'h2' }}
+          >
             <MultistepJsonForm
               formData={formState}
               fields={{ RepoUrlPicker, OwnerPicker }}