如何使用键盘tab键关注Material UI Link（不使用component =“button”）答案

【问题标题】：How to get focus on Material UI Link(without using component="button") using keyboard tab key如何使用键盘tab键关注Material UI Link（不使用component =“button”）
【发布时间】：2021-04-18 09:34:58
【问题描述】：

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

沙盒链接：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>
  );
}

【问题讨论】：

不想用component="button"的原因是什么？
@RyanCogswell 我正在使用 NVDA 屏幕阅读器。当我使用 component="button" 时，屏幕阅读器会显示并读取链接作为按钮。我尝试在 Link 中使用 aria-label ，但没有解决问题。有没有办法解决这个问题？谢谢。
如果屏幕阅读器没有href，则不适合将其读取为“链接”。当屏幕阅读器告诉某人他们在链接上时，这会让他们知道某些操作可用，例如在新选项卡或窗口中打开链接。对于只有 onClick 处理程序而没有任何 href 的元素，这些操作是不可能的。您已决定让这个元素看起来像一个链接，但屏幕阅读器并不关心它的外观——它仍然只是一个按钮。

标签： reactjs react-hooks material-ui

【解决方案1】：

来自Link 文档的Accessibility portion：

如果链接没有有意义的href，则应使用<button> 元素呈现。

文档中的示例如下：

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> 标记，但没有href 属性的<a> 标记不会接收键盘焦点。

【讨论】：

我们的项目中有一个文件上传功能。为此，我们使用了并且标签是 upload。这里基本上上传选项显示在一个对话框中。当我在 Link 标签中使用 component="button" 时，对话框会自动关闭而不上传图片。
@GowthamManthena 如果添加type="button"（除了component="button"），是否解决了问题？
不。除了组件=“按钮”之外，我还添加了类型=“按钮”。但它没有用。

【解决方案2】：

使用全局 tabindex 属性

<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>

【讨论】：

谢谢伙计。但是我在同一页面中有三个链接。我正在使用 WAVE 评估工具，它是一个 chrome 扩展。当我向 Links WAVE 工具提供三个不同的 tabIndex 值时，会显示“存在正的 tabindex 值”的警告。将同一页面中所有链接的 tabIndex 值设为零是否正确？
是的，请花一点时间查阅我链接的文档。应避免分配大于 0 的值。还要考虑可以说更好的答案provided below