From 03d3ab5790ee84a27f9560b2bebf8ed984cf653e Mon Sep 17 00:00:00 2001
From: KaylaMLe <kaylale2014@gmail.com>
Date: Sun, 17 Mar 2024 23:13:23 -0700
Subject: [PATCH] accessibility edits including alt text, color contrast, and
 keyboard navigation

---
 src/App.css                      | 52 +++++++++-----------------------
 src/components/Credits.css       |  3 ++
 src/components/Credits.tsx       | 16 +++++++---
 src/components/Documentation.tsx |  6 ++--
 src/components/Footer.css        |  7 +++++
 src/components/Footer.tsx        |  6 +++-
 src/components/Home.tsx          | 22 +++++++-------
 src/components/Navbar.css        | 13 ++++++++
 src/components/Navbar.tsx        | 36 ++++++++--------------
 9 files changed, 80 insertions(+), 81 deletions(-)
 create mode 100644 src/components/Credits.css
 create mode 100644 src/components/Footer.css
 create mode 100644 src/components/Navbar.css

diff --git a/src/App.css b/src/App.css
index baa82cf..e382e80 100644
--- a/src/App.css
+++ b/src/App.css
@@ -1,50 +1,26 @@
-.App {
-  text-align: center;
-}
-html,
-body {
-  overflow-x: hidden;
-}
-
-.grid-container {
-  display: grid;
-  grid-template-columns: auto auto auto auto auto;
-  background-color: #237735;
-  padding: 10px;
-}
-.grid-item {
-  background-color: rgba(207, 253, 189, 0.8);
-  border: 1px solid rgba(0, 0, 0, 0.8);
-  padding: 20px;
-  font-size: 20px;
-  text-align: center;
-}
 * {
   box-sizing: border-box;
 }
 
