search

microsoft / tslint-microsoft-contrib

A set of TSLint rules used on some Microsoft projects.
MIT License
702 stars 198 forks source link

react-a11y-anchors: false positive for hidden content #891

Closed isellsoap closed 4 years ago

isellsoap commented 5 years ago

Bug Report

TypeScript code being linted

/* … beginning of component definition, not important for this issue … */
const altText = 'Share with Facebook'

return (
  <a href={shareUrl} title={altText} target="_blank" rel="noopener noreferrer" {...props}>
    <svg
      aria-hidden
      xmlns="http://www.w3.org/2000/svg"
      viewBox="0 0 9 18"
    >
      <path d="M8.4 5.9H5.58V4.33c0-.8.09-1.24 1.25-1.24h1.55V0H5.9C2.9 0 1.86 1.5 1.86 4.03V5.9H0V9h1.86v9H5.6V9h2.48l.33-3.1z" />
    </svg>
    <VisuallyHidden>{altText}</VisuallyHidden>
  </a>
)
/* … ending component definition, not important for this issue … */

with tslint.json configuration:

{
  "defaultSeverity": "error",
  "extends": [
    "tslint:recommended",
    "tslint-react",
    "tslint-react-a11y", // <-- this is where tslint-microsoft-contrib is being referenced from
    "tslint-config-prettier",
    "tslint-react-hooks"
  ],
// other unimportant stuff to this issue …

Actual behavior

Linting error is being thrown with message 

Link content can not be hidden for screen-readers by using aria-hidden attribute.

Expected behavior

As the link has an accessible text that screenreaders can access and read (via <VisuallyHidden>{altText}</VisuallyHidden>) I would expect that such an error shouldn’t occur.

HamletDRC commented 5 years ago

Thank you for taking the time to submit such a well written bug report!

What exactly is VisuallyHidden? Is it a reference to the ReachUI library?

isellsoap commented 5 years ago

The answer to the second question is yes. :-) But VisuallyHidden is not necessary for the issue, the false positive also shows up when you write {altText} instead of <VisuallyHidden>{altText}</VisuallyHidden>.

JoshuaKGoldberg commented 4 years ago

💀 It's time! 💀

TSLint is deprecated and no longer accepting pull requests other than security fixes. See #876. ☠️ We recommend you instead use typescript-eslint to lint your TypeScript code with ESLint. ✅

👋 It was a pleasure open sourcing with you!