Open ashleemboyer opened 11 months ago
@SachaG ok to remove those tabIndex?
Hi @eric-burel! Any updates? 😊
Hi, I'll do as second pass on the surveyform UI when we manage to stabilize the Next.js architecture, it's getting better with Next 15, and I have great hope with React 19 compiler in particular for form inputs that are terrible to handle with current versions of React. So yeah still a bit bogged in architectural concerns but no issue will be forgotten!
1. Environment
2. Steps to Reproduce
<nav>
element at the top of the pageTAB
keyTAB
press3. Expected Result
I expected the
TAB
order of the page to be:<a>
element in the progress<nav>
at the top of the page4. Actual Result
Number 5. above was actually the first
<a>
element in the Table of Contents<ol>
on the lefthand side of the page5. Screen recording
Here's a screen recording (with no sound) demonstrating the Actual Result I observed when running through the Steps to Reproduce.
https://github.com/Devographics/Monorepo/assets/43934258/dbd7a848-e6ae-4ded-82f3-d07b576d7b1c
6. Relevant Code Links
I didn't spend too much time searching for the affected code, but I believe this is the line of code where
tabindex
is set on these elements:https://github.com/Devographics/Monorepo/blob/cf9ed11752b383d212a93db81dafd147f7786b8e/surveyform/src/components/form/FormNavItem.tsx#L101
7. Recommended Fix
Like I mentioned a few lines up, I didn't dig too deep into this code so I don't have all the context, but here is my current recommendation as a frontend React accessibility consultant: Just remove the
tabindex
property from here.If I had to guess based on what I've seen in various projects over the years, it may have been intended for this users to navigate within this widget using arrow keys. That functionality is often an over-engineered solution with widgets like this one, which do not have a native HTML element they're modeled off that uses arrow keys for operation (e.g.
<select>
and<input type="radio" />
groups).When a user comes across
<a>
elements like this that are used for high-level navigation, they expect to use theTAB
andSHIFT+TAB
keys to navigate between them. They aren't expecting to have to use their arrow keys to navigate between them. That is unless additional semantics are added to the elements (or the element that contains them all) using ARIA roles, states, or properties. It's certainly an option to do this, but there are a few great reasons not to:If the file I linked to above is indeed the correct file with this issue, I would be delighted to donate my time to fixing it and documenting the change! I would take a deeper look at the code in that case and come to a better understanding of the original intent to use the
tabindex
property. Any additional information would also be helpful beforehand. ☺️