From 4ffc8d3e0ae7cf3ef3c17e7e7600d55487b756a0 Mon Sep 17 00:00:00 2001
From: Francesco <fmazzini@unibz.it>
Date: Mon, 7 Jun 2021 16:40:06 +0200
Subject: [PATCH] Improved Accessibility
---
.../Dashboard/HomePage/NavBarLogin.tsx | 31 +-
src/components/Dashboard/HomePage/Numbers.tsx | 12 +-
src/components/Dashboard/HomePage/Steps.tsx | 30 +-
.../Dashboard/ProfilePage/ProfilePage.tsx | 265 +++++++++---------
.../ReservationPage/ReservationPage.tsx | 34 +--
src/components/LandingPage/LandingPage.tsx | 52 ++--
6 files changed, 227 insertions(+), 197 deletions(-)
diff --git a/src/components/Dashboard/HomePage/NavBarLogin.tsx b/src/components/Dashboard/HomePage/NavBarLogin.tsx
index e37413e..718c6a1 100644
--- a/src/components/Dashboard/HomePage/NavBarLogin.tsx
+++ b/src/components/Dashboard/HomePage/NavBarLogin.tsx
@@ -45,19 +45,22 @@ export const NavBarLogin: FC = () => {
};
return (
- <Tabs
- textColor="primary"
- onChange={handleChange}
- value={value}
- className={classes.tabs}
- TabIndicatorProps={{ style: { display: 'none' } }}
- >
- <Tab
- value={`${AuthRoutes.dashboard}${AuthRoutes.home}`}
- label="Login"
- icon={<LockIcon className={classes.tabIcon} />}
- className={`${classes.tabPan} ${classes.rightAlign}`}
- />
- </Tabs>
+ <nav>
+ <Tabs
+ textColor="primary"
+ onChange={handleChange}
+ value={value}
+ className={classes.tabs}
+ TabIndicatorProps={{ style: { display: 'none' } }}
+ >
+ <Tab
+ value={`${AuthRoutes.dashboard}${AuthRoutes.home}`}
+ label="Login"
+ icon={<LockIcon className={classes.tabIcon} />}
+ className={`${classes.tabPan} ${classes.rightAlign}`}
+ aria-label="Login"
+ />
+ </Tabs>
+ </nav>
);
};
diff --git a/src/components/Dashboard/HomePage/Numbers.tsx b/src/components/Dashboard/HomePage/Numbers.tsx
index 4b47425..c97a5fc 100644
--- a/src/components/Dashboard/HomePage/Numbers.tsx
+++ b/src/components/Dashboard/HomePage/Numbers.tsx
@@ -70,13 +70,13 @@ export const Numbers: FC = () => {
</Typography>
<Hidden smDown>
- <Typography variant="h6" align="center">
+ <Typography variant="h5" align="center">
Rides Offered
</Typography>
</Hidden>
<Hidden mdUp>
- <Typography variant="h6" align="center">
+ <Typography variant="h5" align="center">
Rides
</Typography>
</Hidden>
@@ -104,13 +104,13 @@ export const Numbers: FC = () => {
</Typography>
<Hidden smDown>
- <Typography variant="h6" align="center">
+ <Typography variant="h5" align="center">
Kilometers
</Typography>
</Hidden>
<Hidden mdUp>
- <Typography variant="h6" align="center">
+ <Typography variant="h5" align="center">
Kms
</Typography>
</Hidden>
@@ -142,13 +142,13 @@ export const Numbers: FC = () => {
</Typography>
<Hidden smDown>
- <Typography variant="h6" align="center">
+ <Typography variant="h5" align="center">
People who used our service
</Typography>
</Hidden>
<Hidden mdUp>
- <Typography variant="h6" align="center">
+ <Typography variant="h5" align="center">
Users
</Typography>
</Hidden>
diff --git a/src/components/Dashboard/HomePage/Steps.tsx b/src/components/Dashboard/HomePage/Steps.tsx
index 2452c59..3302c8d 100644
--- a/src/components/Dashboard/HomePage/Steps.tsx
+++ b/src/components/Dashboard/HomePage/Steps.tsx
@@ -19,6 +19,12 @@ const useStyles = makeStyles(() => ({
boxShadow: 'none',
backgroundColor: 'transparent',
},
+ bodyText: {
+ fontSize: '1.26em',
+ },
+ bodyTextLarger: {
+ fontSize: '2.3em',
+ },
}));
export const Steps: FC = () => {
@@ -30,7 +36,11 @@ export const Steps: FC = () => {
<Grid item xs={10} lg={2} component={Card} className={classes.paddingBot}>
<CardContent>
- <Typography variant="h4" align="center">
+ <Typography
+ variant="h2"
+ className={classes.bodyTextLarger}
+ align="center"
+ >
STEP 1
</Typography>
@@ -46,7 +56,7 @@ export const Steps: FC = () => {
</Grid>
</Grid>
- <Typography variant="h6">
+ <Typography variant="body1" className={classes.bodyText}>
Log In or Register an account on the site. Fill all the fields
related to your personal information.
</Typography>
@@ -67,7 +77,11 @@ export const Steps: FC = () => {
<Grid item xs={10} lg={2} component={Card} className={classes.paddingBot}>
<CardContent>
- <Typography variant="h4" align="center">
+ <Typography
+ variant="h2"
+ className={classes.bodyTextLarger}
+ align="center"
+ >
STEP 2
</Typography>
@@ -83,7 +97,7 @@ export const Steps: FC = () => {
</Grid>
</Grid>
- <Typography variant="h6">
+ <Typography variant="body1" className={classes.bodyText}>
Book in the reservation section a free ride at least 48h than your
appointment
</Typography>
@@ -103,7 +117,11 @@ export const Steps: FC = () => {
<Grid item xs={10} lg={2} component={Card} className={classes.paddingBot}>
<CardContent>
- <Typography variant="h4" align="center">
+ <Typography
+ variant="h2"
+ className={classes.bodyTextLarger}
+ align="center"
+ >
STEP 3
</Typography>
@@ -119,7 +137,7 @@ export const Steps: FC = () => {
</Grid>
</Grid>
- <Typography variant="h6">
+ <Typography variant="body1" className={classes.bodyText}>
Wait your free drive compfortably at home and reach the place you
have booked in the reservation easily!
</Typography>
diff --git a/src/components/Dashboard/ProfilePage/ProfilePage.tsx b/src/components/Dashboard/ProfilePage/ProfilePage.tsx
index 8f7adcc..db6ff72 100644
--- a/src/components/Dashboard/ProfilePage/ProfilePage.tsx
+++ b/src/components/Dashboard/ProfilePage/ProfilePage.tsx
@@ -16,6 +16,7 @@ import {
Button,
Select,
MenuItem,
+ FormControl,
} from '@material-ui/core';
import { NavBar } from 'components/Dashboard/HomePage/NavBar';
@@ -128,154 +129,158 @@ export const ProfilePage: FC = () => {
<NavBar />
</Grid>
- <MuiThemeProvider theme={themeResp}>
- <Grid item container className={classes.paddingBottom}>
- <Grid item xs={1} md={2} lg={2} />
+ <header>
+ <MuiThemeProvider theme={themeResp}>
+ <Grid item container className={classes.paddingBottom}>
+ <Grid item xs={1} md={2} lg={2} />
- <Grid item xs={10} md={6} lg={4}>
- <Typography variant="h2" className={classes.whiteText}>
- Set Here Your
- </Typography>
- <Typography variant="h1" className={classes.whiteText}>
- PROFILE
- </Typography>
- </Grid>
+ <Grid item xs={10} md={6} lg={4}>
+ <Typography variant="h2" className={classes.whiteText}>
+ Set Here Your
+ </Typography>
+ <Typography variant="h1" className={classes.whiteText}>
+ PROFILE
+ </Typography>
+ </Grid>
- <Grid item xs={1} />
- </Grid>
- </MuiThemeProvider>
+ <Grid item xs={1} />
+ </Grid>
+ </MuiThemeProvider>
+ </header>
</div>
- <MuiThemeProvider theme={themeResp}>
- <Grid item container className={classes.paddingTop}>
- <Grid item xs={2} />
- <Grid item container xs={8}>
- <Grid item xs={12}>
- <Typography variant="h2">Your Profile Settings</Typography>
- </Grid>
+ <FormControl aria-label="Info User">
+ <MuiThemeProvider theme={themeResp}>
+ <Grid item container className={classes.paddingTop}>
+ <Grid item xs={2} />
+ <Grid item container xs={8}>
+ <Grid item xs={12}>
+ <Typography variant="h2">Your Profile Settings</Typography>
+ </Grid>
- <Grid item xs={5} className={classes.paddingTopLittle}>
- <TextField
- autoFocus
- margin="dense"
- id="name"
- label="First Name"
- type="text"
- fullWidth
- />
- </Grid>
- <Grid item xs={2} className={classes.paddingTopLittle} />
- <Grid item xs={5} className={classes.paddingTopLittle}>
- <TextField
- autoFocus
- margin="dense"
- id="name"
- label="Last Name"
- type="text"
- fullWidth
- />
- </Grid>
+ <Grid item xs={5} className={classes.paddingTopLittle}>
+ <TextField
+ autoFocus
+ margin="dense"
+ id="firstName"
+ label="First Name"
+ type="text"
+ fullWidth
+ />
+ </Grid>
+ <Grid item xs={2} className={classes.paddingTopLittle} />
+ <Grid item xs={5} className={classes.paddingTopLittle}>
+ <TextField
+ autoFocus
+ margin="dense"
+ id="lastName"
+ label="Last Name"
+ type="text"
+ fullWidth
+ />
+ </Grid>
- <Grid item xs={5} className={classes.paddingTopLittle}>
- <TextField
- autoFocus
- margin="dense"
- id="name"
- label="Address"
- type="text"
- fullWidth
- />
- </Grid>
+ <Grid item xs={5} className={classes.paddingTopLittle}>
+ <TextField
+ autoFocus
+ margin="dense"
+ id="address"
+ label="Address"
+ type="text"
+ fullWidth
+ />
+ </Grid>
- <Grid item xs={2} className={classes.paddingTopLittle} />
+ <Grid item xs={2} className={classes.paddingTopLittle} />
- <Grid item xs={2} className={classes.paddingTopLittle}>
- <TextField
- autoFocus
- margin="dense"
- id="name"
- label="CAP"
- type="text"
- fullWidth
- />
- </Grid>
+ <Grid item xs={2} className={classes.paddingTopLittle}>
+ <TextField
+ autoFocus
+ margin="dense"
+ id="cap"
+ label="CAP"
+ type="text"
+ fullWidth
+ />
+ </Grid>
- <Grid item xs={1} className={classes.paddingTopLittle} />
+ <Grid item xs={1} className={classes.paddingTopLittle} />
- <Grid item xs={2} className={classes.paddingTopLittle}>
- <TextField
- autoFocus
- margin="dense"
- id="name"
- label="Prov"
- type="text"
- fullWidth
- />
- </Grid>
+ <Grid item xs={2} className={classes.paddingTopLittle}>
+ <TextField
+ autoFocus
+ margin="dense"
+ id="province"
+ label="Prov"
+ type="text"
+ fullWidth
+ />
+ </Grid>
- <Grid item xs={12} className={classes.paddingTopLittle}>
- <TextField
- autoFocus
- margin="dense"
- id="name"
- label="Email"
- type="text"
- fullWidth
- />
- </Grid>
+ <Grid item xs={12} className={classes.paddingTopLittle}>
+ <TextField
+ autoFocus
+ margin="dense"
+ id="email"
+ label="Email"
+ type="text"
+ fullWidth
+ />
+ </Grid>
- <Grid item xs={12} className={classes.paddingTopLittle}>
- <TextField
- autoFocus
- margin="dense"
- id="name"
- label="Card No"
- type="text"
- fullWidth
- />
- </Grid>
+ <Grid item xs={12} className={classes.paddingTopLittle}>
+ <TextField
+ autoFocus
+ margin="dense"
+ id="cardNumber"
+ label="Card No"
+ type="text"
+ fullWidth
+ />
+ </Grid>
- <Grid item xs={12} className={classes.paddingTop}>
- <Select
- labelId="Language"
- id="Language"
- label="Language"
- open={open}
- onClose={handleClose}
- onOpen={handleOpen}
- value={lang}
- onChange={handleChange}
+ <Grid item xs={12} className={classes.paddingTop}>
+ <Select
+ labelId="Language"
+ id="Language"
+ label="Language"
+ open={open}
+ onClose={handleClose}
+ onOpen={handleOpen}
+ value={lang}
+ onChange={handleChange}
+ fullWidth
+ >
+ <MenuItem value={20}>Italiano</MenuItem>
+ <MenuItem value={10}>English</MenuItem>
+ <MenuItem value={30}>Deutsch</MenuItem>
+ <MenuItem value={40}>Ladinisch</MenuItem>
+ </Select>
+ </Grid>
+
+ <Button
+ color="primary"
+ variant="contained"
+ className={classes.buttonUpdate}
+ >
+ Update
+ </Button>
+
+ <Button
fullWidth
+ variant="outlined"
+ color="default"
+ onClick={logout}
+ className={classes.marginTop}
>
- <MenuItem value={20}>Italiano</MenuItem>
- <MenuItem value={10}>English</MenuItem>
- <MenuItem value={30}>Deutsch</MenuItem>
- <MenuItem value={40}>Ladinisch</MenuItem>
- </Select>
+ Logout
+ </Button>
</Grid>
- <Button
- color="primary"
- variant="contained"
- className={classes.buttonUpdate}
- >
- Update
- </Button>
-
- <Button
- fullWidth
- variant="outlined"
- color="default"
- onClick={logout}
- className={classes.marginTop}
- >
- Logout
- </Button>
+ <Grid item xs={2} />
</Grid>
-
- <Grid item xs={2} />
- </Grid>
- </MuiThemeProvider>
+ </MuiThemeProvider>
+ </FormControl>
</Grid>
);
};
diff --git a/src/components/Dashboard/ReservationPage/ReservationPage.tsx b/src/components/Dashboard/ReservationPage/ReservationPage.tsx
index df2572e..231c416 100644
--- a/src/components/Dashboard/ReservationPage/ReservationPage.tsx
+++ b/src/components/Dashboard/ReservationPage/ReservationPage.tsx
@@ -57,23 +57,24 @@ export const ReservationPage: FC = () => {
<NavBar />
</Grid>
<ReservationDialog handleClose={handleClose} isOpen={isOpen} />
-
- <MuiThemeProvider theme={themeResp}>
- <Grid item container className={classes.paddingBottom}>
- <Grid item xs={1} md={2} lg={2} />
-
- <Grid item xs={10} md={6} lg={4}>
- <Typography variant="h2" className={classes.whiteText}>
- Plan Here Your
- </Typography>
- <Typography variant="h2" className={classes.whiteText}>
- RESERVATIONS
- </Typography>
+ <header>
+ <MuiThemeProvider theme={themeResp}>
+ <Grid item container className={classes.paddingBottom}>
+ <Grid item xs={1} md={2} lg={2} />
+
+ <Grid item xs={10} md={6} lg={4}>
+ <Typography variant="h2" className={classes.whiteText}>
+ Plan Here Your
+ </Typography>
+ <Typography variant="h2" className={classes.whiteText}>
+ RESERVATIONS
+ </Typography>
+ </Grid>
+
+ <Grid item xs={1} />
</Grid>
-
- <Grid item xs={1} />
- </Grid>
- </MuiThemeProvider>
+ </MuiThemeProvider>
+ </header>
</div>
<Hidden smDown>
@@ -82,6 +83,7 @@ export const ReservationPage: FC = () => {
size="large"
className={classes.fab}
onClick={handleOpen}
+ aria-label="Add New Reservations"
>
<AddIcon className={classes.extendedIcon} />
</Fab>
diff --git a/src/components/LandingPage/LandingPage.tsx b/src/components/LandingPage/LandingPage.tsx
index f63eab6..52cde70 100644
--- a/src/components/LandingPage/LandingPage.tsx
+++ b/src/components/LandingPage/LandingPage.tsx
@@ -65,36 +65,38 @@ export const LandingPage: FC = () => {
<div className={classes.root}>
<CssBaseline />
- <Grid item>
- <NavBarLogin />
- </Grid>
+ <header>
+ <Grid item>
+ <NavBarLogin />
+ </Grid>
- <MuiThemeProvider theme={themeResp}>
- <Grid item container className={classes.paddingBottom}>
- <Grid item xs={1} md={2} lg={2} />
+ <MuiThemeProvider theme={themeResp}>
+ <Grid item container className={classes.paddingBottom}>
+ <Grid item xs={1} md={2} lg={2} />
- <Grid item xs={10} md={6} lg={4}>
- <Typography variant="h2" className={classes.whiteText}>
- Book Free Rides Now With
- </Typography>
- <Typography variant="h1" className={classes.whiteText}>
- MOVE AID
- </Typography>
- </Grid>
+ <Grid item xs={10} md={6} lg={4}>
+ <Typography variant="h2" className={classes.whiteText}>
+ Book Free Rides Now With
+ </Typography>
+ <Typography variant="h1" className={classes.whiteText}>
+ MOVE AID
+ </Typography>
+ </Grid>
- <Grid item xs={false} md={3} lg={5}>
- <Hidden mdDown>
- <Container>
- <MapElement />
- </Container>
- </Hidden>
- </Grid>
+ <Grid item xs={false} md={3} lg={5}>
+ <Hidden mdDown>
+ <Container>
+ <MapElement />
+ </Container>
+ </Hidden>
+ </Grid>
- <Grid item xs={1} />
- </Grid>
+ <Grid item xs={1} />
+ </Grid>
- <Steps />
- </MuiThemeProvider>
+ <Steps />
+ </MuiThemeProvider>
+ </header>
</div>
<Grid item container className={classes.paddingTop}>
--
GitLab