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(axe.d.ts): allow Node for include/exclude object #3338

Merged
merged 4 commits into from
Jan 12, 2022

Conversation

straker
Copy link
Contributor

@straker straker commented Jan 7, 2022

These all work correctly:

const div = document.querySelector('div');
await axe.run({ include: div });
await axe.run({ include: [div] });
await axe.run({ include: doument.querySelectorAll('div') });

Closes issue: #3334

@straker straker requested a review from a team as a code owner January 7, 2022 16:04
typings/axe-core/axe-core-tests.ts Outdated Show resolved Hide resolved
Co-authored-by: Stephen Mathieson <me@stephenmathieson.com>
@@ -1,7 +1,7 @@
import * as axe from '../../axe';

var context: any = document;
var $fixture: any = {};
var $fixture = document.querySelectorAll('div');
Copy link
Contributor

Choose a reason for hiding this comment

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

I'm a little surprised this works, since QSA returns a NodeList rather than an array. Should we explicitly mention NodeList?

Copy link
Contributor Author

@straker straker Jan 10, 2022

Choose a reason for hiding this comment

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

Looked into this. It looks like it doesn't matter what exactly is passed in for the include/exclude object so long as it is array-like. Once we get the context object we immediately call parseSelectorArray, which loops over the context include/object object using a for loop that looks at the length of the object to resolve them as VirtualNodes.

I'm OK if we don't mention this particular case for now. We should loop back to this and determine if it's something we explicitly want to support, and if so add an official test to our code to ensure it continues to work.

Copy link
Member

Choose a reason for hiding this comment

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

In that case, wouldn't ArrayLike<Node> be the best option?

Copy link
Contributor Author

@straker straker Jan 10, 2022

Choose a reason for hiding this comment

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

If we decide to officially support it then ya, that should be the correct type. For now I'm going to change the ts test to not use querySelectorAll and will update it back in another pr if we decide to support it (along with the proper test and doc updates).

Comment on lines +53 to +54
include?: Node | BaseSelector | Array<Node | BaseSelector | BaseSelector[]>;
exclude?: Node | BaseSelector | Array<Node | BaseSelector | BaseSelector[]>;
Copy link
Member

Choose a reason for hiding this comment

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

NBD, but it sounds like this should be:

Suggested change
include?: Node | BaseSelector | Array<Node | BaseSelector | BaseSelector[]>;
exclude?: Node | BaseSelector | Array<Node | BaseSelector | BaseSelector[]>;
include?: Node | BaseSelector | ArrayLike<Node> | Array<BaseSelector | BaseSelector[]>;
exclude?: Node | BaseSelector | ArrayLike<Node> | Array<BaseSelector | BaseSelector[]>;

@straker straker merged commit e699939 into develop Jan 12, 2022
@straker straker deleted the fix-include-typing branch January 12, 2022 17:24
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