Pass Accessibility Props to Material UI Button

Question

I want to add accessibility features to the Material UI Button.

I expect to use this custom button as follows:

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 labels are available for inputs, but don't seem to be for buttons. How do I pass the additional props (accessKey, ariaLabel) into the Material UI Button. How do I do this?

Answer 1

This should work since most of our components forward their excess props. On the corresponding api pages (here https://material-ui.com/api/button/) you will find a table with the apparent props. Below that is a note that tells you what happens with excess props.

It's a bit iffy to navigate (we're working on it) but in the end you'll see that excess props are forwarded to the native element. So <Button aria-label="ariaLabel" /> will render a <button aria-label="ariaLabel" />.