WebAIM - Web Accessibility In Mind

E-mail List Archives

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

for

From: Jonathan Avila
Date: Sep 9, 2019 8:27AM

At this time we do not recommend implementation of the ARIA 1.1. combobox pattern as it's not accessibility supported by browser and assistive technology combinations. The ARIA 1.0 pattern can still be used.

Jonathan

-----Original Message-----
From: WebAIM-Forum < <EMAIL REMOVED> > On Behalf Of glen walker
Sent: Friday, September 6, 2019 7:59 PM
To: WebAIM Discussion List < <EMAIL REMOVED> >
Subject: [WebAIM] Does role="combobox" eat the identity of nested elements?

CAUTION: This email originated from outside of the organization. Do not click links or open attachments unless you recognize the sender and know the content is safe.


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>