reactjs - 如何使用键盘 Tab 键聚焦于 Material UI Link(不使用组件 ="button")

Question

我不明白如何使用键盘中的 Tab 键来关注 Material UI Link。我将链接放置在按钮内以完成工作。但是有什么方法可以仅使用 Link.js 来满足我的需求吗？我将删除codesandbox 链接以获取完整详细信息。提前致谢。

沙盒链接:https://codesandbox.io/s/material-demo-forked-4evbh?file=/demo.tsx

来自沙箱的代码:

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

Answer 1

来自Accessibility portion Link的文档:

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

文档中的示例如下:

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

当您不指定 component="button" 时，Link 的默认组件将是 <a>标签，但是 <a>没有 href 的标签属性未接收键盘焦点。