I need to create a scrollable container that’s accessible by keyboard. The container is a div with overflow: scroll, and I’ve set tabindex="0" so that it’s focusable. While scrolling works with the keyboard and content is read correctly by NVDA on desktop, Android’s TalkBack screen reader can’t access the content inside of the container.

My container is similar to MagentaA11y’s Scrolling Container, but with paragraphs/list items inside a scrollable div instead of a table:

<div role="region" aria-label="Container name" tabindex="0">

   <p>Some content</p>
   <p>Some content</p>
   <ul>
      <li>Some content</li>
      <li>Some content</li>
   </ul>

</div>

With TalkBack, I can navigate to the div since I set tabindex="0", however I can’t navigate to the actual paragraphs/list items inside the div. I don’t have this issue on desktop with NVDA, so not sure what’s causing this behavior with TalkBack.

I tried putting interactive elements inside of the div as a test, and was then able to navigate to the text with TalkBack. But since there aren’t any interactive elements in the div, ideally I don’t want to make this text focusable (and I don’t think that’s a best practice).

Note that when I tested the MegentaA11y example with TalkBack, it has no issue navigating through the table inside the div. I’m hoping to achieve the same behavior as the MegentaA11y example.

Anyone have ideas for why this may be happening, and how I can make sure that TalkBack can access the content in the scrolling container? I suspect it may be because Talkback overrides the content of landmarks with aria-label, but I don’t understand why it can’t reach the text inside the div.