From c0848d91b91aaa2f456d0fa962027715c0e9ee81 Mon Sep 17 00:00:00 2001
From: bagnishant <bagnishant@gmail.com>
Date: Wed, 28 Feb 2024 01:35:50 -0500
Subject: [PATCH] adding eslint-plugin-jsx-a11y plugin and making elements more
 accessible through aria-labels/key press functionality in conjunction with
 existing on click methods

---
 frontend/.eslintrc.json                       |  3 +-
 frontend/src/common/components/NavBarMain.tsx |  1 +
 frontend/src/features/LearnMod/ClassCard.tsx  |  2 +-
 .../src/features/LearnMod/ModulesSideBar.tsx  | 10 ++++
 .../Train/components/TrainspaceLayout.tsx     |  2 +-
 .../Image/components/ImageTrainspace.tsx      |  2 +-
 .../Tabular/components/TabularTrainspace.tsx  |  2 +-
 frontend/src/pages/learn.tsx                  |  2 +-
 frontend/src/pages/settings.tsx               | 58 +++++++++++++++++++
 9 files changed, 76 insertions(+), 6 deletions(-)

diff --git a/frontend/.eslintrc.json b/frontend/.eslintrc.json
index 3cdc60959..a6f96e8b3 100644
--- a/frontend/.eslintrc.json
+++ b/frontend/.eslintrc.json
@@ -17,7 +17,8 @@
   "extends": [
     "eslint:recommended",
     "plugin:@typescript-eslint/recommended",
-    "plugin:@next/next/recommended"
+    "plugin:@next/next/recommended",
+    "plugin:jsx-a11y/recommended"
   ],
   "rules": {
     "react/no-unescaped-entities": 0,
diff --git a/frontend/src/common/components/NavBarMain.tsx b/frontend/src/common/components/NavBarMain.tsx
index 579746a9f..eeb78e873 100644
--- a/frontend/src/common/components/NavBarMain.tsx
+++ b/frontend/src/common/components/NavBarMain.tsx
@@ -192,6 +192,7 @@ const NavbarMain = () => {
               )}
             </Grid>
             <FormControlLabel
