Skip to content
This repository has been archived by the owner on Jul 15, 2023. It is now read-only.

react-a11y-anchors should accept content when given a child component #433

Closed
astorije opened this issue Jun 5, 2018 · 1 comment
Closed

react-a11y-anchors should accept content when given a child component #433

astorije opened this issue Jun 5, 2018 · 1 comment
Labels
Difficulty: Easy Someone with little to no experience in TSLint should be able to send a pull request for this issue. Domain: Accessibility Rules around accessibility verification, commonly react-a11y-*. Status: Accepting PRs Type: Rule Feature Adding a feature to an existing rule.
Milestone
6.0.0-beta

Comments

@astorije
Copy link
Contributor

astorije commented Jun 5, 2018

react-a11y-anchors passes on the following snippets (assuming each line is a different file as I am focusing this issue on text and not href):

<a href="https://example.com">Hello world</a>
<a href="https://example.com"><TextWrapper>Hello world</TextWrapper></a>

However, it fails on the following ones:

<a href="https://example.com"><TextWrapper /></a>
<a href="https://example.com"><TextWrapper value="Hello world" /></a>

It's not an uncommon situation, for example when rendering translated strings.

I think it would be reasonable to take eslint-plugin-jsx-a11y's approach: accept any React component as valid content, unless it has a aria-hidden prop.
Thoughts?
@JoshuaKGoldberg JoshuaKGoldberg added Status: Accepting PRs Difficulty: Easy Someone with little to no experience in TSLint should be able to send a pull request for this issue. Type: Rule Feature Adding a feature to an existing rule. Domain: Accessibility Rules around accessibility verification, commonly react-a11y-*. labels Jul 4, 2018
@br1anchen
Copy link
Contributor

@astorije According to eslint-plugin-jsx-a11y, it should pass:

<a dangerouslySetInnerHTML={{ __html: 'foo' }} />

I am not sure if we should support this too, it might be out of this issue scope here.

@br1anchen br1anchen mentioned this issue Oct 9, 2018
Merged
JoshuaKGoldberg pushed a commit that referenced this issue Oct 15, 2018
@br1anchen
Fix #433: react-a11y-anchors should accept child component (#538)
a4578fb 
* Add react component as conent test case

* Add check for react component as content,
and check for aria-hidden attribute
@JoshuaKGoldberg JoshuaKGoldberg added this to the 6.0.0-beta0 milestone Nov 6, 2018
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Assignees
No one assigned
Labels
Difficulty: Easy Someone with little to no experience in TSLint should be able to send a pull request for this issue. Domain: Accessibility Rules around accessibility verification, commonly react-a11y-*. Status: Accepting PRs Type: Rule Feature Adding a feature to an existing rule.
Projects
None yet
Milestone
6.0.0-beta
Development

No branches or pull requests
3 participants
@astorije @br1anchen @JoshuaKGoldberg