Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fix(valid-lang): ignore lang on elements with no text #3523

Merged
merged 7 commits into from
Jul 7, 2022

Conversation

WilcoFiers
Copy link
Contributor

@WilcoFiers WilcoFiers commented Jun 28, 2022

Have the valid-lang rule ignore lang attributes on elements without text, of where its text is in a child node with yet another lang attribute.

Closes issue: #3465

Following this PR, i'll make not-html-matches deprecated in #3524, to get the tests on this one passing though I'm already taking out the tests for it.

@WilcoFiers WilcoFiers requested a review from a team as a code owner June 28, 2022 14:23
@WilcoFiers WilcoFiers requested a review from straker June 28, 2022 14:23
@WilcoFiers WilcoFiers marked this pull request as draft June 28, 2022 14:35
@WilcoFiers WilcoFiers marked this pull request as ready for review June 29, 2022 16:58
Copy link
Contributor

@straker straker left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

While we're here, do we need to handle aria-owns applying the lang attribute to the owned children?

<div role="list" lang="fr" aria-owns="contents"></div>
<div id="contents" role="none">
  <div role="listitem">Ceci est un paragraphe</div>
</div>

In JAWS / Chrome and JAWS / Edge, JAWS applies the French accent to the owned listitems. However our code would treat the lang node as having no children text nodes.

For completeness:

  • NVDA / Firefox - only applies French accent when the #contents element has the lang
  • JAWS / IE11 - only applies French accent when the #contents element has the lang
  • VO / Safari - I couldn't get this one to work as VoiceOver seems to ignore the lang attribute and autodetect the language from the sentence? Tried various combinations of words and using or not using lang and VoiceOver would just apply whatever language it thought the sentence was

function isVisualContent(el) {
const vNode = el instanceof AbstractVirtualNode ? el : getNodeFromTree(el);
const role = axe.commons.aria.getExplicitRole(vNode);
console.log({ role })
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
console.log({ role })

test/commons/dom/has-lang-text.js Outdated Show resolved Hide resolved
'radio',
'range',
Copy link
Contributor Author

@WilcoFiers WilcoFiers Jun 30, 2022

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Range is an abstract role. This should've never been here. I replaced it with roles that inherit from range.

@@ -79,7 +79,7 @@ <h2>Ok</h2>
<title>I am a circle</title>
<circle cx="50" cy="50" r="40" fill="yellow"></circle>
</svg>
<div lang="en"></div>
<div lang="en">English</div>
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Since this is now inapplicable, rather than a pass.

var rule;

beforeEach(function() {
rule = axe.utils.getRule('valid-lang');
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

There's no way to run these tests, since there's no way to get at the matcher. I'm deprecating the matcher in #3524

}
if (virtualNode.props.nodeType === 1 && isVisualContent(virtualNode)) {
// See: https://github.com/dequelabs/axe-core/issues/3281
return !!axe.commons.text.accessibleTextVirtual(virtualNode);
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

this call here is going to be slow

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Possibly, although it'll be rare. You generally don't see people put lang attributes on images with aria-labelledby or whatever.

"selector": "[lang], [xml\\:lang]",
"matches": "not-html-matches",
"selector": "[lang]:not(html), [xml\\:lang]:not(html)",
"matches": "has-lang-text-matches",
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Could we switch these around? I.e. only look for the text if the lang value is invalid?


return false;
if ( // Except for `html`, ignore elements with no text
virtualNode.props.nodeName !== 'html' &&
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

dylanb
dylanb approved these changes Jul 6, 2022
@WilcoFiers
Copy link
Contributor Author

As responded on slack, I don't think AAA rules should be enabled by default. It creates duplicate issues, like 99% of the times this rule fails, so does the AA version of it. And we probably don't want color-contrast-enhanced running by default.

@WilcoFiers WilcoFiers merged commit fd85f39 into develop Jul 7, 2022
@WilcoFiers WilcoFiers deleted the valid-lang-act-fix branch July 7, 2022 14:44
straker pushed a commit that referenced this pull request Jul 13, 2022
* fix(valid-lang): ignore lang on elements with no text

* Delete broken / unnecessary test

* Fix failing tests

* fix broken test

* Address feedback

* Disable flakey IE test

* Make hasLangText part of valid-lang check
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants