Giters

davidtheclark / react-aria-menubutton

A fully accessible, easily themeable, React-powered menu button

Home Page:https://davidtheclark.github.io/react-aria-menubutton/demo

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Button onKeyDown handler not called when using NVDA screen reader

LeopoldoFu opened this issue · comments

commented

The onKeyDown handler handleKeyDown is never called when using NVDA screen reader using react-aria-menubutton 4.1.3. This can also be reproduced on the demo page.

commented

@LeopoldoFu: Is this a problem with React generally, or this particular library? Do you see the same problem with other React components?

commented

Sorry, I don't know. This is the first third-party generic component (dropdown) I am doing a lot of research for to see if it has everything we need, including AAA level accessibility. So I haven't tested other components.

commented

@LeopoldoFu Hm. This particular library does nothing unusual with onKeyDown. That suggests to me that if there is a problem it is a problem with React itself. I'm sure they would appreciate an issue. To do so, we'll need to create a reduced test case. Since you have NVDA and know how to use it, would you mind trying a simple test case, just to see if the onKeyDown handler works on a basic React element?

commented

Well, I wouldn't say I know how to really use NVDA. I just turn it on and see if stuff still works (tabbing, clicking) and decent messages are read by the screen reader. I'll give it a go to see if I can create a reduced test case. FYI, NVDA is completely free.

I've run into issues in the past (non-React code) where certain aria attributes had to be added to make things work correctly for certain screen readers. Maybe that is the case here? Although there are other dropdown solutions I've taken a quick look at that do work just fine with NVDA on their example pages.

commented

So I threw a div on inside my app with tabindex="0" and a onKeyDown handler that console.logs and it experiences the same issue. I believe I have found the root cause to be related to how screen readers capture space, enter, and arrow keys for navigation when in forms mode. Here is where I got that from. The comments are also very insightful.

So now I'm just trying to figure how to get arrow down key when on the trigger to open the menu and select the first item in the list to match wai-aria authoring practices. This isn't working right now because NVDA captures arrow keys to provide its own navigation.

commented

I think this issue is ok to close since:

  • it is expected behavior as discussed in the article I linked to in my previous comment
  • that this library is correctly adding event handlers for enter key, space key, and clicks to behave the same way.
  • Selecting first menu item when focused on menu button is optional. Although I did discover that if we set role="menu" on the trigger instead of role="button", JS event handlers are not intercepted by NVDA.

Keyboard Interaction:
With focus on the button:
Space and Enter: open the menu and place focus on the first menu item.
(Optional) Down Arrow: opens the menu and moves focus to the first menu item.

commented

Thanks for looking into this @LeopoldoFu.