WebAIM - Web Accessibility In Mind

E-mail List Archives

Does role="combobox" eat the identity of nested elements?

for

From: glen walker
Date: Sep 6, 2019 5:59PM

If I have a simple pattern of a <div role="combobox"> and it contains a
nested <input> (as taken from the ARIA 1.1 combobox design pattern [which
is different from the ARIA 1.0 design pattern]), the nested <input> can be
navigated to with the tab key but you cannot navigate to it with the E
shortcut key.

The shortcut key not working happens in NVDA. I'm not sure about JAWS.

If I walk the DOM using the down arrow, it skips over the nested elements
of the combo. I can't find the <input> using the down arrow. The only way
to navigate to the <input> is with tab.

Is this expected behavior with the combobox pattern?

For fun I put a <button> in the <div>. I can't navigate to the button with
the B shortcut key or the down arrow key. I can still tab to the button,
although when my focus is on the button and I use the B shortcut key to go
to the next button on the page (a button that is not contained in a combo),
the B shortcut key is ignored. Nothing happens.

I tried using aria-owns and aria-activedescendent but that didn't seem to
help.

<div role="combobox">
<label for="a1">alpha</label>
<input id="a1">
<button id="b1">foo</button>
</div>