CODEWITHSUNDEEP
reactjsreact-hooksmaterial-ui
Gowtham Manthena
Gowtham Manthena

Reputation: 279

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

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>
  );
}

Upvotes: 2

Views: 2807

Answers (2)

Ryan Cogswell
Ryan Cogswell

Reputation: 80996

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.

Upvotes: 2

hotpink
hotpink

Reputation: 3226

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>

Upvotes: 1

Related Questions