Support selectors for disabledRule

[Eric-B-Wu]

Currently, when disabling a rule, it can only be disabled for the specific story or globally. Supporting selectors would be a safer way of ignoring a violation across stories as Axe will then only ignore very specific elements and keep reporting violations on other elements of this rule.

[ahuth]

Good idea, and I agree it would be safer. Thanks for suggesting!

Not sure how to implement this, though. axe-core's API lets us target specific selectors to check, but I'm not aware of any way to exclude selectors from rules.

[jeremiah-clothier]

Not sure how to implement this, though. axe-core's API lets us target specific selectors to check, but I'm not aware of any way to exclude selectors from rules.

I did some digging and may have found an API that would support this functionality using an include-exclude object in axe-core's run method

I'm not sure what the integration would look like, but we may be able to update the code to accept this object and pass it along to where we call axe.run(...)?

[ahuth]

If I'm reading it right, that would let us exclude elements from being checked at all, but wouldn't let us exclude elements per rule.

Although maybe excluding elements from being checked at all is the best option we have.

[jeremiah-clothier]

If I'm reading it right, that would let us exclude elements from being checked at all, but wouldn't let us exclude elements per rule.

🤦 Oh right, yeah I think you're right and this wouldn't allow that

[ahuth]

Could still be useful, though!

[leandroferreira]

@ahuth Is there still appetite for this feature? I'm looking into a way to send Context to axe - similarly to sending options - where it can exclude certain elements from being tested.

[ahuth]

If there's a need for it, then definitely, @leandroferreira.

The only complication: I think the context will have to be json serializable, since it would have to be passed from Node to Playwright to the browser.

So I can imagine something like this totally working:

parameters: {
  axe: {
    context: {
      exclude: '.ad-banner'
      // or include: ...
      // or fromFrames: ...
      // etc.
    }
  }
}

but you wouldn't be able to use something like document.querySelectorAll('whatever') as the context.

[ahuth]

#98

[leandroferreira]

Oh wow that was unbelievably quick, thank you so much! This will work perfectly for my use case 🥇

[ahuth]

Released in https://github.com/chanzuckerberg/axe-storybook-testing/releases/tag/v8.2.0