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.

Sign up for GitHub

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
Merged

fix(axe.d.ts): allow Node for include/exclude object #3338

Show file tree
Hide file tree
Changes from 3 commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
7f2e73c
fix(axe.d.ts): allow Node for include/exclude object
straker Jan 7, 2022
cd0abcf
typo
straker Jan 7, 2022
0373475
Update typings/axe-core/axe-core-tests.ts
straker Jan 7, 2022
26e1543
use Array instead NodeList
straker Jan 10, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 2 additions & 2 deletions axe.d.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -50,8 +50,8 @@ declare namespace axe {
type CrossFrameSelector = CrossTreeSelector[];

type ContextObject = {
include?: BaseSelector | Array<BaseSelector | BaseSelector[]>;
exclude?: BaseSelector | Array<BaseSelector | BaseSelector[]>;
include?: Node | BaseSelector | Array<Node | BaseSelector | BaseSelector[]>;
exclude?: Node | BaseSelector | Array<Node | BaseSelector | BaseSelector[]>;
Comment on lines +53 to +54
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[]>;

};

type RunCallback = (error: Error, results: AxeResults) => void;
Expand Down
2 changes: 1 addition & 1 deletion doc/API.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -327,7 +327,7 @@ By default, `axe.run` will test the entire document. The context object is an op
The include exclude object is a JSON object with two attributes: include and exclude. Either include or exclude is required. If only `exclude` is specified; include will default to the entire `document`.

- A node, or
- An array of arrays of [CSS selectors](./developer-guide.md#supported-css-selectors)
- An array of Nodes or an array of arrays of [CSS selectors](./developer-guide.md#supported-css-selectors)
- If the nested array contains a single string, that string is the CSS selector
- If the nested array contains multiple strings
- The last string is the final CSS selector
Expand Down
2 changes: 1 addition & 1 deletion typings/axe-core/axe-core-tests.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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 •
edited
Loading

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 •
edited
Loading

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).

var options = { iframes: false, selectors: false, elementRef: false };

axe.run(context, {}, (error: Error, results: axe.AxeResults) => {
Expand Down