From bc1afaf9f42d475b58f88f3436358476a59d9f0b Mon Sep 17 00:00:00 2001
From: miguelrambalt <v-migueramirez@expediagroup.com>
Date: Wed, 7 Apr 2021 17:52:41 -0500
Subject: [PATCH] add accessibility for sighted users

Signed-off-by: miguelrambalt <v-migueramirez@expediagroup.com>
---
 .../components/MultistepJsonForm/MultistepJsonForm.tsx    | 8 ++++++--
 .../src/components/TemplateCard/TemplateCard.tsx          | 2 +-
 2 files changed, 7 insertions(+), 3 deletions(-)

diff --git a/plugins/scaffolder/src/components/MultistepJsonForm/MultistepJsonForm.tsx b/plugins/scaffolder/src/components/MultistepJsonForm/MultistepJsonForm.tsx
index 5354216bd9..58f5f5cd11 100644
--- a/plugins/scaffolder/src/components/MultistepJsonForm/MultistepJsonForm.tsx
+++ b/plugins/scaffolder/src/components/MultistepJsonForm/MultistepJsonForm.tsx
@@ -71,10 +71,14 @@ 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>
+              <StepLabel
+                aria-label={`Step ${index + 1} ${title}`}
+                aria-disabled="false"
+                tabIndex={0}
+              >
                 <Typography variant="h6" component="h3">
                   {title}
                 </Typography>
diff --git a/plugins/scaffolder/src/components/TemplateCard/TemplateCard.tsx b/plugins/scaffolder/src/components/TemplateCard/TemplateCard.tsx
index 25f89f20ab..2ba83fdaae 100644
--- a/plugins/scaffolder/src/components/TemplateCard/TemplateCard.tsx
+++ b/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>