fix(accessibility): fixed accessibility

ruddenchaux · Apr 18, 2021 · a164f08 · a164f08
1 parent 4ec5c03
commit a164f08
Show file tree

Hide file tree

Showing 6 changed files with 12 additions and 6 deletions.
diff --git a/src/components/characters/CharacterCardFirstSeenIn.tsx b/src/components/characters/CharacterCardFirstSeenIn.tsx
@@ -33,7 +33,7 @@ export default function CharacterCardFirstSeenIn({
       <Typography variant="subtitle2" component="label" color="textSecondary">
         First seen in:
       </Typography>
-      <Typography variant="subtitle1" data-cy="character-first-seen-in">
+      <Typography variant="subtitle1" component="div" data-cy="character-first-seen-in">
         {character.episode[0].name}
       </Typography>
     </div>

diff --git a/src/components/characters/CharacterCardLastLocation.tsx b/src/components/characters/CharacterCardLastLocation.tsx
@@ -33,7 +33,7 @@ export default function CharacterCardLastLocation({
       <Typography variant="subtitle2" component="label" color="textSecondary">
         Last known location:
       </Typography>
-      <Typography variant="subtitle1" data-cy="character-last-known-position">
+      <Typography variant="subtitle1" component="div" data-cy="character-last-known-position">
         {character.location.name}
       </Typography>
     </div>

diff --git a/src/components/characters/CharacterCardTitle.tsx b/src/components/characters/CharacterCardTitle.tsx
@@ -30,7 +30,7 @@ export default function CharacterCardTitle({ character, isLoading }: { character
         <Typography className={classes.ellipsis} component="h2" variant="h5" data-cy="character-name">
           {character.name}
         </Typography>
-        <Typography variant="subtitle2" data-cy="character-status-species">
+        <Typography variant="subtitle2" component="span" data-cy="character-status-species">
           {character.status} - {character.species}
         </Typography>
       </Grid>

diff --git a/src/components/characters/CharactersFullScreenDialog.tsx b/src/components/characters/CharactersFullScreenDialog.tsx
@@ -61,11 +61,17 @@ export default function CharactersFullScreenDialog() {
       scroll="paper"
       open={open || false}
       onClose={handleClose}
+      role="presentation"
       TransitionComponent={Transition as React.ComponentType<TransitionProps>}
     >
       <AppBar className={classes.appBar}>
         <Toolbar>
-          <Typography data-cy="characters-fullscreen-dialog-title" variant="h6" className={classes.title}>
+          <Typography
+            data-cy="characters-fullscreen-dialog-title"
+            variant="h6"
+            component="span"
+            className={classes.title}
+          >
             {title}
           </Typography>
           <IconButton

diff --git a/src/components/episodes/EpisodeCardAirDate.tsx b/src/components/episodes/EpisodeCardAirDate.tsx
@@ -27,7 +27,7 @@ export default function EpisodeCardAirDate({ episode, isLoading }: { episode: Ep
       <Typography variant="subtitle2" component="label" color="textSecondary">
         Air date:
       </Typography>
-      <Typography variant="subtitle1" data-cy="episode-air-date">
+      <Typography variant="subtitle1" component="div" data-cy="episode-air-date">
         {episode.air_date}
       </Typography>
     </div>

diff --git a/src/components/episodes/EpisodeCardEpisode.tsx b/src/components/episodes/EpisodeCardEpisode.tsx
@@ -27,7 +27,7 @@ export default function EpisodeCardEpisode({ episode, isLoading }: { episode: Ep
       <Typography variant="subtitle2" component="label" color="textSecondary">
         Episode:
       </Typography>
-      <Typography variant="subtitle1" data-cy="episode-episode">
+      <Typography variant="subtitle1" component="div" data-cy="episode-episode">
         {episode.episode}
       </Typography>
     </div>