Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Tab key navigation does not work when interactive elements are contained within a grid container #12044

Closed
patrickfox opened this issue Feb 5, 2021 · 8 comments
Closed

Tab key navigation does not work when interactive elements are contained within a grid container #12044

patrickfox opened this issue Feb 5, 2021 · 8 comments
Labels
app/firefox ARIA blocked/needs-external-fix

Comments

@patrickfox
Copy link

patrickfox commented Feb 5, 2021 •
edited
Loading

Steps to reproduce:

Create a page with the following structure:

<!DOCTYPE html>
<html lang="en">
<head>
  <title>NVDA Behavior - Ctrl-Home and role grid</title>
</head>
<body translate=&quot;no&quot; >
  <h1>NVDA Behavior - Ctrl-Home and role grid</h1>
  <p>To test:</p>
  <ul>
    <li>Open this page in FF 84 and navigate with NVDA 2020.3</li>
    <li>Press Ctrl-Home to navigate to the top of the page</li>
    <li>Press Tab
      <ul>
        <li>Expected behavior: Focus moves to the first interactive element in the page</li>
        <li>Observed behavior: Nothing happens when pressing Tab key</li>
      </ul>
    </li>
    <p>What's going on: the link, button and text field below are contained within a grid container, and it seems that this confuses NVDA and/or Firefox - but only after pressing Ctrl-Home</p>
  </ul>
  <div role="grid">
    <a href="http://some-url.com/">First link</a>
    <button>Generic button</button>
    <input aria-label="Generic text field"/>
  </div>
</body>
</html>

Steps:

  • Open the test page in Firefox 84+ w/NVDA 2020.3 running
  • Navigate to the first link
  • Press Ctrl-Home to go back to the top of the page
  • Press Tab > nothing happens

Note: I realize that having a random <div role="grid"> isn't proper use of that role, but this behavior also occurs in other pages with a full, valid ARIA grid layout.

Actual behavior:

Pressing Tab does nothing

Expected behavior:

Pressing Tab should navigate to the first link in the page.

System configuration

NVDA installed/portable/running from source:

Installed

NVDA version:

2020.3

Windows version:

WIndows 10

Name and version of other software in use when reproducing the issue:

Firefox 84

Other information about your system:

n/a

Other questions

Does the issue still occur after restarting your computer?

Yes

Have you tried any other versions of NVDA? If so, please report their behaviors.

Yes, but only 2018.1.1

If addons are disabled, is your problem still occuring?

Yes - I have no addons

Did you try to run the COM registry fixing tool in NVDA menu / tools?

Yes, no change
@Adriani90
Copy link
Collaborator

cc: @MarcoZehe do you have any suggestions here?

@MarcoZehe
Copy link
Contributor

I am currently out sick, so passing on to @jcsteh. Also, might be worth checking with a newer release than 84, too.

@jcsteh
Copy link
Contributor

jcsteh commented Feb 16, 2021

This happens because Firefox exposes the focusable state on grids, even when the grid isn't focusable. NVDA uses this state to work out where tab should go in this case and then sets focus to it, but setting focus does nothing (since it isn't really focusable). I filed https://bugzilla.mozilla.org/show_bug.cgi?id=1692933.

@jcsteh
Copy link
Contributor

jcsteh commented Feb 16, 2021

@patrickfox, as a matter of interest, how are you managing focus in the grid? (ARIA requires grids to manage focus.) I assume you're setting tabindex on the gridcells?

@patrickfox
Copy link
Author

patrickfox commented Feb 16, 2021 via email

@jcsteh
Copy link
Contributor

jcsteh commented Feb 16, 2021

Please note that this is an ARIA spec violation. When you use role="grid", you are required to manage focus, which is why Firefox exposes the focusable state (controversial as that may be). If you expect a screen reader user will instead use screen reader table navigation, you should instead use role="table", in which case you will not experience this problem.

@Adriani90
Copy link
Collaborator

I am closing as invalid as per Jamie's comment above. If you still have arguments why aria spec should not be applied here, please comment and we can resume the discussion.

@Adriani90 Adriani90 closed this as not planned Won't fix, can't repro, duplicate, stale Nov 16, 2024
@Adriani90
Copy link
Collaborator

Note that the Firefox bug is still open, so you might continue the discussion there for that particular use case.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
app/firefox ARIA blocked/needs-external-fix
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
5 participants
@MarcoZehe @patrickfox @feerrenrut @jcsteh @Adriani90