List keyboard accessibility issue (can't tab through entire list)

[sandersky]

I have a virtual list that renders a bunch of buttons and can successfully tab through the buttons that are currently rendered on screen. However when I try to tab off of the last rendered/visible button the next item to become focused isn't the next button in the list but rather whatever comes next in the DOM (or browser if no more tabbable elements in the DOM exist). I tried adding overscan which seemed like it sort of worked but it seems as if tabbing through a large enough list I can still run into the issue (I assume it has something to do with if the last item rendered is the last item in a chunk or not). Considering accessibility is an important aspect often overlooked in web design are there any thoughts on how to address this? The simplest approach I can think of is to just always render at least 1 item beyond what is visible in both directions but I'm not seeing anything in the API to achieve this.

import { useState } from "react";
import { Virtuoso } from "react-virtuoso";

export default () => {
  const [data] = useState(Array(1000).fill(0).map((_, i) => i));

  return (
    <div style={{ inset: 0, position: "absolute" }}>
      <Virtuoso data={data} itemContent={i => <button>{data[i]}</button>} />
    </div>
  );
};

Never mind, somehow I missed the increaseViewportBy prop the first time I went through the API documentation. 🤦‍♂️

[petyosi]

@sandersky if you're serious about keyboard support, I would recommend supporting arrow keys. This is a good starting point, IMO: https://virtuoso.dev/keyboard-navigation/. This is a good article: https://a11y-guidelines.orange.com/en/web/components-examples/listbox-and-keyboard-navigation/

[sandersky]

@sandersky if you're serious about keyboard support, I would recommend supporting arrow keys. This is a good starting point, IMO: https://virtuoso.dev/keyboard-navigation/. This is a good article: https://a11y-guidelines.orange.com/en/web/components-examples/listbox-and-keyboard-navigation/

Thanks, I will definitely look into that and plan to improve keyboard navigation in the future. I just wanted a quick out of box solution that wouldn't require more custom code (for now anyways). Long term my goal will probably be something along the lines of the entire list container being a tabbable element that you can "enter" into to navigate items within it. I'll be doing some more research on existing sites and a11y recommendations before jumping on any solutions though.