Take over attribute setting responsibilities

Author: muan

README.md

@@ -15,7 +15,7 @@ $ npm install @github/combobox-nav
 ```html
 <label>
   Robot
-  <input id="robot-input" aria-controls="list-id" role="combobox" type="text" aria-expanded="false">
+  <input id="robot-input" type="text">
 </label>
 <ul role="listbox" id="list-id" hidden>
   <li id="baymax" role="option">Baymax</li>

src/combobox-nav.js

@@ -3,6 +3,14 @@
 import {scrollTo} from './scroll'
 
 export function install(input: HTMLTextAreaElement | HTMLInputElement, list: HTMLElement): void {
+  if (!list.id) {
+    list.id = `combobox-${Math.random()
+      .toString()
+      .slice(2, 6)}`
+  }
+  input.setAttribute('role', 'combobox')
+  input.setAttribute('aria-controls', list.id)
+  if (!input.hasAttribute('aria-expanded')) input.setAttribute('aria-expanded', 'false')
   input.addEventListener('compositionstart', trackComposition)
   input.addEventListener('compositionend', trackComposition)
   input.addEventListener('keydown', keyboardBindings)
@@ -11,6 +19,9 @@ export function install(input: HTMLTextAreaElement | HTMLInputElement, list: HTM
 
 export function uninstall(input: HTMLTextAreaElement | HTMLInputElement, list: HTMLElement): void {
   input.removeAttribute('aria-activedescendant')
+  input.removeAttribute('role')
+  input.removeAttribute('aria-controls')
+  input.removeAttribute('aria-expanded')
   input.removeEventListener('compositionstart', trackComposition)
   input.removeEventListener('compositionend', trackComposition)
   input.removeEventListener('keydown', keyboardBindings)

test/test.js

@@ -10,7 +10,7 @@ describe('combobox-nav', function() {
   describe('with API', function() {
     beforeEach(function() {
       document.body.innerHTML = `
-        <input aria-controls="list-id" role="combobox" type="text">
+        <input type="text">
         <ul role="listbox" id="list-id">
           <li id="baymax" role="option">Baymax</li>
           <li><del>BB-8</del></li>
@@ -29,6 +29,10 @@ describe('combobox-nav', function() {
       const list = document.querySelector('ul')
       comboboxNav.install(input, list)
 
+      assert.equal(input.getAttribute('role'), 'combobox')
+      assert.equal(input.getAttribute('aria-expanded'), 'false')
+      assert.equal(input.getAttribute('aria-controls'), 'list-id')
+
       press(input, 'ArrowDown')
       assert.equal(list.children[0].getAttribute('aria-selected'), 'true')
       comboboxNav.navigate(input, list, 1)
@@ -44,7 +48,7 @@ describe('combobox-nav', function() {
   describe('with default setup', function() {
     beforeEach(function() {
       document.body.innerHTML = `
-        <input aria-controls="list-id" role="combobox" type="text">
+        <input type="text">
         <ul role="listbox" id="list-id">
           <li id="baymax" role="option">Baymax</li>
           <li><del>BB-8</del></li>