Accessibility TabIndex about react-awesome-reveal

[morellodev]

No, the elements are mounted when your component wrapping them is rendered.

By default, all elements not in the viewport are not visible (they have visibility: hidden CSS rule set) but they do exist in the DOM – they are watched by an IntersectionObserver instance that triggers the animation when they enter the viewport.

The "issue" here is that when you jump to an element by pressing the TAB key, if that element is not visible (because, in this case, it has the rule visibility: hidden set), it won't be focusable.

I will find a fix for that keeping accessibility in mind; for now, a temporary workaround could be setting the triggerOnce prop so that you can focus elements once the animations have been run.

[morellodev]

Hi @VGamezz19,

thank you for appreciating the library!

I tried to reproduce your code (without the translation library), and I have no issue at all:

<Fade direction="bottom">
  <h2 tabIndex="1" className="explore-the-future-of-data__title">
     A<br />B
   </h2>
 </Fade>
 <Fade direction="left" cascade>
   <h3 tabIndex="2" className="explore-the-future-of-data__subtitle">C</h3>
   <p tabIndex="3">D</p>
   <p tabIndex="4">E</p>
</Fade>

The only things I see is that I start indexing tabIndexes from 1 and not from 0, and that you wrote a wrong sequence of attributes tabIndex="0" tabIndex in the first <h2> tag.

Let me know if it helps, so I can close the issue.

[VGamezz19]

yep! sorry I just explain it wrong. Those items are out of boundary (i miss explain this important point hehe) and u need to scroll down to see the elements.
So they still hidden before I press Tab.

I can realise that those elements dosen't exist before i Tab...

[morellodev]

@VGamezz19 please update to version 2.4.2.