Eslint-plugin-jsx-a11y: Potential bug for rule of anchor-has-content

[mondwan]

According to the description here,

Accessible means that it is not hidden using the aria-hidden prop

Code below should not be an error.

$ cat a.jsx 
'use strict';

var React;

function a() {
    return <a aria-hidden />;
}

However,

$ eslint a.jsx

/home/mondwan/Documents/codeTest/eslintRules/a.jsx
  6:12  error  Anchors must have content and the content must be accessible by a screen reader  jsx-a11y/anchor-has-content

✖ 1 problem (1 error, 0 warnings)

Version

$ eslint --version
v3.18.0
$ cat .eslint.json 
{
  "rules": {
    "jsx-a11y/anchor-has-content": [
      "error",
      {
        "components": [
          ""
        ]
      }
    ],
  },
  "parserOptions": {
    "ecmaVersion": 5,
  },
  "parser": "/usr/lib/node_modules/babel-eslint/index.js",
  "ecmaFeatures": {
    "jsx": true
  },
  "plugins": [
    "react",
    "import",
    "jsx-a11y"
  ]
}

[ljharb]

"Accessible means that it is not hidden using the aria-hidden prop" - thus, it's not accessible, and an error, when it is hidden.

<a aria-hidden /> is synonymous with <a aria-hidden={true} />, which is hidden, and thus not accessible, and thus should be an error.

The rule isn't saying that it doesn't have to have content if it's hidden; it's saying that anchors always must both have content and be visible.

[mondwan]

But what if I am doing this on purpose? For example, I really need a hidden
link some where and triggered​ a file download. No accessibility here.

How do I discard such warning? Currently, I need to disable this rule by
typing eslint ... : 0

[wyattdanger]

You only want it hidden from assistive technology, or you want it hidden from everything? You could hide it with CSS or the hidden attribute.

[ljharb]

@mondwan why would you want to trigger a file download when the user didn't explicitly click on a real link to request it?

[mondwan]

This is my scenario. There is a button ( to be specific) with name
EXPORT. I will create a link ( to be specific) and injects the exported
contents via blob URL. Then, click it programmatically in order to trigger
a download.

Therefore, that link should be hidden from the UI. (CSS Display: none to be
specific). Now the question is that kind of "download link" is not a kind
of accessable link.

Therefore, I add an property with aria-hidden and display none etc
(if necessary) to stress on this.

2017年3月23日 13:38，"Jordan Harband" [e-mail]寫道：

@mondwan https://github.com/mondwan why would you want to trigger a
file download when the user didn't explicitly click on a real link to
request it?

—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
https://github.com/evcohen/eslint-plugin-jsx-a11y/issues/195#issuecomment-288622437,
or mute the thread
https://github.com/notifications/unsubscribe-auth/ADuAozjaJ3YCGnaYayfXkIlrHuHErFufks5rogVkgaJpZM4Mk17D
.

[ljharb]

I'd just make that two clicks - the button to prepare the content, and then the link for the user to download when needed.

[mondwan]

Umm, why click twice if one is sufficient?

Back to the question, why accessibility is enforced even I have declared this is a hidden link?

[ljharb]

One isn't sufficient. You need one for the download for it to be semantically correct.

imo because hidden links aren't accessible; that's the point.

[mondwan]

Never mind. Then, I simply disable the rule. Thanks for the answer.