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

misc: reorganize accessibility gatherer #12076

Merged
merged 4 commits into from Mar 2, 2021
Merged

misc: reorganize accessibility gatherer #12076

merged 4 commits into from Mar 2, 2021

Conversation

brendankenny
Copy link
Member

@brendankenny brendankenny commented Feb 10, 2021

with the recent talk about the accessibility gatherer, I thought I would bring out this change which I had in another branch but is probably worth it on its own. This gatherer was written in ancient times so does some odd things, and it returns a bunch more stuff than we have in artifacts.d.ts, which means it's not usable by audits and so is wasted. axe-core also ships with types now, so we should use them :)

The goal is that it should be easier to follow and clearer where every part of the artifact comes from. No smoke test changes.

Can update after #12075 lands.

@brendankenny brendankenny requested a review from a team as a code owner February 10, 2021 21:16
@brendankenny brendankenny requested review from connorjclark and removed request for a team February 10, 2021 21:16
@google-cla google-cla bot added the cla: yes label Feb 10, 2021
const isNotApplicable = notApplicables.find(result => result.id === this.meta.id);
if (isNotApplicable) {
return {
score: 1,
score: null,
Copy link
Member Author

Choose a reason for hiding this comment

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

threw this one in for #12075 (comment) and because technically I did this, when I was updating old rawValue: trues to score: 1s all over the place :)

// Simplify `nodes` and collect nodeDetails for each.
const nodes = result.nodes.map(node => {
const {html, target, failureSummary, element} = node;
// TODO: with `elementRef: true`, `element` _should_ always be defined, but need to verify.
Copy link
Member Author

Choose a reason for hiding this comment

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

very debatable TODO. The type is {element?: HTMLElement}, true, and we could be defensive, but AFAICT with elementRef: true element is always set.

  • On the one hand I haven't been able to verify that it's always set (there doesn't seem to be a single place in the code that sets it, but maybe I'm missing it).
  • On the other hand we've been assuming that it's always set since 2016.

So...worth marking it TODO or just a comment?

Copy link
Collaborator

Choose a reason for hiding this comment

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

Ideally we could generate a warning if this invariant fails (and when it does, just skip this node and not show it in the results / or keep and fake a nodeDetails / use the body node). would require a not-ideal restructure of these two functions, so maybe not worth it generating a warning.

am hesitant to have it fail the entire run, but it is an option to just throw an error if element does not exist..

Copy link
Member Author

Choose a reason for hiding this comment

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

Ideally we could generate a warning if this invariant fails (and when it does, just skip this node and not show it in the results / or keep and fake a nodeDetails / use the body node). would require a not-ideal restructure of these two functions, so maybe not worth it generating a warning.

what do you think of beaconing to Sentry? I assume we'd get some kind of Cannot read property 'whatever' of undefined if we really did sometimes have no element, but I can't find any hint of that in Sentry for the accessibility gatherer or audits. But this way it would be explicit and we'd have as good a signal as any after a month that it really can't ever happen?

if (!returnedValue) {
throw new Error('No axe-core results returned');
}
if (!Array.isArray(returnedValue.violations)) {
Copy link
Member Author

Choose a reason for hiding this comment

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

we trust our evaluate() by now and don't do these checks in other gatherers. No need to keep these

Copy link
Collaborator

Choose a reason for hiding this comment

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

ya

@@ -102,10 +102,9 @@ describe('Accessibility: axe-audit', () => {
}
const artifacts = {
Accessibility: {
passes: [{
Copy link
Member Author

Choose a reason for hiding this comment

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

not a thing :)

Copy link
Collaborator

@connorjclark connorjclark left a comment

Choose a reason for hiding this comment

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

LGTM but needs merge with master

* @param {import('axe-core/axe').Result} result
* @return {LH.Artifacts.AxeRuleResult}
*/
function createAxeRuleResultArtifact(result) {
Copy link
Collaborator

Choose a reason for hiding this comment

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

nice idea to pull this out to its own function

// Simplify `nodes` and collect nodeDetails for each.
const nodes = result.nodes.map(node => {
const {html, target, failureSummary, element} = node;
// TODO: with `elementRef: true`, `element` _should_ always be defined, but need to verify.
Copy link
Collaborator

Choose a reason for hiding this comment

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

Ideally we could generate a warning if this invariant fails (and when it does, just skip this node and not show it in the results / or keep and fake a nodeDetails / use the body node). would require a not-ideal restructure of these two functions, so maybe not worth it generating a warning.

am hesitant to have it fail the entire run, but it is an option to just throw an error if element does not exist..

if (!returnedValue) {
throw new Error('No axe-core results returned');
}
if (!Array.isArray(returnedValue.violations)) {
Copy link
Collaborator

Choose a reason for hiding this comment

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

ya

},
{
"id": "tabindex",
Copy link
Collaborator

Choose a reason for hiding this comment

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

all these changes are correct? looks like a lot of deletions

Copy link
Member Author

Choose a reason for hiding this comment

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

all these changes are correct? looks like a lot of deletions

yes. It's a little annoying in the diff because incomplete and notApplicable switched places in the artifact, but it reads better in the gatherer in that order, and I figured preserving artifacts.json order shouldn't negate that

Copy link
Member Author

Choose a reason for hiding this comment

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

oh, and lots of deletions because all we offer for notApplicable is the id:

notApplicable: Array<Pick<AxeRuleResult, 'id'>>;

so there's no need to keep the rest around

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

Successfully merging this pull request may close these issues.

None yet

3 participants