Merge pull request #1618 from target/fix-quick-links

ui: prevent screen reader stutter on quick links
target · Jun 14, 2021 · 47e2333 · 47e2333
2 parents e7729e1 + 0e4ea2a
commit 47e2333
Showing 1 changed file with 14 additions and 10 deletions.
diff --git a/web/src/app/details/DetailsPage.tsx b/web/src/app/details/DetailsPage.tsx
@@ -1,4 +1,4 @@
-import React, { cloneElement } from 'react'
+import React, { cloneElement, forwardRef } from 'react'
 import { makeStyles } from '@material-ui/core/styles'
 import { isWidthDown } from '@material-ui/core'
 import Card from '@material-ui/core/Card'
@@ -10,14 +10,12 @@ import { ChevronRight } from '@material-ui/icons'
 import List from '@material-ui/core/List'
 import ListItem from '@material-ui/core/ListItem'
 import ListItemText from '@material-ui/core/ListItemText'
-import ListItemSecondaryAction from '@material-ui/core/ListItemSecondaryAction'
-import IconButton from '@material-ui/core/IconButton'
 import { ReactNode } from 'react-markdown'
 
 import Notices, { Notice } from './Notices'
 import Markdown from '../util/Markdown'
 import CardActions, { Action } from './CardActions'
-import AppLink from '../util/AppLink'
+import AppLink, { AppLinkProps } from '../util/AppLink'
 import useWidth from '../util/useWidth'
 import statusStyles from '../util/statusStyles'
 
@@ -66,6 +64,16 @@ const useStyles = makeStyles({
   },
 })
 
+const LIApplink = forwardRef<HTMLAnchorElement, AppLinkProps>(
+  function LIApplink(props, ref): JSX.Element {
+    return (
+      <li>
+        <AppLink ref={ref} {...props} />
+      </li>
+    )
+  },
+)
+
 export default function DetailsPage(p: DetailsPageProps): JSX.Element {
   const classes = useStyles()
   const width = useWidth()
@@ -168,7 +176,7 @@ export default function DetailsPage(p: DetailsPageProps): JSX.Element {
                 <ListItem
                   key={idx}
                   className={linkClassName(li.status)}
-                  component={AppLink}
+                  component={LIApplink}
                   to={li.url}
                   button
                 >
@@ -179,11 +187,7 @@ export default function DetailsPage(p: DetailsPageProps): JSX.Element {
                     }
                     secondary={li.subText}
                   />
-                  <ListItemSecondaryAction>
-                    <IconButton component={AppLink} to={li.url}>
-                      <ChevronRight />
-                    </IconButton>
-                  </ListItemSecondaryAction>
+                  <ChevronRight />
                 </ListItem>
               ))}
             </List>