Navigating with arrow down key on first li tag in ul doesn't work when using NVDA screen reader

I am working on accessibility testing and as you can see, I need to enable navigating list items by tab and or arrow down key and when you hit enter to expand content box, you should be able to read the contents by arrow down key again. A problem is that once screen reader tells you that you are on the first list item and hit enter to expand, arrow down key doesn't seem like working but just move the page down a bit. There are total 4 list items and 2nd, 3rd, and 4th list items are working as expected (expand and read the contents with arrow down key). Here is a piece of code.

<ul className="overview-menu" aria-label="menu">
            {
                options.map((opt,i) =>
                    <Fragment key={opt.name}>
                    <li key={opt.name+"_name"} className={`overview-menu-option ${option ? option.name === opt.name ? 'active' : 'inactive' : ''} ${contentBoxType}`}>
                        <button
                        className={`overview-menu-option-btn ${option ? option.name === opt.name ? 'active' : 'inactive' : ''} ${contentBoxType}`}
                        aria-expanded = {`${option ? option.name === opt.name ? 'true' : 'false' : 'false'}`}
                        onClick = {() => getContents(opt)}
                        >{opt.name}</button>
                        <ChevronIcon/>
                    </li>                       
                    {isOptionClick && option.name === opt.name ? <div key={opt.name+"contents"} className = {`overview-menu-option-contents ${contentBoxType}`}><span aria-label= "contents">{option.contents}</span></div> 
                    : null}
                    </Fragment>
                )
            }

Thank you

Solution

I'm not a react developer but it looks like your code might generate something like this:

<ul>
  <li>
    <button>{opt.name}</button>
  </li>
  <li>
    <button>{opt.name}</button>
  </li>
  <li>
    <button>{opt.name}</button>
  </li>
  <div key='...' classname='...'>
    <span aria-label="contents"></span>
  </div>
</ul>

If this is accurate, then you'll be generating invalid HTML, which is a WCAG parsing violation (4.1.1). A <div> cannot be a child of a <ul>. Only <li> elements (or scripting elements) can be direct children. This won't cause the problem you're describing but since you're asking about accessibility, it's something you'd need to fix.

By default, NVDA can navigate to lists using the L key and to individual list items using the I key. That's built in to NVDA and you don't have to do anything special for it to work (other than use a semantically correct list, <ul> or <ol>).

You mentioned you want to navigate to list items with the tab key. List items, by default, are not interactive elements. You can't tab to them. You can have an interactive element inside a list item and that element can be tabbed to, such as the sample code I showed with a <button> inside the list item.

So you might have to clarify your question and specifically say which element you want to navigate to with the keyboard.

You also mention using the down arrow key. With NVDA running, the down arrow will navigate to the next DOM element. (It's really the next element in the accessibility tree but to keep this simple, just think of it as the DOM.) You get that behavior for free too.

If pressing the down arrow scrolls the page instead of navigating to the next DOM element, then the down arrow event is being sent to the browser rather than to NVDA. This happens if you have an element that automatically switches NVDA from "browse mode" to "forms mode". Some HTML elements (or roles) will cause the switching automatically. You can see a list here, https://www.w3.org/WAI/ARIA/apg/practices/keyboard-interface/#x6-1-fundamental-keyboard-navigation-conventions