Topics

NVDA focus trap on web components.


Pawel Urbanski
 

Dear Everyone,
I would like to find out how forms mode is activated. The case is as follows:
1. NVDA's forms mode is set to manual activation.
2. I have a custom react combobox component, which is recognized as such.
3. Items are provided by aria-activedescendant association fom an
unordered list items.
4. When I scroll onto this component using arrow keys forms mode gets
activated automatically where it should be manual.

Any ideas what might be causing it? For example hint: focus event
attached to a incorrect HTML DOM node?
The structure of the component is as such:
<div role'combobox' aria-haspopup='listbox'
aria-activedescendant='ID_OF_ITEM' aria-owns='ID_OF_UL_CONTAINER'
aria-controls='ID_OF_UL_CONTAINER'>... </div>
<ul id='ID_OF_UL_CONTAINER' role='listbox'>
A number of items...
</ul>
Once the forms mode is activated, focus seems to betrapped. I can
escape out of this combobox using tabbing, but cannot do it with the
escape key or using NVDA's insert + space shortcut to get back
tobrowse mode.

Thanks for any feedback... Pawel


James Scholes
 

By using aria-owns and aria-controls together, you're attempting to follow the WAI-ARIA 1.1 and 1.2 Combo Box patterns simultaneously which is likely to create unexpected results. Pick one, preferably the 1.2 pattern by removing aria-owns.

Other than that, it's impossible to say what else might be happening without a full code sample. If you can reproduce the problem on a test page, please send that over, as well as any React source code powering it.

Regards,

James Scholes

On 05/05/2020 at 7:08 am, Pawel Urbanski wrote:
Dear Everyone,
I would like to find out how forms mode is activated. The case is as follows:
1. NVDA's forms mode is set to manual activation.
2. I have a custom react combobox component, which is recognized as such.
3. Items are provided by aria-activedescendant association fom an
unordered list items.
4. When I scroll onto this component using arrow keys forms mode gets
activated automatically where it should be manual.
Any ideas what might be causing it? For example hint: focus event
attached to a incorrect HTML DOM node?
The structure of the component is as such:
<div role'combobox' aria-haspopup='listbox'
aria-activedescendant='ID_OF_ITEM' aria-owns='ID_OF_UL_CONTAINER'
aria-controls='ID_OF_UL_CONTAINER'>... </div>
<ul id='ID_OF_UL_CONTAINER' role='listbox'>
A number of items...
</ul>
Once the forms mode is activated, focus seems to betrapped. I can
escape out of this combobox using tabbing, but cannot do it with the
escape key or using NVDA's insert + space shortcut to get back
tobrowse mode.
Thanks for any feedback... Pawel