How to get focus on Material UI Link(without using component="button") using keyboard tab key

user_14939989 0
Viewed 1219

I don't understand how to get focus on Material UI Link using Tab key in keyboard. I am placing Link inside a Button to get the job done. But is there any way to achieve my need using only Link. I'm dropping the codesandbox link for full details. Thanks in advance.

sandbox link: https://codesandbox.io/s/material-demo-forked-4evbh?file=/demo.tsx

Code from sandbox:

/* eslint-disable jsx-a11y/anchor-is-valid */
import React from "react";
import { makeStyles, createStyles, Theme } from "@material-ui/core/styles";
import Link from "@material-ui/core/Link";
import Typography from "@material-ui/core/Typography";

const useStyles = makeStyles((theme: Theme) =>
  createStyles({
    root: {
      "& > * + *": {
        marginLeft: theme.spacing(2)
      }
    }
  })
);

export default function Links() {
  const classes = useStyles();

  const [state, setState] = React.useState(true);

  const handleClick = () => {
    setState(!state);
  };

  return (
    <Typography className={classes.root}>
      <Link onClick={handleClick}>Link</Link>
      <Typography>Click on above link to display hidden content..</Typography>
      {state ? "" : "focus on Link using Tab key?"}
    </Typography>
  );
}
material-ui react-hooks reactjs
2 Answers

use the global tabindex attribute

<Typography className={classes.root}>
  <Link onClick={handleClick} tabIndex={0}>
    Link
  </Link>
  <Typography>Click on above link to display hidden content..</Typography>
  {state ? "" : "focus on Link using Tab key?"}
</Typography>
user_112471750

From the Accessibility portion of the Link documentation:

If a link doesn't have a meaningful href, it should be rendered using a <button> element.

The example in the documentation is as follows:

import React from 'react';
import Link from '@material-ui/core/Link';

export default function ButtonLink() {
  return (
    <Link
      component="button"
      variant="body2"
      onClick={() => {
        console.info("I'm a button.");
      }}
    >
      Button Link
    </Link>
  );
}

Edit Material demo

When you don't specify component="button", the default component for Link will be an <a> tag, but an <a> tag without an href attribute does not receive keyboard focus.

user_74959300
Related