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

Sd/region check #450

Merged
merged 5 commits into from
Jul 20, 2017
Merged

Sd/region check #450

merged 5 commits into from
Jul 20, 2017

Conversation

WilcoFiers
Copy link
Contributor

@WilcoFiers WilcoFiers commented Jul 18, 2017

This closes #389. It reuses parts of #447 and #448.

I found a few problems which this check that I resolved in addition to the shadow DOM work:

  • Implicit landmarks were not accepted (e.g. <main>)
  • Hidden text in things like scripts would be flagged
  • The requirement for a skiplink in this check was actually more strict then it is in bypass
  • The overall readability of this check wasn’t good

@dylanb
Copy link
Contributor

dylanb commented Jul 18, 2017

@WilcoFiers can you rebase this change onto the merged shadowDOM branch?

@marcysutton
Copy link
Contributor

We should use git rebase and a force push on the branch to avoid merge messages. Or, we could squash this into one commit when we merge it.

firstLink = node.querySelector('a[href]');
const skipLink = getSkiplink(virtualNode);
const landmarkRoles = aria.getRolesByType('landmark');
const implicitLandmarks = landmarkRoles
Copy link
Contributor

Choose a reason for hiding this comment

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

Can you add a comment about how this code works?

Copy link
Contributor

@marcysutton marcysutton left a comment

Choose a reason for hiding this comment

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

Added a few comments, and the integration tests are failing–should those be fixed in this PR? There is also a merge conflict.

return firstLink &&
axe.commons.dom.isFocusable(axe.commons.dom.getElementByReference(firstLink, 'href')) &&
firstLink === n;
// Check if the current element it the skiplink
Copy link
Contributor

Choose a reason for hiding this comment

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

typo in the comment: it => is

@@ -77,6 +77,13 @@ describe('dom.hasContent', function () {
);
});

it('is false if noRecurstion is true and the content is not in a child', function () {
Copy link
Contributor

Choose a reason for hiding this comment

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

Typo: noRecurstion

@@ -1,5 +1,23 @@
var testUtils = {};

testUtils.MockCheckContext = function () {
Copy link
Contributor

Choose a reason for hiding this comment

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

👍

});

it('should considered aria labelled elements as content', function () {
var checkArgs = checkSetup('<div id="target"><div aria-label="axe-core logo"></div><div role="main">Content</div></div>');
Copy link
Contributor

Choose a reason for hiding this comment

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

Shouldn't this DIV have a role on it for aria-label to be considered content? It isn't exposed consistently for non-interactive elements or landmarks in my experience

Copy link
Contributor Author

Choose a reason for hiding this comment

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

It doesn't matter for the test, but I think you're right. Adding role="img".

assert.lengthOf(checkContext._relatedNodes, 0);
});

(shadowSupport.v1 ? it : xit)('should ignore skiplink targets inside shadow trees', function () {
Copy link
Contributor

Choose a reason for hiding this comment

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

Ooh, good one.

var div = document.createElement('div');
div.innerHTML = '<span id="foo">Content!</span>';
var shadow = div.attachShadow({ mode: 'open' });
shadow.innerHTML = '<a href="#foo">skiplink</a><div role="main"><slot></slot></div>';
Copy link
Contributor

Choose a reason for hiding this comment

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

The href is inside the shadow DOM, but the IDref is in the light DOM...? How does that work?

Copy link
Contributor Author

Choose a reason for hiding this comment

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

The href attribute isn't an IDREF attribute. It's a URL, which can only point to light DOM IDs/names. Pretty sure longdesc can't point to things inside shadow DOM for the same reason either.

@WilcoFiers
Copy link
Contributor Author

@marcysutton Comments should be resolved. I'll squash moving this into shadowDOM. I had some difficulties rebasing, as it got me conflicts. Wan't too sure how to best get around those. Suggestions?

@marcysutton
Copy link
Contributor

I usually resolve the conflicts manually when I rebase. But often for a lot of commits it just isn't worth the time, so a squash and merge is easier.

@dylanb dylanb merged commit 70c72b4 into shadowDOM Jul 20, 2017
@dylanb dylanb deleted the sd/region-check branch July 20, 2017 18:27
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