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

Accessibility: Scaffolder Headings adjustments

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