Tabbability between sections not working on React Library

sacostat-13 commented 1 year ago

Description

Is not possible to tab through tabbable elements such as buttons if they are on a a different section. This is the same issue reported on the main fullPage.JS Repo by BossElijah on August last year, as seen on here: https://github.com/alvarotrigo/fullPage.js/issues/4453

While moving through the page just using tab is a pretty standard practice, there are also use cases where this behavior causes issues. For example, if you have a Menu Button which sits outside a FullPage section, it doesn't seems to be tabbable due to not belonging to the actual section.

Is there a way that the fix applied on version 4.0.11 on the main library could be applicable to this React library as well?

Link to isolated reproduction with no external CSS / JS

Let me know if the link is required, as this is a known issue.

Steps to reproduce it

Install React FullPage
Create more than one section with tabbable items inside
Try using tab to navigate across the full page

Versions

Currently using version react-fullpage 0.1.35

Browsers

Firefox Version 112.0.1 (64-bit) Chrome Version 112.0.5615.137 (Official Build) (arm64)

OS

macOS Ventura 13.3.1

alvarotrigo commented 1 year ago

Currently using version react-fullpage 0.1.35

Make sure to update to the latest 0.1.39. Let me know if you still have issues after that.

alvarotrigo commented 1 year ago

I can see no problem here. All inputs can be tabbed. https://codesandbox.io/s/tab-react-fullpage-js-w8e4bl

sacostat-13 commented 1 year ago

Hi Alvaro!

Thanks for your quick response!

I have taken a look at your codesandbox example which works as expected, while our code is still having the same tab issue. I will create a codesanbox example myself similar to our code just to test and send if I can replicate the problem. At the same time, I will be taking a better look at our code (we have a lot of beforeLeave and afterLoad animations that might be causing issues to the tab), but even on the new version file fullpage.js, I can see the following comment and code on line 4373:

`/**

Makes sure the tab key will only focus elements within the current section/slide
preventing this way from breaking the page.
Based on "Modals and keyboard traps"
from https://developers.google.com/web/fundamentals/accessibility/focus/using-tabindex */`

Any chance this could be configured to be disabled or on the newer version this is no longer applicable?

Thanks!

alvarotrigo commented 1 year ago

Any chance this could be configured to be disabled or on the newer version this is no longer applicable?

That makes sure fullPage.js won't break when using tabs. Once you reach the last tab of the current section/slide, it will scroll/slide to the next/previous.

So nope, that's not a problem. It's in fact a solution :)

sacostat-13 commented 1 year ago

@alvarotrigo Thank you for your replies! I think that I will go ahead and close this issue till I have more information that could yield any lights on why it's happening on our code.

:-)

alvarotrigo commented 1 year ago

No problem! ;)

sacostat-13 commented 1 year ago

@alvarotrigo Just wanted to add to this issue that I found out that the main culprit were the anchors, aka, I was the real culprit in not adding them. By adding the anchors to the ReactFullpage options, the tab does works as expected. Thought that adding this here would help anyone with a similar problem in the future.

alvarotrigo commented 1 year ago

So, just to clarify it. Are you saying that tabs won't work without using the anchors option in fullPage.js?

sacostat-13 commented 1 year ago

@alvarotrigo That is correct. Actually, if you go to the CodeSandbox link that you previously share and remove the anchors, you should notice two things:

1) Tab will not allow you to navigate outside your section 2) If you use tab, you will be seeing some weird UI issues were sections position will move to the top, even if they are still styled as 100% height.

These are the two issues that I had myself, which were resolved by adding the anchors.

alvarotrigo commented 1 year ago

Alright! So it seems you've found two bugs:

Tabbing won't change vertical sections without anchors.
Tabbing fast before the scroll ends creates UI glitches so sections won't fit the viewport.

I'll open those in the main JS repository as those can also be reproduced there and its the source of the issue.

Thanks for your feedback @sacostat-13 !! 👍

sacostat-13 commented 1 year ago

I'm just glad I was not crazy, haha. Thanks for your quick responses and attention to detail, this is truly an amazing plugin, so keep it coming!

alvarotrigo commented 1 year ago

No problem! I'm glad to help in any way and I hope to find a solution to these issues as soon as possible.

I've created both issues so I can investigate them further:

alvarotrigo / react-fullpage