0

When using the WebHint VSCode extension with React code, I often have this false positive issue:

Buttons must have discernible text: Element has no title attribute

webhint(axe/name-role-value)

With JSX such as:

function MyButton({ labelId, onClick }) {
  return (
    <button type="button" onClick={onClick}>
      <FormattedMessage id={labelId} />
    </button>
  );
}

Is there a way to make WebHint treat <FormatedMessage> as a proper label?

Valentin
  • 10,769
  • 2
  • 17
  • 27

1 Answers1

0

Add a title attribute to the button and set it to the text that is displayed by the component. This should prevent WebHint from barking at you. It provides a descriptive label to the button that can be read by screen readers.

function MyButton({ labelId, onClick }) {
  return (
    <button type="button" onClick={onClick} title={<FormattedMessage id={labelId} />}>
      <FormattedMessage id={labelId} />
    </button>
  );
}
SaidTheHypocrite
  • 39
  • 1
  • 4
  • 1
    The thing is that `` resolves as text in the DOM when rendered. Also, you can't put JSX in the `title` attribute, it results in rendering: `` – Valentin Apr 07 '23 at 07:26