Polymer Starter Kit Title Flickers When Tap on Menu

[NicolasRannou]

In index.html I do my routing as below:

<section data-route="software-research">
  <software-research class="focus-target" tabindex="-1"></software-research>
</section>

If my element "software-research" is smaller than the window's height, no flickering. If my element is taller than the window's height, it flickers. If I put the content of my element directly in the section, no flickering.

I tried to put focus-target and tab-index inside the element (not sure if that makes sense) without success.

Best,

<dom-module id="software-research">
  <template>
    <style>
      :host {
        display: block;
      }
    </style>

   <h1 class="focus-target" tabindex="-1">HELLO</h1>

  <div>Welcome to software research page</div>
  <div>Welcome to software research page</div>
  <div>Welcome to software research page</div>
  <div>Welcome to software research page</div>
  <div>Welcome to software research page</div>
  <div>Welcome to software research page</div>
  <div>Welcome to software research page</div>
  <div>Welcome to software research page</div>
  <div>Welcome to software research page</div>
  <div>Welcome to software research page</div>
  <div>Welcome to software research page</div>
  <div>Welcome to software research page</div>
  <div>Welcome to software research page</div>
  <div>Welcome to software research page</div>
  <div>Welcome to software research page</div>
  <div>Welcome to software research page</div>
  <div>Welcome to software research page</div>
  <div>Welcome to software research page</div>
  <div>Welcome to software research page</div>
  <div>Welcome to software research page</div>
  <div>Welcome to software research page</div>
  <div>Welcome to software research page</div>
  <div>Welcome to software research page</div>
  <div>Welcome to software research page</div>
  <div>Welcome to software research page</div>
  <div>Welcome to software research page</div>
  <div>Welcome to software research page</div>
  <div>Welcome to software research page</div>
  <div>Welcome to software research page</div>
  <div>Welcome to software research page</div>
  <div>Welcome to software research page</div>
  <div>Welcome to software research page</div>
  <div>Welcome to software research page</div>
  <div>Welcome to software research page</div>
  <div>Welcome to software research page</div>
  <div>Welcome to software research page</div>
  <div>Welcome to software research page</div>
  <div>Welcome to software research page</div>
  <div>Welcome to software research page</div>
  <div>Welcome to software research page</div>
  <div>Welcome to software research page</div>
  <div>Welcome to software research page</div>
  <div>Welcome to software research page</div>
  <div>Welcome to software research page</div>
  <div>Welcome to software research page</div>
  <div>Welcome to software research page</div>
  </template>

  <script>
    (function() {
      'use strict';

      Polymer({
        is: 'software-research'
      });
    })();
  </script>
</dom-module>

[samccone]

Hey @NicolasRannou which browser are you seeing this in? can you describe the flicker?

[NicolasRannou]

Hi @samccone

I am on Chrome 49.0 on OSX.

You can see the issue there: https://fnndsc.babymri.org/#!/software-team

Try to click on the "software/team" in the menu, you will see the flickering. If I remove the second part of the page (after Almuni), it doesn't flicker.

[NicolasRannou]

Source code is there: https://github.com/FNNDSC/fnndsc.babymri.org

[samccone]

hmm unable to reproduce on my linux machine, @robdodson / @chuckh can you repro?

[robdodson]

I see it when I click on Software > Team

It looks like the issue Sam fixed in 1.3.0. Remove tabindex=-1 from software-team. We updated this in 1.3.0 so instead of focusing the page element it focuses a header in the page. https://github.com/PolymerElements/polymer-starter-kit/commit/24e57f383566019401213d8951e7a253557a4106

On Thu, Mar 17, 2016 at 9:27 AM, Sam Saccone notifications@github.com wrote:

hmm unable to reproduce on my linux machine, @robdodson https://github.com/robdodson / @chuckh https://github.com/chuckh can you repro?

— You are receiving this because you were mentioned. Reply to this email directly or view it on GitHub https://github.com/PolymerElements/polymer-starter-kit/issues/755#issuecomment-197959983

[samccone]

Yep, you will want to apply 24e57f3 to your project and this will be fixed!

[NicolasRannou]

@samccone Hmm it doesn't seem to quite work with that - I am already using the latest version of PSK.

@robdodson Do you suggest that "tabindex="-1"" is not useful anymore? Indeed if I remove the "tab index" the flickering goes aways but I thought "tabindex" was useful somehow.

Is "tab-index" deprecated and should it be removed from index.html? I can submit a pull request to remove all the tab-index from index.html if it makes sense.

https://github.com/PolymerElements/polymer-starter-kit/blob/master/app/index.html#L125 https://github.com/PolymerElements/polymer-starter-kit/blob/master/app/index.html#L159 https://github.com/PolymerElements/polymer-starter-kit/blob/master/app/index.html#L170 https://github.com/PolymerElements/polymer-starter-kit/blob/master/app/index.html#L177

Do we need tabindex=0 in the toast message too? https://github.com/PolymerElements/polymer-starter-kit/blob/master/app/index.html#L187

[robdodson]

tabindex=-1 is great for focus management but seems to cause issues with the header panel if it's placed on a big sectioning element. We recommend trying to put it on a header element instead and give that element a class of focus-target. That's what the linked commit does.

Is "tab-index" deprecated and should it be removed from index.html?

No. tabindex is a native HTML attribute and is not deprecated nor should it be removed from index.html

Do we need tabindex=0 in the toast message too?

Yes, it allows users to tab to it.

[NicolasRannou]

Thanks - yes now that you say it I know tab index :) I was focused on polymer and in my mind it was a polymer specific thing for some reason.

FYI, to solve it and do not modify the PSK skeleton, the best option is to add a dummy div in the section as:

<section data-route="software-team">
  <div class="focus-target" tabindex="-1"></div>
  <software-team team alumni></software-team>
  </section>

If "focus-target" is inside the software-team element , we can not access it with the setFocus method from the "routing.html".

If we set class="focus-target" and tabindex="-1" to the "software-element" it blinks.