Use layering approach to fix keyboard access to view, improve screenr…

…eader text (#1473) (#1475)

* Fixes #1473 - User can't select cards on dashboard (views) via keyboard

* Use layering approach; fix linting errors

* Tweak a couple things

* Change to img, add aria-label to help link to improve screenreader text

* Improve enable aria-label

* Remove unused CSS class; adjust percentages to mirror previous state

---------

Co-authored-by: Code Hugger (Matthew Jones) <jonespm@umich.edu>

assets/src/components/SelectCard.js

@@ -21,7 +21,8 @@ const styles = theme => ({
   },
   media: {
     height: 140,
-    backgroundSize: 'auto'
+    backgroundSize: 'auto',
+    objectFit: 'scale-down'
   },
   content: {
     height: 110,
@@ -43,20 +44,20 @@ const styles = theme => ({
     color: 'black',
     height: '100%'
   },
-  titleIcon: {
-    paddingBottom: '0px'
-  },
   titleLink: {
     color: 'white'
   },
   infoLink: {
     color: 'white'
   },
-  viewLink: {
-    outline: 'none',
-    textDecoration: 'none',
-    color: 'white',
-    height: '100%'
+  help: {
+    position: 'absolute',
+    zIndex: 1,
+    bottom: '21%',
+    right: '5.5%'
+  },
+  mainCardContainer: {
+    position: 'relative'
   },
   wrapper: {
     margin: theme.spacing(1),
@@ -119,7 +120,7 @@ const SelectCard = props => {
     )
   }
 
-  var saveAsync = function (isEnabled) {
+  const saveAsync = function (isEnabled) {
     const payload = Object()
     payload[viewCode] = { enabled: isEnabled }
     const dataURL = `/api/v1/courses/${courseId}/update_info/`
@@ -140,27 +141,39 @@ const SelectCard = props => {
   function getCardImage (cardData) {
     if (cardData && cardData.image) {
       return (
-        <>
-          <Link className={classes.viewLink} tabIndex={-1} to={cardData.path}>
-            <CardMedia className={classes.media} image={cardData.image} title={cardData.title} />
-          </Link>
-        </>
+        <div>
+          <CardMedia
+            component='img'
+            className={classes.media}
+            src={cardData.image}
+            alt={`Image of ${cardData.title} chart`}
+          />
+        </div>
       )
     } else {
       return null
     }
   }
 
   function getHelpLink (cardData) {
+    const label = 'About ' + cardData.title
     if (cardData.helpUrl) {
       return (
-        <Typography gutterBottom variant='h5' component='p' className={classes.title + ' ' + classes.titleIcon}>
-          <Tooltip title={'About ' + cardData.title}>
-            <MUILink className={classes.infoLink} href={cardData.helpUrl} target='_blank' rel='noopener noreferrer'>
-              <InfoIcon fontSize='large' />
-            </MUILink>
-          </Tooltip>
-        </Typography>
+        <div class={classes.help}>
+          <Typography gutterBottom variant='h5' component='p'>
+            <Tooltip title={label}>
+              <MUILink
+                className={classes.infoLink}
+                href={cardData.helpUrl}
+                target='_blank'
+                rel='noopener noreferrer'
+                aria-label={label}
+              >
+                <InfoIcon fontSize='large' />
+              </MUILink>
+            </Tooltip>
+          </Typography>
+        </div>
       )
     }
   }
@@ -172,32 +185,29 @@ const SelectCard = props => {
       <CardContent className={classes.content}>
         <Grid container className={classes.titleArea}>
           <Grid item xs={10}>
-            <Link tabIndex={-1} to={cardData.path} className={classes.viewLink}>
-              <Typography gutterBottom variant='h5' component='h2' className={classes.title}>
-                {cardData.title}
-              </Typography>
-            </Link>
-          </Grid>
-          <Grid item xs={2}>
-            {getHelpLink(cardData)}
+            <Typography gutterBottom variant='h5' component='h2' className={classes.title}>
+              {cardData.title}
+            </Typography>
           </Grid>
         </Grid>
-        <Link tabIndex={-1} to={cardData.path} className={classes.viewLink}>
-          <Typography component='p' className={classes.description}>
-            {cardData.description}
-          </Typography>
-        </Link>
-      </CardContent>)
+        <Typography component='p' className={classes.description}>
+          {cardData.description}
+        </Typography>
+      </CardContent>
+    )
 
     return <>{cardImage}{cardContent}</>
   }
 
   return (
     <>
       <Card className={classes.card} elevation={2}>
-        <CardActionArea>
-          {getLinkContents(cardData)}
-        </CardActionArea>
+        <div class={classes.mainCardContainer}>
+          <CardActionArea component={Link} to={cardData.path}>
+            {getLinkContents(cardData)}
+          </CardActionArea>
+          {getHelpLink(cardData)}
+        </div>
         {
           isTeacherOrAdmin(props.isAdmin, props.enrollmentTypes)
             ? (
@@ -208,7 +218,7 @@ const SelectCard = props => {
                     <div className={classes.wrapper}>
                       <Fab
                         size='small'
-                        aria-label='save'
+                        aria-label={`Enable ${cardData.title} view`}
                         color='primary'
                         className={buttonClassname}
                         onClick={() => { save(!enabled) }}
@@ -228,7 +238,8 @@ const SelectCard = props => {
                   {enabled ? 'Enabled' : 'Disabled'}
                 </CardActions>
               </>
-            ) : null
+              )
+            : null
         }
       </Card>