Announce the suggestion list to screen readers

The invitee input had no combobox semantics: assistive
technology could not tell that the widget owns a listbox with
suggestions. Mark the input as role="combobox" with
aria-autocomplete="list" and an initial aria-expanded="false",
point aria-controls at the list and give the JS-built list a
matching id so the reference resolves.

js/invitees.js

@@ -30,6 +30,7 @@
   }
 
   var list = document.createElement('ul');
+  list.id = 'atocal-suggestions';
   list.className = 'atocal-suggestions';
   list.hidden = true;
   list.setAttribute('role', 'listbox');

templates/confirm.php

@@ -140,6 +140,10 @@ $l = $_['l10n'];
                             id="atocal-attendees"
                             name="attendees"
                             type="text"
+                            role="combobox"
+                            aria-autocomplete="list"
+                            aria-controls="atocal-suggestions"
+                            aria-expanded="false"
                             list="atocal-contact-emails"
                             data-search-url="<?= $h($_['contactsSearchUrl']) ?>"
                             value="<?= $h($_['attendees']) ?>"

tests/js/invitees.test.mjs

@@ -37,7 +37,9 @@ async function settle(ms = DEBOUNCE_MS) {
 
 beforeAll(async () => {
   document.body.innerHTML =
-    '<span><input id="atocal-attendees" data-search-url="' + SEARCH_URL + '"></span>';
+    '<span><input id="atocal-attendees" data-search-url="' + SEARCH_URL + '"'
+    + ' role="combobox" aria-autocomplete="list"'
+    + ' aria-controls="atocal-suggestions" aria-expanded="false"></span>';
 
   await import('../../js/invitees.js');
 
@@ -59,6 +61,18 @@ afterEach(async () => {
 });
 
 describe('invitee suggestions', () => {
+  it('marks the input as a combobox controlling the list', () => {
+    expect(input.getAttribute('role')).toBe('combobox');
+    expect(input.getAttribute('aria-autocomplete')).toBe('list');
+
+    /* aria-controls must resolve to the list built by the widget */
+    const controlled = document.getElementById(
+      input.getAttribute('aria-controls')
+    );
+    expect(controlled).toBe(list);
+    expect(input.getAttribute('aria-expanded')).toBe('false');
+  });
+
   it('renders matching contacts', async () => {
     fetch.mockReturnValue(response([BOB]));