From e595318cbe6352f930d3ead572528bf6d9b866b5 Mon Sep 17 00:00:00 2001
From: oscar-ip <136661790+oscar-ip@users.noreply.github.com>
Date: Wed, 16 Oct 2024 13:42:49 -0600
Subject: [PATCH] NERT-184 fixed keyboard navigation issue (#265)

Co-authored-by: Oscar Inostroza <oscar.inostroza@quartech.com>
---
 app/src/components/layout/Header.tsx                     | 2 +-
 app/src/features/admin/reports/AppCustomReportPage.tsx   | 3 ++-
 app/src/features/admin/reports/AppPiMgmtReportPage.tsx   | 3 ++-
 app/src/features/admin/reports/AppUserReportPage.tsx     | 3 ++-
 app/src/features/admin/users/UsersDetailHeader.tsx       | 3 ++-
 app/src/features/plans/create/CreatePlanPage.tsx         | 3 ++-
 app/src/features/plans/edit/EditPlanPage.tsx             | 3 ++-
 .../plans/participants/PlanParticipantsHeader.tsx        | 9 +++++++--
 app/src/features/projects/create/CreateProjectPage.tsx   | 4 +++-
 app/src/features/projects/edit/EditProjectPage.tsx       | 3 ++-
 .../projects/participants/ProjectParticipantsHeader.tsx  | 9 +++++++--
 11 files changed, 32 insertions(+), 13 deletions(-)

diff --git a/app/src/components/layout/Header.tsx b/app/src/components/layout/Header.tsx
index 235ea778..54834ad5 100644
--- a/app/src/components/layout/Header.tsx
+++ b/app/src/components/layout/Header.tsx
@@ -282,7 +282,7 @@ const Header: React.FC = () => {
             <IconButton
               aria-controls="simple-menu"
               aria-haspopup="true"
-              aria-label="need help"
+              aria-label="faq and help"
               sx={pageStyles.govHeaderIconButton}
               onClick={handleClick}
               size="large"
diff --git a/app/src/features/admin/reports/AppCustomReportPage.tsx b/app/src/features/admin/reports/AppCustomReportPage.tsx
index 39b99cad..7d3dba66 100644
--- a/app/src/features/admin/reports/AppCustomReportPage.tsx
+++ b/app/src/features/admin/reports/AppCustomReportPage.tsx
@@ -62,8 +62,9 @@ const AppCustomReportPage: React.FC = () => {
   return (
     <Container maxWidth="xl">
       <Box mt={1}>
-        <Breadcrumbs>
+        <Breadcrumbs aria-label="breadcrumb">
           <Link
+            component="button"
             color="primary"
             onClick={handleCancel}
             aria-current="page"
diff --git a/app/src/features/admin/reports/AppPiMgmtReportPage.tsx b/app/src/features/admin/reports/AppPiMgmtReportPage.tsx
index ecaf0792..ff774bb9 100644
--- a/app/src/features/admin/reports/AppPiMgmtReportPage.tsx
+++ b/app/src/features/admin/reports/AppPiMgmtReportPage.tsx
@@ -237,8 +237,9 @@ const AppPiMgmtReportPage: React.FC = () => {
   return (
     <Container maxWidth="xl">
       <Box mt={1}>
-        <Breadcrumbs>
+        <Breadcrumbs aria-label="breadcrumb">
           <Link
+            component="button"
             color="primary"
             onClick={handleCancel}
             aria-current="page"
diff --git a/app/src/features/admin/reports/AppUserReportPage.tsx b/app/src/features/admin/reports/AppUserReportPage.tsx
index 727f71f2..e033f13d 100644
--- a/app/src/features/admin/reports/AppUserReportPage.tsx
+++ b/app/src/features/admin/reports/AppUserReportPage.tsx
@@ -234,8 +234,9 @@ const AppUserReportPage: React.FC = () => {
   return (
     <Container maxWidth="xl">
       <Box mt={1}>
-        <Breadcrumbs>
+        <Breadcrumbs aria-label="breadcrumb">
           <Link
+            component="button"
             color="primary"
             onClick={handleCancel}
             aria-current="page"
diff --git a/app/src/features/admin/users/UsersDetailHeader.tsx b/app/src/features/admin/users/UsersDetailHeader.tsx
index 3f88377f..f2c9b304 100644
--- a/app/src/features/admin/users/UsersDetailHeader.tsx
+++ b/app/src/features/admin/users/UsersDetailHeader.tsx
@@ -111,8 +111,9 @@ const UsersDetailHeader: React.FC<IUsersHeaderProps> = (props) => {
   return (
     <>
       <Box pb={2}>
-        <Breadcrumbs>
+        <Breadcrumbs aria-label="breadcrumb">
           <Link
+            component="button"
             color="primary"
             onClick={() => history('/admin/users')}
             aria-current="page"
diff --git a/app/src/features/plans/create/CreatePlanPage.tsx b/app/src/features/plans/create/CreatePlanPage.tsx
index 24a055df..b5897dd2 100644
--- a/app/src/features/plans/create/CreatePlanPage.tsx
+++ b/app/src/features/plans/create/CreatePlanPage.tsx
@@ -365,8 +365,9 @@ const CreatePlanPage: React.FC = () => {
       />
 
       <Box mb={1} ml={3}>
-        <Breadcrumbs>
+        <Breadcrumbs aria-label="breadcrumb">
           <Link
+            component="button"
             color="primary"
             onClick={handleCancel}
             aria-current="page"
diff --git a/app/src/features/plans/edit/EditPlanPage.tsx b/app/src/features/plans/edit/EditPlanPage.tsx
index d0b3dccd..39194f04 100644
--- a/app/src/features/plans/edit/EditPlanPage.tsx
+++ b/app/src/features/plans/edit/EditPlanPage.tsx
@@ -241,8 +241,9 @@ const EditPlanPage: React.FC = () => {
       />
 
       <Box mb={1} ml={3}>
-        <Breadcrumbs>
+        <Breadcrumbs aria-label="breadcrumb">
           <Link
+            component="button"
             color="primary"
             onClick={handleCancel}
             aria-current="page"
diff --git a/app/src/features/plans/participants/PlanParticipantsHeader.tsx b/app/src/features/plans/participants/PlanParticipantsHeader.tsx
index 5891a805..dc77fe8b 100644
--- a/app/src/features/plans/participants/PlanParticipantsHeader.tsx
+++ b/app/src/features/plans/participants/PlanParticipantsHeader.tsx
@@ -86,11 +86,16 @@ const PlanParticipantsHeader: React.FC<IPlanParticipantsHeaderProps> = (props) =
     <>
       <Container maxWidth="xl">
         <Box pb={3}>
-          <Breadcrumbs>
-            <Link color="primary" onClick={() => history('/admin/plans')} aria-current="page">
+          <Breadcrumbs aria-label="breadcrumb">
+            <Link
+              component="button"
+              color="primary"
+              onClick={() => history('/admin/plans')}
+              aria-current="page">
               <Typography variant="body2">Plans</Typography>
             </Link>
             <Link
+              component="button"
               color="primary"
               onClick={() => history(`/admin/plans/${props.planWithDetails.project.project_id}`)}
               aria-current="page">
diff --git a/app/src/features/projects/create/CreateProjectPage.tsx b/app/src/features/projects/create/CreateProjectPage.tsx
index d5405fda..a6f9c41d 100644
--- a/app/src/features/projects/create/CreateProjectPage.tsx
+++ b/app/src/features/projects/create/CreateProjectPage.tsx
@@ -449,8 +449,10 @@ const CreateProjectPage: React.FC = () => {
       />
 
       <Box mb={1} ml={3}>
-        <Breadcrumbs>
+        <Breadcrumbs aria-label="breadcrumb">
           <Link
+            component="button"
+            tabIndex={0}
             color="primary"
             onClick={handleCancel}
             aria-current="page"
diff --git a/app/src/features/projects/edit/EditProjectPage.tsx b/app/src/features/projects/edit/EditProjectPage.tsx
index bed8dba6..7701f685 100644
--- a/app/src/features/projects/edit/EditProjectPage.tsx
+++ b/app/src/features/projects/edit/EditProjectPage.tsx
@@ -327,8 +327,9 @@ const EditProjectPage: React.FC = () => {
       />
 
       <Box mb={1} ml={3}>
-        <Breadcrumbs>
+        <Breadcrumbs aria-label="breadcrumb">
           <Link
+            component="button"
             color="primary"
             onClick={handleCancel}
             aria-current="page"
diff --git a/app/src/features/projects/participants/ProjectParticipantsHeader.tsx b/app/src/features/projects/participants/ProjectParticipantsHeader.tsx
index 61853c9c..c89ce86a 100644
--- a/app/src/features/projects/participants/ProjectParticipantsHeader.tsx
+++ b/app/src/features/projects/participants/ProjectParticipantsHeader.tsx
@@ -86,11 +86,16 @@ const ProjectParticipantsHeader: React.FC<IProjectParticipantsHeaderProps> = (pr
     <>
       <Container maxWidth="xl">
         <Box pb={3}>
-          <Breadcrumbs>
-            <Link color="primary" onClick={() => history('/admin/projects')} aria-current="page">
+          <Breadcrumbs aria-label="breadcrumb">
+            <Link
+              component="button"
+              color="primary"
+              onClick={() => history('/admin/projects')}
+              aria-current="page">
               <Typography variant="body2">Projects</Typography>
             </Link>
             <Link
+              component="button"
               color="primary"
               onClick={() => history(`/admin/projects/${urlParams['id']}/details`)}
               aria-current="page">