ember-a11y / ember-a11y-testing

A suite of accessibility tests that can be run within the Ember testing framework

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

ember-a11y-testing make a few things scroll at the bottom of the page.

AdrienNguyenWorldline opened this issue · comments

If I leave the plugin active, when I click on some actions, I get no error in console at all, nor stiped elements, but the page scrolls at the bottom.

If I just add turnAuditOff: true, then this scrolling bugs goes away

Can you provide a reproduction either via ember-twiddle or a github repo? This addon doesn't do anything directly related to scrolling.

I think this may be related to scrolling issues within axe-core

dequelabs/axe-core#148

Not sure if the exact same issue, but I observe this as well. It is automatically scrolling to the last ember component on the page. It's worse in Firefox. In Chrome I have to navigate between pages before the behavior is observed.

The axe-core issue mentioned above has been fixed & merged and does not resolve this issue.

Another situation that easily reproduces the issue (and it's even worse): I am displaying a relative time - example: '3 seconds ago', '10 seconds ago', etc. This value is updated every second, and every time it is updated, ember-a11y-testing scrolls to its position. It even happens when the text doesn't even change - for example, it simply shows '3 minutes ago' for an entire minute, but nonetheless ember-a11y-testing scrolls to this line every second. Very frustrating. turnAuditOff does prevent the behavior, but that somewhat defeats the purpose of using this addon.

Ember      : 2.13.0
Ember Data : 2.13.1
jQuery     : 3.2.1

to fix this issue, you need to pass in the noScroll option to the color-contrast rule

@dylanb Thanks for that tip! Can confirm that it works. It took me a while to figure out the right syntax... the axe-core docs were not very helpful. Here it is:

  ENV['ember-a11y-testing'] = {
    componentOptions: {
      axeOptions: {
        checks: {
          'color-contrast': { options: { noScroll: true } }
        }
      }
    }
  };

@trentmwillis I suggest this option be set by default within this addon if possible... this made me pull my hair out, and I think others will have the same experience... I don't think this scrolling is a desirable default behavior. Thoughts?

Currently, we leave the defaults to axe-core, so if this is the default for that library I'd prefer not to change it.

That said, we can call it out in our documentation and definitely should make it easier for folks to figure out how to set options. Would you mind PR'ing some doc changes to help clarify areas you had trouble with?

@ctcpip we have to leave at least a bit of a challenge for the users ;-)

But srsly - if you have a suggestion for a doc change, please contribute...

I could take a stab at something, but I'm not entirely clear on how the options should really be specified. What I ended up with works, but it involved me stepping through the code while it was running, and scrutinizing the axe-core codebase...

Since we now have an example in the readme of how to set options for specific rules, I'm going to close this.

I set "restoreScroll" : true and its working fine for me