I have a collection of buttons inside a div, with some javascript to move focus between them in response to arrow key events.
When I test this with NVDA/Firefox/Windows it seems that NVDA overrides my arrow key handler and moves focus according to its own rules. This is a problem because my widget is highly customisable, dynamic, and responsive - so the rules for moving focus around are quite complex.
Neither Voiceover nor ChromeVox has this behaviour.
I noticed that adding role="gridcell" to each button seems to fix this, but I'd prefer not to do that because it means screenreaders won't treat my buttons as buttons. I also really don't want to change the html structure (e.g. wrapping each button in another element) unless it's absolutely necessary.
Is there a way (e.g. aria or proprietary attribute) to tell NVDA not to apply its own arrow key behaviour to the buttons?
If all your buttons are in a container (span or div), you can add role=application to the container and that will force all keyboard events to go to your application instead of to assistive technology. Role=application should be used very sparingly, though.
<div role=application>
<button>alpha</button><br>
<button>beta</button><br>
<button>gamma</button><br>
</div>