-.column {
-  float: left;
-  width: 33.33%;
-  padding: 5px;
-  height: 100px;
+@media (prefers-reduced-motion: reduce) {
+  * {
+    animation-play-state: paused !important;
+    transition: none !important;
+    scroll-behavior: auto !important;
+  }
 }
 
-.grid-container {
-  display: grid;
-  grid-template-columns: auto auto auto auto auto;
-  background-color: #55a072;
-  padding: 10px;
+:not(footer *, .profile-btn):focus-visible {
+  outline: dashed 3px #009CB8 !important;
 }
-.grid-item {
-  background-color: #55a072;
-  border: 1px solid #55a072;
-  padding: 20px;
-  font-size: 20px;
+
+.App {
   text-align: center;
 }
-* {
-  box-sizing: border-box;
+
+html,
+body {
+  overflow-x: hidden;
 }
 
 .column {
diff --git a/src/components/Credits.css b/src/components/Credits.css
new file mode 100644
index 0000000..8bfbaca
--- /dev/null
+++ b/src/components/Credits.css
@@ -0,0 +1,3 @@
+.profile-btn:focus-visible {
+  outline: dashed 3px #0114DF !important;
+}
\ No newline at end of file
diff --git a/src/components/Credits.tsx b/src/components/Credits.tsx
index 6116af2..52f38e9 100644
--- a/src/components/Credits.tsx
+++ b/src/components/Credits.tsx
@@ -1,4 +1,4 @@
-import { useState, type ReactElement } from 'react';
+import { useState, type ReactElement, useEffect } from 'react';
 import JaronImage from './images/jaroon.jpg';
 import AliImage from './images/ali.jpg';
 import AlanImage from './images/alan.png';
@@ -23,6 +23,7 @@ import JasonImage from './images/json.jpg';
 import ThanhImage from './images/thanh.jpeg';
 import OmarImage from './images/omar.jpg';
 import TonyImage from './images/tony.png';
+import './Credits.css';
 
 import {
   Accordion,
@@ -63,17 +64,17 @@ function CreditElement({
       />
       <h2>{userName}</h2>
       <h3>{userRole}</h3>
-      <a href={userGithub} target="_blank" rel="noreferrer">
+      <a href={userGithub} target="_blank" rel="noreferrer" className="profile-btn">
         <img
           src={GithubImage}
-          alt="git"
+          alt={`${userName}'s Github`}
           style={{ height: '4vh', borderRadius: '50%' }}
         />
       </a>
-      <a href={userLinkedin} target="_blank" rel="noreferrer">
+      <a href={userLinkedin} target="_blank" rel="noreferrer" className="profile-btn">
         <img
           src={LinkedinImage}
-          alt="link"
+          alt={`${userName}'s LinkedIn`}
           style={{ height: '4vh', borderRadius: '50%' }}
         />
       </a>
@@ -422,10 +423,15 @@ function MobileCredits(): ReactElement {
  * @returns Container with credits components
  */
 export default function Credits(): ReactElement {
+  useEffect(() => {
+    document.title = 'Credits - BroncoDirectMe';
+  });
+
   return (
     <>
       {/* Desktop design */}
       <Grid
+        id='main'
         container
         display={{ xs: 'none', md: 'flex' }}
         spacing={{ xs: 2 }}
diff --git a/src/components/Documentation.tsx b/src/components/Documentation.tsx
index 80b4d18..10eb44b 100644
--- a/src/components/Documentation.tsx
+++ b/src/components/Documentation.tsx
@@ -5,6 +5,7 @@ import './Documentation.css';
 
 function Documentation(): ReactElement {
   useEffect(() => {
+    document.title = 'Documentation - BroncoDirectMe';
     const script = document.createElement('script');
 
     script.src =
@@ -27,13 +28,14 @@ function Documentation(): ReactElement {
       role="flatdoc"
       className="big-h3 large-brief no-literate documentationElm"
     >
-      <div className="header">
+      <div className="header" id="main">
         <div className="left">
-          <h1>BroncoDirectMe</h1>
+          <h1 style={{ color: "#6D6D8D" }}>BroncoDirectMe</h1>
         </div>
         <div className="right">
           {/* GitHub buttons: see http://ghbtns.com */}
           <iframe
+            title="Star this project on GitHub"
             src="https://ghbtns.com/github-btn.html?user=BroncoDirectMe&amp;repo=Website&amp;type=watch&amp;count=true"
             width="110"
             height="20"
diff --git a/src/components/Footer.css b/src/components/Footer.css
new file mode 100644
index 0000000..cde5736
--- /dev/null
+++ b/src/components/Footer.css
@@ -0,0 +1,7 @@
+.disclaimer-btn:focus-visible {
+  outline: dashed 3px #80ECFF !important;
+}
+
+a:focus-visible {
+  outline: dashed 3px #008299 !important;
+}
\ No newline at end of file
diff --git a/src/components/Footer.tsx b/src/components/Footer.tsx
index b10362e..79302dc 100644
--- a/src/components/Footer.tsx
+++ b/src/components/Footer.tsx
@@ -9,6 +9,8 @@ import {
   Typography,
 } from '@mui/material';
 import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
+import './Footer.css';
+import { Launch } from '@mui/icons-material';
 
 export default function Footer(): ReactElement {
   return (
@@ -54,6 +56,7 @@ export default function Footer(): ReactElement {
           href="https://chrome.google.com/webstore/detail/broncodirectme/kcbdmdlehcmkgknmmfjjiaclhpplibda"
         >
           Download
+          <Launch sx={{ paddingTop: 0.5 }} />
         </Link>
         <Link variant="h6" color="black" underline="none" href="documentation">
           Docs
@@ -65,7 +68,7 @@ export default function Footer(): ReactElement {
 
       <Accordion
         sx={{
-          backgroundColor: '#8f8c8c',
+          backgroundColor: '#757575',
           color: 'white',
           border: '3px solid gray',
         }}
@@ -77,6 +80,7 @@ export default function Footer(): ReactElement {
           }
           aria-controls="panel1a-content"
           id="panel1a-header"
+          className="disclaimer-btn"
         >
           <Typography sx={{ fontSize: '1.5em' }}>Disclaimer</Typography>
         </AccordionSummary>
diff --git a/src/components/Home.tsx b/src/components/Home.tsx
index 1624187..a77b37f 100644
--- a/src/components/Home.tsx
+++ b/src/components/Home.tsx
@@ -29,7 +29,7 @@ import {
 export default function Home(): ReactElement {
   return (
     <Box>
-      <BannerContainer>
+      <BannerContainer id='main'>
         <Grid container spacing={2} alignItems="end">
           <Grid item xs={12} md={6}>
             <Container
@@ -73,7 +73,7 @@ export default function Home(): ReactElement {
             md={6}
             sx={{ display: { xs: 'none', md: 'block' } }}
           >
-            <BannerImage src={bronco}></BannerImage>
+            <BannerImage src={bronco} alt=''></BannerImage>
           </Grid>
         </Grid>
       </BannerContainer>
@@ -124,7 +124,7 @@ export default function Home(): ReactElement {
                     margin: '20px',
                     borderRadius: '150px',
                   }}
-                  alt="Completely Free"
+                  alt=''
                   src={icon1}
                 />
 
@@ -159,7 +159,7 @@ export default function Home(): ReactElement {
                     margin: '20px',
                     borderRadius: '150px',
                   }}
-                  alt="User Friendly"
+                  alt=''
                   src={icon2}
                 />
                 <Typography
@@ -193,7 +193,7 @@ export default function Home(): ReactElement {
                     margin: '20px',
                     borderRadius: '150px',
                   }}
-                  alt="Easy Installation"
+                  alt=''
                   src={icon3}
                 />
                 <Typography
@@ -228,7 +228,7 @@ export default function Home(): ReactElement {
                     margin: '20px',
                     borderRadius: '150px',
                   }}
-                  alt="Community"
+                  alt=''
                   src={icon4}
                 />
                 <Typography
@@ -281,10 +281,10 @@ export default function Home(): ReactElement {
                   height="300vh"
                   style={{ marginTop: '2.5vh' }}
                   src="https://www.youtube.com/embed/90L-1dkwaMk?si=gbTLyFDcsQyJPhaX"
-                  title="BroncoDirect Demonstration"
-                  allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
+                  title="Demonstration on the BroncoDirect website"
+                  allow="accelerometer; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
                   allowFullScreen={true}
-                ></iframe>
+                />
                 <BodyText
                   variant="h4"
                   sx={{ color: 'white', fontWeight: 'bold' }}
@@ -314,9 +314,9 @@ export default function Home(): ReactElement {
                   height="300vh"
                   src="https://www.youtube.com/embed/x7fAnYdr9WY"
                   title="Extension Window Demonstration"
-                  allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
+                  allow="accelerometer; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
                   allowFullScreen={true}
-                ></iframe>
+                />
                 <BodyText
                   variant="h4"
                   sx={{ color: 'white', fontWeight: 'bold' }}
diff --git a/src/components/Navbar.css b/src/components/Navbar.css
new file mode 100644
index 0000000..657ec1f
--- /dev/null
+++ b/src/components/Navbar.css
@@ -0,0 +1,13 @@
+.skip-link {
+  position: absolute;
+  top: 10px;
+  left: -100%;
+  background-color: #0C210C;
+  color: #FFFFFF;
+  padding: 10px;
+  z-index: 1;
+}
+
+.skip-link:focus {
+  left: auto;
+}
\ No newline at end of file
diff --git a/src/components/Navbar.tsx b/src/components/Navbar.tsx
index d6e06d9..5b094ef 100644
--- a/src/components/Navbar.tsx
+++ b/src/components/Navbar.tsx
@@ -10,35 +10,29 @@ import {
   Container,
   MenuItem,
 } from '@mui/material';
-import { School } from '@mui/icons-material';
+import { Launch, School } from '@mui/icons-material';
 import { type ReactElement, useState } from 'react';
 import MenuIcon from '@mui/icons-material/Menu';
+import './Navbar.css';
 
 /**
  * Customized responsive navbar from https://mui.com/material-ui/react-app-bar/#app-bar-with-responsive-menu
  */
 export default function Navbar(): ReactElement {
   const [anchorElNav, setAnchorElNav] = useState<null | HTMLElement>(null);
-  const handleOpenNavMenu = (event: React.MouseEvent<HTMLElement>): void =>
-    { setAnchorElNav(event.currentTarget); };
+  const handleOpenNavMenu = (event: React.MouseEvent<HTMLElement>): void => { setAnchorElNav(event.currentTarget); };
   const handleCloseNavMenu = (): void => { setAnchorElNav(null); };
 
   return (
     <AppBar position="static" style={{ background: '#194719' }}>
       <Container maxWidth="xl">
         <Toolbar disableGutters>
-          <IconButton
-            size="large"
-            edge="start"
-            color="inherit"
-            aria-label="logo"
-            sx={{ display: { xs: 'none', md: 'flex' } }}
-          >
-            <School />
-          </IconButton>
+          <a href="#main" className="skip-link">Skip to main content</a>
+          <School sx={({ display: { xs: 'none', md: 'flex' } })} />
           <Typography
             variant="h5"
             component="div"
+            paddingLeft={1.5}
             paddingRight={5}
             paddingTop={0.5}
             sx={{ display: { xs: 'none', md: 'flex' } }}
@@ -94,27 +88,21 @@ export default function Navbar(): ReactElement {
                 target="_blank"
                 rel="noopener"
               >
-                <Typography color="inherit" textAlign="center">
+                <Typography color="inherit" textAlign="center" paddingRight={0.5}>
                   Download
                 </Typography>
+                <Launch />
               </MenuItem>
             </Menu>
           </Box>
           {/* MOBILE VIEW: Dropdown navbar menu */}
 
-          <IconButton
-            size="large"
-            edge="start"
-            color="inherit"
-            aria-label="logo"
-            sx={{ display: { xs: 'flex', md: 'none' } }}
-          >
-            <School />
-          </IconButton>
+          <School sx={{ display: { xs: 'flex', md: 'none' } }} />
           <Typography
             variant="h5"
             noWrap
             component="div"
+            paddingLeft={1.5}
             sx={{
               mr: 2,
               display: { xs: 'flex', md: 'none' },
@@ -123,7 +111,7 @@ export default function Navbar(): ReactElement {
           >
             BroncoDirectMe
           </Typography>
-          {/* MOBILE VIEW: Icon button and text element */}
+          {/* DESKTOP VIEW: Icon button and text element */}
 
           <Box sx={{ flexGrow: 1, display: { xs: 'none', md: 'flex' } }}>
             <Stack direction="row" spacing={2} paddingTop={1}>
@@ -141,12 +129,12 @@ export default function Navbar(): ReactElement {
                 href="https://chrome.google.com/webstore/detail/broncodirectme/kcbdmdlehcmkgknmmfjjiaclhpplibda"
                 target="_blank"
                 rel="noopener"
+                endIcon={<Launch />}
               >
                 Download
               </Button>
             </Stack>
           </Box>
-          {/* DESKTOP VIEW: Responsive navbar */}
         </Toolbar>
       </Container>
     </AppBar>