Use aria-controls (ARIA 1.2)

Author: muan

README.md

@@ -1,6 +1,6 @@
 # Combobox Navigation
 
-Attach [combobox navigation behavior](https://www.w3.org/TR/wai-aria-practices/examples/combobox/aria1.1pattern/listbox-combo.html) to `<input>` or `<textarea>`.
+Attach [combobox navigation behavior (ARIA 1.2)](https://www.w3.org/TR/wai-aria-1.2/#combobox) to `<input>`.
 
 ## Installation
 
@@ -15,16 +15,18 @@ $ npm install @github/combobox-nav
 ```html
 <label>
   Robot
-  <input id="robot-input" aria-owns="list-id" role="combobox" type="text">
+  <input id="robot-input" aria-controls="list-id" role="combobox" type="text" aria-expanded="false">
 </label>
-<ul role="listbox" id="list-id">
+<ul role="listbox" id="list-id" hidden>
   <li id="baymax" role="option">Baymax</li>
   <li><del>BB-8</del></li><!-- `role=option` needs to be present for item to be selectable -->
   <li id="hubot" role="option">Hubot</li>
   <li id="r2-d2" role="option">R2-D2</li>
 </ul>
 ```
 
+The combobox navigation pattern does not control list visibility. Please [refer to the ARIA spec](https://www.w3.org/TR/wai-aria-1.2/#combobox) for more requirements around `aria-expanded` and `aria-autocomplete`.
+
 ### JS
 
 ```js

examples/index.html

@@ -11,7 +11,7 @@
   <form>
     <label>
       Least favorite robot
-      <input aria-owns="list-id" role="combobox" type="text">
+      <input aria-controls="list-id" role="combobox" type="text">
     </label>
     <ul role="listbox" id="list-id">
       <li id="baymax" role="option">Baymax</li>

src/combobox-nav.js

@@ -25,7 +25,7 @@ function keyboardBindings(event: KeyboardEvent) {
   const input = event.currentTarget
   if (!(input instanceof HTMLTextAreaElement || input instanceof HTMLInputElement)) return
   if (isComposing) return
-  const list = document.getElementById(input.getAttribute('aria-owns') || '')
+  const list = document.getElementById(input.getAttribute('aria-controls') || '')
   if (!list) return
 
   switch (event.key) {
@@ -128,7 +128,7 @@ function trackComposition(event: Event): void {
   if (!(input instanceof HTMLTextAreaElement || input instanceof HTMLInputElement)) return
   isComposing = event.type === 'compositionstart'
 
-  const list = document.getElementById(input.getAttribute('aria-owns') || '')
+  const list = document.getElementById(input.getAttribute('aria-controls') || '')
   if (!list) return
 
   clearSelection(input, list)

test/test.js

@@ -10,7 +10,7 @@ describe('combobox-nav', function() {
   describe('with API', function() {
     beforeEach(function() {
       document.body.innerHTML = `
-        <input aria-owns="list-id" role="combobox" type="text">
+        <input aria-controls="list-id" role="combobox" type="text">
         <ul role="listbox" id="list-id">
           <li id="baymax" role="option">Baymax</li>
           <li><del>BB-8</del></li>
@@ -44,7 +44,7 @@ describe('combobox-nav', function() {
   describe('with default setup', function() {
     beforeEach(function() {
       document.body.innerHTML = `
-        <input aria-owns="list-id" role="combobox" type="text">
+        <input aria-controls="list-id" role="combobox" type="text">
         <ul role="listbox" id="list-id">
           <li id="baymax" role="option">Baymax</li>
           <li><del>BB-8</del></li>