JAWS reads lists incorrectly in dialogs

[jessegreenberg]

One more issue from https://github.com/phetsims/qa/issues/886. JAWS reads the tabs incorrectly when Preferences dialog is first open. It reads "bullet" without saying the accessible name. Further reading with the virtual cursor sounds good. The markup looks like

<ul role="tablist">
  <li>
    <button role="tab">Overview</button>
  </li>
  <li>
    <button role="tab">Visual</button>
  </li>
  <li>
    <button role="tab">Audio</button>
  </li>
</ul>

Lets investigate why JAWS is behaving incorrectly for that. @terracoda said that JAWS may not support a nested button with role=tab. Or that the li might need role=presentation. Also, link to a resource we used to inform the current design: https://inclusive-components.design/tabbed-interfaces/

[jessegreenberg]

I tried adding role=presentation to the li and it had no effect. I tried removing role=tab and it had no effect. I tried changing the button to an a tag, it had no effect.

The problem is not in https://inclusive-components.design/tabbed-interfaces/. Starting to wonder if it is our unconventional CSS causing this.

[jessegreenberg]

I was able to reproduce the bug with the following vanilla HTML:

  <div role="dialog">
    <button>Close</button>
    <h1>My Dialog</h1>
    <ul role="tablist">
      <li>
        <button role="tab">Overview</button>
      </li>
      <li>
        <button role="tab">Visual</button>
      </li>
      <li>
        <button role="tab">Audio</button>
      </li>
    </ul>
  </div>

Bug is present for both button and links. Happens when focus lands on the "Close" button when under role=dialog. This is a fundamental JAWS bug, not caused by PhET or scenery. Moving to a11y-research and we can decide whether to submit a bug report, but we should not spend time finding a workaround.

[terracoda]

@jessegreenberg, I think it is more likely the lack of role=presentation on the list items. The parent tab list role does not assign semantics, so I think the list item semantics might be getting in between the the tablist role and its intended children the tabs.

[jessegreenberg]

Thanks @terracoda, but I tried adding role=presentation to the list items in https://github.com/phetsims/a11y-research/issues/185#issuecomment-1419891731 and it had no effect on the output from JAWS.

[terracoda]

Even though role=presentation on the li does not fix the jaws issue, I still think it is a good addition to the code if it does NOT cause issues for NVDA or VoiceOver.

[terracoda]

Is there a tip to work around this bug? Like using the Arrow keys to read the button labels?

[terracoda]

@jessegreenberg, just wondering if you moved focus to the H1 of the dialog or the first Tab in the Tab List, would that address the issue? I realize that a Tab is not available in every dialog.

[stemilymill]

@terracoda @jessegreenberg I dont know if this is useful info, but JAWS 2021 doesnt seem to have this issue, while 2022 and 2023 versions both do

[jessegreenberg]

Thanks @stemilymill, yes that is good to know. We will include that in a bug report if we submit one.

[jessegreenberg]

@terracoda I added role=presentation to the li and it still sounds good with NVDA. Can you review with VoiceOver?

Is there a tip to work around this bug? Like using the Arrow keys to read the button labels?

Yes, this only happens when the dialog first opens and the screen reader first reads through content. All other navigation strategies sound good.

@jessegreenberg, just wondering if you moved focus to the H1 of the dialog or the first Tab in the Tab List, would that address the issue? I realize that a Tab is not available in every dialog.

@terracoda it doesn't seem to change anything. In sims, we put focus on the tab. In the test in https://github.com/phetsims/a11y-research/issues/185#issuecomment-1419891736 I just tabbed to the close button. I think it is just how JAWS does its first read through with that markup.