Skip to content

Improve logging of violations in test mode #103

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

Merged
merged 2 commits into from
May 18, 2018

Conversation

EndangeredMassa
Copy link
Contributor

This PR extracts the violation formatting logic into a util class that can be used in both component audit and test audit scenarios.

It also changes the violationsHelper so that it works more like a singleton and is used throughout the project as a module instead of a global. It's still exposed as a global in the initializer, though. This also makes it work properly in test mode.


Here's a before/after of using ember-a11y-testing in another project's test suite:

Before:

After:


Here's a screenshot of development mode to show that it still works fine:

@dbollinger
Copy link

Looks good-- you are a saint! Any reason not to continue outputting the total number of violations?

@EndangeredMassa
Copy link
Contributor Author

I can put that back in somewhere. What do we like?
"[critical] (x10): Buttons must have discernable text..."?

@EndangeredMassa
Copy link
Contributor Author

Added a violation count to the error message. It now looks like:

[serious]: Elements must have sufficient color contrast 
Violated 5 times. Offending nodes are: 
<span class="c-radio-track__item-node">None</span>
<span class="c-radio-track__item-node">Level 1</span>
<span class="c-radio-track__item-node">Level 2</span>
<span class="c-radio-track__item-node">Level 3</span>
<p data-test-selector="labeless-text-input" id="violations__low-contrast-text" class="p-violations__grid-item-content--low-contrast-text c-paragraph ember-view">          Swoooosh
</p>
https://dequeuniversity.com/rules/axe/2.6/color-contrast?application=axeAPI
{object}

I also changed Offending markup is to Offending nodes are because what follows is a list of every node that violated that rule.

Copy link
Member

@MelSumner MelSumner left a comment

Choose a reason for hiding this comment

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

This is a really useful change. Thank you for doing this.

@JoaoGFarias
Copy link

Thank you! This improvement makes checking and debugging a11y in Ember apps so much faster!

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.

None yet

4 participants