+              aria-label = {`${theme.mode === "dark" ? "Button to toggle between light and dark mode; currently in dark mode" : "Button to toggle between light and dark mode; currently in light mode"}`}
               style={{
                 marginLeft: "auto",
                 marginRight: 0,
diff --git a/frontend/src/features/LearnMod/ClassCard.tsx b/frontend/src/features/LearnMod/ClassCard.tsx
index e8bc9d760..482be92f8 100644
--- a/frontend/src/features/LearnMod/ClassCard.tsx
+++ b/frontend/src/features/LearnMod/ClassCard.tsx
@@ -52,7 +52,7 @@ const ClassCard = (props: {
             }
           >
             <div className="circleInFill">
-              <span className="textInCircle">
+              <span className="textInCircle" aria-label="Module progress percentage">
                 {Math.floor((pointsEarned / points) * 100)}%
               </span>
             </div>
diff --git a/frontend/src/features/LearnMod/ModulesSideBar.tsx b/frontend/src/features/LearnMod/ModulesSideBar.tsx
index 118d08a50..7199bfc0f 100644
--- a/frontend/src/features/LearnMod/ModulesSideBar.tsx
+++ b/frontend/src/features/LearnMod/ModulesSideBar.tsx
@@ -41,6 +41,7 @@ const ModulesSideBar = () => {
                     return (
                       <li
                         className="sideBarSubsection"
+                        role="tab"
                         onClick={() =>
                           Router.push(
                             {
@@ -50,6 +51,15 @@ const ModulesSideBar = () => {
                             "/LearnContent"
                           )
                         }
+                        onKeyDown={() =>
+                          Router.push(
+                            {
+                              pathname: "/LearnContent",
+                              query: sectionSpec,
+                            },
+                            "/LearnContent"
+                          )
+                        }
                         key={index2}
                         style={{ color: "white" }}
                       >
diff --git a/frontend/src/features/Train/components/TrainspaceLayout.tsx b/frontend/src/features/Train/components/TrainspaceLayout.tsx
index 177bf2589..6ed7087f1 100644
--- a/frontend/src/features/Train/components/TrainspaceLayout.tsx
+++ b/frontend/src/features/Train/components/TrainspaceLayout.tsx
@@ -42,7 +42,7 @@ const TrainspaceLayout = ({
             >
               {code}
             </SyntaxHighlighter>
-            <IconButton style={{ position: "absolute", right: 15, top: 5 }}>
+            <IconButton style={{ position: "absolute", right: 15, top: 5 }} aria-label = "Copy code snippet">
               <ContentCopy />
             </IconButton>
           </Card>
diff --git a/frontend/src/features/Train/features/Image/components/ImageTrainspace.tsx b/frontend/src/features/Train/features/Image/components/ImageTrainspace.tsx
index f01623925..0fb9a9f59 100644
--- a/frontend/src/features/Train/features/Image/components/ImageTrainspace.tsx
+++ b/frontend/src/features/Train/features/Image/components/ImageTrainspace.tsx
@@ -153,7 +153,7 @@ const TrainspaceStepInner = ({
           </Button>
       }
       {
-        isButtonClicked ? <CircularProgress/> : null
+        isButtonClicked ? <CircularProgress aria-label="Loading"/> : null
       }
         </Stack>
       )}
diff --git a/frontend/src/features/Train/features/Tabular/components/TabularTrainspace.tsx b/frontend/src/features/Train/features/Tabular/components/TabularTrainspace.tsx
index 40aef3e08..6dcc74f31 100644
--- a/frontend/src/features/Train/features/Tabular/components/TabularTrainspace.tsx
+++ b/frontend/src/features/Train/features/Tabular/components/TabularTrainspace.tsx
@@ -99,7 +99,7 @@ const TrainspaceStepInner = ({
 
   let trainbuttontext: string | JSX.Element;
   if (isButtonClicked) {
-    trainbuttontext = <CircularProgress />;
+    trainbuttontext = <CircularProgress aria-label="Loading"/>;
   } else {
     if (step < TRAINSPACE_SETTINGS.steps.length - 1) {
       trainbuttontext = "Next";
diff --git a/frontend/src/pages/learn.tsx b/frontend/src/pages/learn.tsx
index d11173cc5..04ba6759f 100644
--- a/frontend/src/pages/learn.tsx
+++ b/frontend/src/pages/learn.tsx
@@ -37,7 +37,7 @@ const LearnMod = () => {
         <div className="classes">
           {content.map((lesson, index) => {
             //const moduleProgress = user.userProgressData[lesson.moduleID];
-
+            console.log(lesson);
             return (
               <ClassCard
                 user={user}
diff --git a/frontend/src/pages/settings.tsx b/frontend/src/pages/settings.tsx
index 911413fe9..411e8ecab 100644
--- a/frontend/src/pages/settings.tsx
+++ b/frontend/src/pages/settings.tsx
@@ -66,6 +66,8 @@ const SettingsBlock = () => {
       </Form.Group>
       <div
         className="email-buttons d-flex flex-column"
+        role = "button"
+        tabIndex={0}
         onClick={async () => {
           Promise.allSettled([
             (async () => {
@@ -122,6 +124,62 @@ const SettingsBlock = () => {
             })(),
           ]);
         }}
+        onKeyDown={async () => {
+          Promise.allSettled([
+            (async () => {
+              if (fullName) {
+                try {
+                  await dispatch(
+                    updateUserDisplayName({ displayName: fullName })
+                  ).unwrap();
+                  toast.success("Successfully updated display name", {
+                    position: toast.POSITION.TOP_CENTER,
+                  });
+                } catch (e) {
+                  toast.error(
+                    `Display name - ${(e as SerializedError).message}`,
+                    {
+                      position: toast.POSITION.TOP_CENTER,
+                    }
+                  );
+                }
+              }
+            })(),
+            (async () => {
+              if (email) {
+                try {
+                  await dispatch(updateUserEmail({ email })).unwrap();
+                  toast.success("Successfully updated email", {
+                    position: toast.POSITION.TOP_CENTER,
+                  });
+                } catch (e) {
+                  toast.error(`Email - ${(e as SerializedError).message}`, {
+                    position: toast.POSITION.TOP_CENTER,
+                  });
+                }
+              }
+            })(),
+            (async () => {
+              if (password) {
+                try {
+                  await dispatch(
+                    updateUserPassword({
+                      password,
+                      checkPassword,
+                    })
+                  ).unwrap();
+                  toast.success("Successfully updated password", {
+                    position: toast.POSITION.TOP_CENTER,
+                  });
+                } catch (e) {
+                  toast.error(`Password - ${(e as SerializedError).message}`, {
+                    position: toast.POSITION.TOP_CENTER,
+                  });
+                }
+              }
+            })(),
+          ]);
+        }}
       >
         <Button id="update-profile" className="mb-2">
           Update Profile