separate semantics from styling to keep heading levels

Signed-off-by: Emma Indal <emma.indahl@gmail.com>

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,7 +99,11 @@ 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}>

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