fixed major accessibility issues

JLambertazzo · Feb 18, 2021 · 9460648 · 9460648
1 parent ecb15b1
commit 9460648
Show file tree

Hide file tree

Showing 19 changed files with 110 additions and 47 deletions.
diff --git a/client/public/index.html b/client/public/index.html
@@ -15,7 +15,7 @@
     <title>MealPlanner</title>
   </head>
   <body>
-    <noscript>You need to enable JavaScript to run this app.</noscript>
+    <noscript><h1>You need to enable JavaScript to run this app.</h1></noscript>
     <div id="root"></div>
   </body>
 </html>
diff --git a/client/src/components/calendar/IngredientModal.js b/client/src/components/calendar/IngredientModal.js
@@ -22,7 +22,7 @@ export default function IngredientModal (props) {
       contentLabel="Ingredients Modal"
     >
       <div className='modalHeader'>
-        <Typography variant='h4'>My Ingredients:</Typography>
+        <Typography variant='h2'>My Ingredients:</Typography>
         <Button onClick={props.exit} variant='contained' startIcon={<ChevronLeft />}>Return</Button>
       </div>
       <div className='list-holder'>

diff --git a/client/src/components/calendar/ListModal.css b/client/src/components/calendar/ListModal.css
@@ -42,6 +42,10 @@ summary:hover {
   height: 2.5em;
 }
 
+.modalHeader h2 {
+  font-size: 2.125rem;
+}
+
 @media only screen and (max-width: 778px) {
   .modalHeader h4 {
     font-size: 1.7rem;

diff --git a/client/src/components/calendar/ListModal.js b/client/src/components/calendar/ListModal.js
@@ -21,7 +21,7 @@ export default function ListModal (props) {
       contentLabel='List Modal'
     >
       <div className='modalHeader'>
-        <Typography variant='h4'>Meals for {props.date.toDateString()}:</Typography>
+        <Typography variant='h2'>Meals for {props.date.toDateString()}:</Typography>
       </div>
       {getModalBody(props, meals, setShowMeals, setMeals, setLoadMeals)}
       <ReuseModal

diff --git a/client/src/components/calendar/MealModal.js b/client/src/components/calendar/MealModal.js
@@ -1,6 +1,6 @@
 import React, { useState } from 'react'
 import Modal from 'react-modal'
-import { Select, FormControl, Button, TextField, MenuItem, Typography } from '@material-ui/core'
+import { Select, FormControl, Button, TextField, MenuItem, Typography, InputLabel } from '@material-ui/core'
 import { Close, ChevronLeft, Publish } from '@material-ui/icons'
 import { addMeal } from '../../actions/actions'
 import IngredientList from '../general/IngredientList'
@@ -26,23 +26,24 @@ export default function MealModal (props) {
       contentLabel='Meal Modal'
     >
       <div className='modalHeader'>
-        <Typography variant='h4'>Add a meal for {props.date.toDateString()}</Typography>
+        <Typography variant='h2'>Add a meal for {props.date.toDateString()}</Typography>
         <Button variant='contained' startIcon={<ChevronLeft />} onClick={() => handleReturn(props)}>Return</Button>
       </div>
       <form id='mealModalForm' onSubmit={(event) => handleSubmit(event, props, mealName, mealNum, ingredients, description)}>
         <FormControl className='input-field'>
-          <TextField label='Meal Name' onChange={(event) => setMealName(event.target.value)} required />
+          <TextField label='Meal Name' id='meal-name' InputLabelProps={{ for: 'meal-name' }} onChange={(event) => setMealName(event.target.value)} required />
         </FormControl>
         <FormControl className='input-field'>
-          <Select labelId='selectLabel' defaultValue='0' name='mealNum' id='mealSelect' onChange={(event) => setMealNum(event.target.value)} required>
+          <InputLabel htmlFor='mealSelect' id='select-label'>For meal:</InputLabel>
+          <Select defaultValue='0' name='mealNum' id='mealSelect' labelId='select-label' inputProps={{ "aria-labelledby": 'select-label' }} onChange={(event) => setMealNum(event.target.value)} required>
             <MenuItem value='0'>Breakfast</MenuItem>
             <MenuItem value='1'>Lunch</MenuItem>
             <MenuItem value='2'>Dinner</MenuItem>
             <MenuItem value='3'>Snack</MenuItem>
           </Select>
         </FormControl>
         <FormControl className='input-field list-holder'>
-          <Typography variant='h5'>Ingredients:</Typography>
+          <Typography variant='body'>Ingredients:</Typography>
           <IngredientList
             ingredients={ingredients}
             uid={props.uid}
@@ -54,7 +55,7 @@ export default function MealModal (props) {
           <Button variant='contained' onClick={(event) => handleAddIngredient(event, ingredients, setIngredients)}>Add Ingredient</Button>
         </FormControl>
         <FormControl className='input-field'>
-          <TextField label='Description' onChange={(event) => setDescription(event.target.value)} />
+          <TextField label='Description' id='meal-description' InputLabelProps={{ for: 'meal-description' }} onChange={(event) => setDescription(event.target.value)} />
         </FormControl>
         <div className='modalFooterButtons'>
           <Button startIcon={<Publish />} type='submit' variant='contained'>Submit</Button>

diff --git a/client/src/components/calendar/ReuseModal.js b/client/src/components/calendar/ReuseModal.js
@@ -10,8 +10,7 @@ export default function ReuseModal (props) {
       open={props.open}
       onClose={props.handleClose}
       scroll='paper'
-      aria-labelledby="reuse-dialog-title"
-      aria-describedby="reuse-dialog-description"
+      aria-label="reuse previous meals"
     >
       <DialogTitle id="reuse-dialog-title">Select Meal</DialogTitle>
       <DialogContent dividers id='reuse-dialog-content'>
@@ -37,11 +36,11 @@ export default function ReuseModal (props) {
       </DialogContent>
       <DialogActions>
         <FormControl variant="filled">
-          <InputLabel id="reuse-meal-label">Meal</InputLabel>
+          <InputLabel id='reuse-select-label' htmlFor='reuse-meal-select'>Meal</InputLabel>
           <Select
             variant='outlined'
-            labelId="reuse-meal-label"
             id='reuse-meal-select'
+            aria-labelledby='reuse-select-label'
             value={mealNum}
             onChange={(event) => setMealNum(event.target.value)}
           >

diff --git a/client/src/components/calendar/ShoppingModal.css b/client/src/components/calendar/ShoppingModal.css
@@ -2,6 +2,10 @@
   margin-top: 5vh;
 }
 
+#shoppingModal h3 {
+  font-size: 1.5rem !important;
+}
+
 #shoppingContainer {
   display: flex;
   flex-direction: column;
@@ -45,6 +49,14 @@
   min-width: 190px;
 }
 
+.tablediv .MuiTypography-body1 {
+  font-size: 1.25rem;
+}
+
+.tablediv .MuiTypography-body2 {
+  font-size: 1rem;
+}
+
 paper > table {
   max-width: 650px;
   min-width: 400px;

diff --git a/client/src/components/calendar/ShoppingModal.js b/client/src/components/calendar/ShoppingModal.js
@@ -20,28 +20,29 @@ export default function ShoppingModal (props) {
       contentLabel='Shopping List Modal'
     >
       <div className='modalHeader'>
-        <Typography variant='h4'>My Shopping List:</Typography>
+        <Typography variant='h2'>My Shopping List:</Typography>
         <Button onClick={props.exit} variant='contained' startIcon={<ChevronLeft />}>Return</Button>
       </div>
+      <Typography variant='h3' align='center'>Needed Ingredients:</Typography>
       <div className='tablediv'>
         <TableContainer component='paper'>
           <Table aria-label='Ingredient Table'>
             <TableHead className='primaryBack'>
               <TableRow>
-                <TableCell><Typography variant='h6' color='secondary'>Ingredient</Typography></TableCell>
-                <TableCell><Typography variant='h6' color='secondary'>Quantity</Typography></TableCell>
+                <TableCell><Typography variant='body1' color='secondary'>Ingredient</Typography></TableCell>
+                <TableCell><Typography variant='body1' color='secondary'>Quantity</Typography></TableCell>
               </TableRow>
             </TableHead>
             <TableBody>
               {
                 Object.keys(need).map(name => {
                   return (
                     <TableRow key={name} className='row'>
-                      <TableCell><Typography color='textPrimary'>{name}</Typography></TableCell>
+                      <TableCell><Typography variant='body2' color='textPrimary'>{name}</Typography></TableCell>
                       {
                         Object.keys(need[name]).map(units => {
                           return (
-                            <TableCell component='th' scope='row' key={uid(units)}><Typography>{need[name][units]} {units}</Typography></TableCell>
+                            <TableCell component='th' scope='row' key={uid(units)}><Typography variant='body2'>{need[name][units]} {units}</Typography></TableCell>
                           )
                         })
                       }
@@ -53,20 +54,22 @@ export default function ShoppingModal (props) {
           </Table>
         </TableContainer>
       </div>
-      <Typography variant='h5' align='center'>Export List:</Typography>
+      <Typography variant='h3' align='center'>Export List:</Typography>
       <div id='exportContainer'>
         <Button variant='contained' onClick={() => handleCopy(need)} startIcon={<FileCopy />}>Copy to Clipboard</Button>
         <Button variant='contained' onClick={() => window.print()} startIcon={<Print />}>Print</Button>
         <Button variant='contained' onClick={() => handleEmail(need)} startIcon={<Email />}>Share by Email</Button>
       </div>
-      <Typography variant='h5' align='center'>Date Range to Shop For:</Typography>
+      <Typography variant='h3' align='center'>Date Range to Shop For:</Typography>
       <div id='dateRangeContainer'>
         <FormControl>
           <TextField
             type='number'
             defaultValue={7}
             label='Date Range'
             className='qInput'
+            id='date-range'
+            InputLabelProps={{ for: 'date-range' }}
             inputProps={{ type: 'number', min: 1 }}
             onChange={(event) => handleTimeChange(event, props, time, setNeed, setTime)}
           />

diff --git a/client/src/components/general/Footer.css b/client/src/components/general/Footer.css
@@ -2,6 +2,6 @@
   position: relative !important;
   margin-top: 2%;
   height: fit-content;
-  padding: 10px;
+  padding: 8px;
   text-align: center;
 }
diff --git a/client/src/components/general/Footer.js b/client/src/components/general/Footer.js
@@ -5,7 +5,7 @@ import './Footer.css'
 export default function Footer () {
   return (
     <AppBar className='footer'>
-      <Typography variant='h5'>Made by Julien Bertazzo Lambert</Typography>
+      <Typography variant='body1'>Made by Julien Bertazzo Lambert</Typography>
     </AppBar>
   )
 }
diff --git a/client/src/components/general/IngredientList.js b/client/src/components/general/IngredientList.js
@@ -27,14 +27,17 @@ export default function IngredientList (props) {
                   type='number'
                   label='Quantity'
                   className='qInput'
+                  id={`qinput-${index}`}
+                  InputLabelProps={{ for: `qinput-${index}` }}
                   inputProps={{ type: 'number' }}
                   onInput={props.handleQtyChange}
                   value={ingredient.qty}
                 />
                 <FormControl>
-                  <InputLabel htmlFor="units">Units</InputLabel>
+                  <InputLabel htmlFor={`uinput-${index}`}>Units</InputLabel>
                   <NativeSelect
                     className='uInput'
+                    id={`uinput-${index}`}
                     value={ingredient.units}
                     onChange={props.handleUnitsChange}
                     name='units'
@@ -64,7 +67,7 @@ export default function IngredientList (props) {
                   defaultValue={ingredient.name}
                   renderInput={(params) => <TextField {...params} label='Ingredient' onSelect={props.handleNameChange} /> }
                 />
-                <IconButton onClick={() => props.removeIngredient(index)}>
+                <IconButton aria-label='remove entry' onClick={() => props.removeIngredient(index)}>
                   <Clear />
                 </IconButton>
               </ListItem>

diff --git a/client/src/components/general/NavBar.css b/client/src/components/general/NavBar.css
@@ -31,8 +31,12 @@ svg {
   margin-right: 5px;
 }
 
+.brand-logo h1 {
+  font-size: 2.3rem !important;
+}
+
 @media only screen and (max-width: 481px) {
-  .brand-logo h4 {
+  .brand-logo h1 {
     font-size: 1.85rem !important;
   }
 

diff --git a/client/src/components/general/NavBar.js b/client/src/components/general/NavBar.js
@@ -29,7 +29,15 @@ export default function NavBar (props) {
             </ButtonGroup>
           </div>
           <div className={classes.mobileSection}>
-            <IconButton edge='end' aria-controls='auth-menu' aria-haspopup='true' color='inherit' onClick={(event) => setAuthAnchorEl(event.target)}><MenuIcon /></IconButton>
+            <IconButton
+              edge='end'
+              aria-label='Navigation Menu'
+              aria-controls='auth-menu'
+              aria-haspopup='true'
+              color='inherit'
+              onClick={(event) => setAuthAnchorEl(event.target)}>
+                <MenuIcon />
+            </IconButton>
             <Menu
               id='auth-menu'
               anchorEl={authAnchorEl}
@@ -66,7 +74,7 @@ export default function NavBar (props) {
   return (
     <AppBar className={classes.navBar} position='static'>
       <Toolbar className='nav-wrapper'>
-        <a href='/' id='logo' className='brand-logo'><Typography variant='h4'>MealPlanner</Typography></a>
+        <a href='/' id='logo' className='brand-logo'><Typography variant='h1'>MealPlanner</Typography></a>
         {getRightSide()}
       </Toolbar>
     </AppBar>

diff --git a/client/src/pages/auth/AuthForm.css b/client/src/pages/auth/AuthForm.css
@@ -29,6 +29,10 @@
   margin: 3% 0;
 }
 
+.container h2 {
+  font-size: 2.25rem !important;
+}
+
 #authForm {
   display: flex;
   flex-direction: column;

diff --git a/client/src/pages/auth/AuthForm.js b/client/src/pages/auth/AuthForm.js
@@ -16,12 +16,12 @@ export default function AuthForm (props) {
         className='container'
         onSubmit={props.showLogin ? (event) => handleLogin(event, username, pass) : (event) => handleSignup(event, username, pass, confPass)}
       >
-        <Typography variant='h4'>{props.showLogin ? <Person /> : <PersonAdd />} {props.showLogin ? 'Log In' : 'Sign Up'}</Typography>
+        <Typography variant='h2'>{props.showLogin ? <Person /> : <PersonAdd />} {props.showLogin ? 'Log In' : 'Sign Up'}</Typography>
         <FormControl className='input-field'>
-          <TextField label='Username' onChange={(event) => setUsername(event.target.value)} inputProps={{ minLength: 5 }} required />
+          <TextField label='Username' id='username-input' InputLabelProps={{ for: 'username-input' }} onChange={(event) => setUsername(event.target.value)} inputProps={{ minLength: 5 }} required />
         </FormControl>
         <FormControl className='input-field'>
-          <TextField label='Password' type='password' onChange={(event) => setPass(event.target.value)} inputProps={{ minLength: 8 }} required />
+          <TextField label='Password' id='pass-input' InputLabelProps={{ for: 'pass-input' }} type='password' onChange={(event) => setPass(event.target.value)} inputProps={{ minLength: 8 }} required />
         </FormControl>
         {getConfPassField(props, setConfPass)}
         <FormControl className='input-field'>
@@ -42,6 +42,8 @@ const getConfPassField = (props, setConfPass) => {
           onChange={(event) => setConfPass(event.target.value)}
           inputProps={{ minLength: 8 }}
           required
+          id='confpass-input'
+          InputLabelProps={{ for: 'confpass-input' }}
         />
       </FormControl>)
   }

diff --git a/client/src/pages/calendar/CalendarView.css b/client/src/pages/calendar/CalendarView.css
@@ -83,6 +83,11 @@
   color: black;
 }
 
+/* Increased contrast for accessibility */
+.react-calendar__month-view__days__day--neighboringMonth {
+  color: #4d4d4d
+}
+
 .calendar-button-styles {
   display: flex;
   border: 1px solid #efefef !important;