[HTML5] Handle Offscreen Accessibility

Sometime when some component is offscreen, but still get focus when we tab though the page.

This can cause users' confusion.

One easy to to find out the offscreen component is typing in your console,

document.activeElement

It will shows your the current focus element.

 

Then what you need to do is add CSS so that it won't get focus anymore.

  display: none;
  visibility: hidden;

 

When it comes into screen, set CSS:

  display: block;
  visibility: visibile;