Accessibility TabIndex

[VGamezz19]

Hey,

First of all, i really apreciaty this kind of NPM package that helps alote to the community.

after that, i'm wandering how can I TabIndex, in the elements, and how can we use ur package in a accessibility way!.

this is my example, and when i'm traying to do TAB it never stop. How can we do it possible?

  <Fade direction="bottom">
              <h2 tabIndex="0" tabIndex className="explore-the-future-of-data__title">
                {t(`${TRANSLATION_SUFIX}.save-the-day.title-1`)}
                <br />
                {t(`${TRANSLATION_SUFIX}.save-the-day.title-2`)}
              </h2>
            </Fade>
            <Fade direction="left" cascade>
              <h3 tabIndex="1" className="explore-the-future-of-data__subtitle">{t(`${TRANSLATION_SUFIX}.save-the-day.title-3`)}</h3>
              <p tabIndex="2">{t(`${TRANSLATION_SUFIX}.save-the-day.description-1`)}</p>
              <p tabIndex="3">{t(`${TRANSLATION_SUFIX}.save-the-day.description-2`)}</p>
            </Fade>
```

[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]

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]

@VGamezz19 please update to version 2.4.2.