reactjs - 将可访问性 Prop 传递给 Material UI 按钮

Question

我想为 Material UI Button 添加辅助功能.

我希望按如下方式使用此自定义按钮:

import Button from '@material-ui/core/Button';

function AccessibleButton(props) {
  const { accessKey, ariaLabel, isDisabled, label, onClick, tabIndex, variant, size} = props;
  return (
    <Button
      accesskey={accessKey}
      aria-label={ariaLabel}
      disabled={isDisabled}
      className={componentCls}
      onClick={onClick}
      tabindex={tabIndex}
      variant={variant}
      size={size}
    >
      {label}
    </Button>
  );
};

Aria 标签可用于 inputs ，但似乎不适用于按钮。如何将附加 Prop (assessKey、ariaLabel)传递到 Material UI 按钮中。我该怎么做呢？

Answer 1

这应该有效，因为我们的大多数组件都会转发它们多余的 Prop 。在相应的 api 页面(这里是 https://material-ui.com/api/button/ )你会找到一个带有明显 Prop 的表格。下面是一个注释，告诉你多余的 Prop 会发生什么。

导航有点不确定(我们正在研究它)但最后你会看到多余的 Prop 被转发到 native 元素。所以<Button aria-label="ariaLabel" />将呈现 <button aria-label="ariaLabel" /> .