Re-add jsx-a11y and accessibility fixes

site/.eslintrc.cjs

@@ -7,6 +7,7 @@ module.exports = {
     'plugin:react/recommended',
     'plugin:react/jsx-runtime',
     'plugin:react-hooks/recommended',
+    'plugin:jsx-a11y/recommended',
   ],
   ignorePatterns: ['dist', '.eslintrc.cjs'],
   parser: '@typescript-eslint/parser',
@@ -21,4 +22,9 @@ module.exports = {
       version: 'detect',
     },
   },
+  settings: {
+    react: {
+      version: 'detect',
+    },
+  },
 };

site/package.json

@@ -56,6 +56,7 @@
     "@typescript-eslint/parser": "^6.0.0",
     "@vitejs/plugin-react": "^4.0.3",
     "eslint": "^8.45.0",
+    "eslint-plugin-jsx-a11y": "^6.8.0",
     "eslint-plugin-react": "^7.33.2",
     "eslint-plugin-react-hooks": "^4.6.0",
     "eslint-plugin-react-refresh": "^0.4.3",

site/src/component/AppHeader/Profile.scss

@@ -11,6 +11,12 @@
   }
 }
 
+.profile-button {
+  background: none;
+  border: none;
+  height: 100%;
+}
+
 #profile-popover {
   font-size: 1rem;
   padding: 1em;

site/src/component/AppHeader/Profile.tsx

@@ -144,7 +144,11 @@ const Profile = () => {
               ],
             }}
           >
-            <img src={picture} alt={name} className="navbar-profile-pic" />
+            {({ ref, ...triggerHandler }) => (
+              <button {...triggerHandler} className="profile-button">
+                <img ref={ref} src={picture} alt={name} className="navbar-profile-pic" />
+              </button>
+            )}
           </OverlayTrigger>
         </div>
       ) : (

site/src/component/Error/Error.tsx

@@ -9,7 +9,7 @@ interface ErrorProps {
 const Error: FC<ErrorProps> = (props) => {
   return (
     <div className="error">
-      <img src={noResultsImg}></img>
+      <img src={noResultsImg} alt="no results"></img>
       <h1>404 PAGE NOT FOUND</h1>
       <h2>{props.message}</h2>
     </div>

site/src/component/Report/ReportGroup.scss

@@ -3,19 +3,16 @@
   border-radius: var(--border-radius);
   padding: 2rem;
   margin-bottom: 3vh;
-
-  label {
-    font-weight: bold;
-  }
 }
 
 .report-group-identifier {
   margin: 0;
-  // font-weight: bold;
   font-size: x-large;
-  // a {
-  //   color: black;
-  // }
+}
+
+.report-group-label {
+  font-weight: bold;
+  margin-bottom: 0.5rem;
 }
 
 .report-group-user-display {
@@ -24,10 +21,7 @@
 
 .report-group-content {
   margin: 1vh 0;
-  label {
-    font-weight: bold;
-  }
-  p {
+  p:nth-child(2) {
     font-style: italic;
     margin-left: 1vw;
   }

site/src/component/Report/ReportGroup.tsx

@@ -18,13 +18,13 @@
   const getReviewData = async (reviewID: string) => {
     const res: AxiosResponse<ReviewData[]> = await axios.get(`/api/reviews?reviewID=${reviewID}`);
     const review: ReviewData = res.data[0];
     console.log(review);
     setReview(review);
   };
 
   useEffect(() => {
     getReviewData(props.reviewID!);
   }, []);
 
   if (!review) {
     return <></>;
@@ -40,10 +40,10 @@
           </div>
         </div>
         <div className="report-group-content">
-          <label>Review Content:</label>
+          <p className="report-group-label">Review Content:</p>
           <p>{review.reviewContent}</p>
         </div>
-        <label>Reports on this review:</label>
+        <p className="report-group-label">Reports on this review:</p>
         <div className="report-group-subreports-container">
           {props.reports.map((report, i) => {
             return (

site/src/component/SearchModule/SearchModule.tsx

@@ -130,6 +130,7 @@ const SearchModule: FC<SearchModuleProps> = ({ index }) => {
           </InputGroup.Prepend>
           <Form.Control
             className="search-bar"
+            aria-label="search"
             type="text"
             placeholder={placeholder}
             onChange={(e) => searchNamesAfterTimeout(e.target.value)}

site/src/component/SideBar/SideBar.tsx

@@ -169,7 +169,7 @@ const SideBar = () => {
 
       {/* Profile Icon and Name */}
       <div className="sidebar-profile">
-        <img src={picture ? picture : defaultAvatar} />
+        <img src={picture ? picture : defaultAvatar} alt="profile" />
         <p>{name ? name : 'Anonymous Peter'}</p>
       </div>
 

site/src/component/SideBar/Sidebar.scss

@@ -1,7 +1,8 @@
 [data-theme='dark'] {
   .sidebar {
     .sidebar-links {
-      ul li a:hover {
+      ul li a:hover,
+      ul li button:hover {
         background-color: var(--overlay2);
       }
     }
@@ -65,7 +66,8 @@
         grid-gap: 10px;
         padding: 10px;
       }
-      a:hover {
+      a:hover,
+      button:hover {
         background: rgba(0, 0, 0, 0.05);
         border-radius: 5px;
       }
@@ -115,7 +117,8 @@
       li {
         margin-top: 2vh;
 
-        a {
+        a,
+        button {
           display: flex;
           flex-direction: column;
           margin: 0;
@@ -161,7 +164,8 @@
     .sidebar-links {
       ul {
         li {
-          a {
+          a,
+          button {
             span {
               font-size: smaller;
             }
@@ -172,6 +176,11 @@
   }
 }
 
+.theme-toggle {
+  border: none;
+  background: none;
+}
+
 .theme-toggle:hover {
   cursor: pointer;
   text-decoration: underline;

site/src/pages/RoadmapPage/Course.tsx

@@ -84,7 +84,12 @@ const Course: FC<CourseProps> = (props) => {
         {onDelete && (
           <ThemeContext.Consumer>
             {({ darkMode }) => (
-              <Button variant={darkMode ? 'dark' : 'light'} className="course-delete-btn" onClick={onDelete}>
+              <Button
+                variant={darkMode ? 'dark' : 'light'}
+                className="course-delete-btn"
+                onClick={onDelete}
+                aria-label="delete"
+              >
                 <Trash className="course-delete-icon" />
               </Button>
             )}