Combobox examples with listbox popup: Add properties and states to listbox control button

examples/combobox/combobox-autocomplete-both.html

@@ -51,16 +51,16 @@ <h2 id="ex_label">Example</h2>
         <div class="combobox combobox-list">
           <div class="group">
             <input id="cb1-input" class="cb_edit" type="text" role="combobox" aria-autocomplete="both"
-              aria-expanded="false" aria-controls="lb1">
-            <button type="button" id="cb1-button" aria-label="Open" tabindex="-1">
+              aria-expanded="false" aria-controls="cb1-listbox">
+            <button type="button" id="cb1-button" aria-label="State" aria-expanded="false" aria-controls="cb1-listbox" tabindex="-1">
               <span class="arrow">
                 <svg width="18" height="16" aria-hidden="true" focusable="false">
                   <polygon points="3,5 15,5 9,13"></polygon>
                 </svg>
               </span>
             </button>
           </div>
-          <ul id="lb1" role="listbox" aria-label="States">
+          <ul id="cb1-listbox" role="listbox" aria-label="States">
             <li id="lb1-al" role="option">Alabama</li>
             <li id="lb1-ak" role="option">Alaska</li>
             <li id="lb1-as" role="option">American Samoa</li>
@@ -426,6 +426,44 @@ <h3 id="rps_label_listbox">Listbox Popup</h3>
           </tr>
         </tbody>
       </table>
+
+      <h3 id="rps_label_button">Button</h3>
+      <table aria-labelledby="rps_label_button rps_label" class="data attributes">
+        <thead>
+          <tr>
+            <th scope="col">Role</th>
+            <th scope="col">Attribute</th>
+            <th scope="col">Element</th>
+            <th scope="col">Usage</th>
+          </tr>
+        </thead>
+        <tbody>
+          <tr data-test-id="button-aria-controls">
+            <td></td>
+            <th scope="row">
+              <code>aria-controls="#IDREF"</code>
+            </th>
+            <td><code>button</code></td>
+            <td>Identifies the element that serves as the popup.</td>
+          </tr>
+          <tr data-test-id="button-aria-expanded">
+            <td></td>
+            <th scope="row">
+              <code>aria-expanded="false"</code>
+            </th>
+            <td><code>button</code></td>
+            <td>Indicates that the popup element <strong>is not</strong> displayed.</td>
+          </tr>
+          <tr data-test-id="button-aria-expanded">
+            <td></td>
+            <th scope="row">
+              <code>aria-expanded="true"</code>
+            </th>
+            <td><code>button</code></td>
+            <td>Indicates that the popup element <strong>is</strong> displayed.</td>
+          </tr>
+        </tbody>
+      </table>
     </section>
 
     <section>

examples/combobox/combobox-autocomplete-list.html

@@ -53,7 +53,7 @@ <h2 id="ex_label">Example</h2>
           <div class="group">
             <input id="cb1-input" class="cb_edit" type="text" role="combobox" aria-autocomplete="list"
               aria-expanded="false" aria-controls="cb1-listbox">
-            <button id="cb1-button" tabindex="-1" aria-label="Open">
+            <button id="cb1-button" tabindex="-1"  aria-label="State" aria-expanded="false" aria-controls="cb1-listbox">
               <span class="arrow">
                 <svg width="18" height="16" aria-hidden="true" focusable="false">
                   <polygon points="3,5 15,5 9,13"></polygon>
@@ -422,8 +422,44 @@ <h3 id="rps_label_listbox">Listbox Popup</h3>
           </tr>
         </tbody>
       </table>
-    </section>
 
+      <h3 id="rps_label_button">Button</h3>
+      <table aria-labelledby="rps_label_button rps_label" class="data attributes">
+        <thead>
+          <tr>
+            <th scope="col">Role</th>
+            <th scope="col">Attribute</th>
+            <th scope="col">Element</th>
+            <th scope="col">Usage</th>
+          </tr>
+        </thead>
+        <tbody>
+          <tr data-test-id="button-aria-controls">
+            <td></td>
+            <th scope="row">
+              <code>aria-controls="#IDREF"</code>
+            </th>
+            <td><code>button</code></td>
+            <td>Identifies the element that serves as the popup.</td>
+          </tr>
+          <tr data-test-id="button-aria-expanded">
+            <td></td>
+            <th scope="row">
+              <code>aria-expanded="false"</code>
+            </th>
+            <td><code>button</code></td>
+            <td>Indicates that the popup element <strong>is not</strong> displayed.</td>
+          </tr>
+          <tr data-test-id="button-aria-expanded">
+            <td></td>
+            <th scope="row">
+              <code>aria-expanded="true"</code>
+            </th>
+            <td><code>button</code></td>
+            <td>Indicates that the popup element <strong>is</strong> displayed.</td>
+          </tr>
+        </tbody>
+      </table>
     <section>
       <h2>Javascript and CSS Source Code</h2>
       <ul>

examples/combobox/combobox-autocomplete-none.html

@@ -53,7 +53,7 @@ <h2 id="ex_label">Example</h2>
                    aria-autocomplete="none"
                    aria-expanded="false"
                    aria-controls="cb1-listbox">
-            <button type="button" id="cb1-button" tabindex="-1" aria-label="Open">
+            <button type="button" id="cb1-button" tabindex="-1"  aria-label="State" aria-expanded="false" aria-controls="cb1-listbox" >
               <span class="arrow">
                 <svg width="18" height="16" aria-hidden="true" focusable="false">
                   <polygon points="3,5 15,5 9,13"></polygon>
@@ -371,8 +371,43 @@ <h3 id="rps_label_listbox">Listbox Popup</h3>
           </tr>
         </tbody>
       </table>
-    </section>
-
+      <h3 id="rps_label_button">Button</h3>
+      <table aria-labelledby="rps_label_button rps_label" class="data attributes">
+        <thead>
+          <tr>
+            <th scope="col">Role</th>
+            <th scope="col">Attribute</th>
+            <th scope="col">Element</th>
+            <th scope="col">Usage</th>
+          </tr>
+        </thead>
+        <tbody>
+          <tr data-test-id="button-aria-controls">
+            <td></td>
+            <th scope="row">
+              <code>aria-controls="#IDREF"</code>
+            </th>
+            <td><code>button</code></td>
+            <td>Identifies the element that serves as the popup.</td>
+          </tr>
+          <tr data-test-id="button-aria-expanded">
+            <td></td>
+            <th scope="row">
+              <code>aria-expanded="false"</code>
+            </th>
+            <td><code>button</code></td>
+            <td>Indicates that the popup element <strong>is not</strong> displayed.</td>
+          </tr>
+          <tr data-test-id="button-aria-expanded">
+            <td></td>
+            <th scope="row">
+              <code>aria-expanded="true"</code>
+            </th>
+            <td><code>button</code></td>
+            <td>Indicates that the popup element <strong>is</strong> displayed.</td>
+          </tr>
+        </tbody>
+      </table>
     <section>
       <h2>Javascript and CSS Source Code</h2>
       <ul>

examples/combobox/css/combobox-autocomplete.css

@@ -33,7 +33,7 @@
   outline: none;
 }
 
-.combobox button.open svg {
+.combobox button[aria-expanded="true"] svg {
   transform: rotate(180deg) translate(0, -1px);
 }
 

examples/combobox/js/combobox-autocomplete.js

@@ -248,7 +248,7 @@ ComboboxAutocomplete.prototype.hasOptions = function () {
 ComboboxAutocomplete.prototype.open = function () {
   this.listboxNode.style.display = 'block';
   this.comboboxNode.setAttribute('aria-expanded', 'true');
-  this.buttonNode.classList.add('open');
+  this.buttonNode.setAttribute('aria-expanded', 'true');
 };
 
 ComboboxAutocomplete.prototype.close = function (force) {
@@ -260,7 +260,7 @@ ComboboxAutocomplete.prototype.close = function (force) {
     this.setCurrentOptionStyle(false);
     this.listboxNode.style.display = 'none';
     this.comboboxNode.setAttribute('aria-expanded', 'false');
-    this.buttonNode.classList.remove('open');
+    this.buttonNode.setAttribute('aria-expanded', 'false');
     this.setActiveDescendant(false);
   }
 };

test/tests/combobox_autocomplete-both.js

@@ -14,6 +14,7 @@ const ex = {
   textboxSelector: '#ex1 input[type="text"]',
   listboxSelector: '#ex1 [role="listbox"]',
   optionsSelector: '#ex1 [role="option"]',
+  buttonSelector: '#ex1 button',
   numAOptions: 5,
   secondAOption: 'Alaska'
 
@@ -149,6 +150,76 @@ ariaTest('"aria-selected" attribute on options element', exampleFile, 'option-ar
   await assertAttributeValues(t, ex.optionsSelector + ':nth-of-type(1)', 'aria-selected', 'true');
 });
 
+ariaTest('"aria-controls" attribute on button element', exampleFile, 'button-aria-controls', async (t) => {
+  t.plan(2);
+
+  const popupId = await t.context.session
+    .findElement(By.css(ex.buttonSelector))
+    .getAttribute('aria-controls');
+
+  t.truthy(
+    popupId,
+    '"aria-controls" attribute should exist on: ' + ex.buttonSelector
+  );
+
+  const popupElements = await t.context.session
+    .findElement(By.id('ex1'))
+    .findElements(By.id(popupId));
+
+  t.is(
+    popupElements.length,
+    1,
+    'There should be a element with id "' + popupId + '" as referenced by the aria-controls attribute'
+  );
+});
+
+ariaTest('"aria-expanded" on button element', exampleFile, 'button-aria-expanded', async (t) => {
+  t.plan(4);
+
+  const button = await t.context.session.findElement(By.css(ex.buttonSelector));
+
+  // Check that aria-expanded is false and the listbox is not visible before interacting
+
+  t.is(
+    await button.getAttribute('aria-expanded'),
+    'false',
+    'button element should have attribute "aria-expanded" set to false by default.'
+  );
+
+  const popupId = await t.context.session
+    .findElement(By.css(ex.textboxSelector))
+    .getAttribute('aria-controls');
+
+  const popupElement = await t.context.session
+    .findElement(By.id('ex1'))
+    .findElement(By.id(popupId));
+
+  t.false(
+    await popupElement.isDisplayed(),
+    'Popup element should not be displayed when \'aria-expanded\' is false\''
+  );
+
+  // Send key "a" to textbox
+
+  await t.context.session
+    .findElement(By.css(ex.textboxSelector))
+    .sendKeys('a');
+
+  // Check that aria-expanded is true and the listbox is visible
+
+  t.is(
+    await button.getAttribute('aria-expanded'),
+    'true',
+    'button element should have attribute "aria-expand" set to true after typing.'
+  );
+
+  t.true(
+    await popupElement.isDisplayed(),
+    'Popup element should be displayed when \'aria-expanded\' is true\''
+  );
+
+});
+
 // Keys
 
 ariaTest('Test alt + down key press with focus on textbox',

test/tests/combobox_autocomplete-list.js

@@ -14,6 +14,7 @@ const ex = {
   textboxSelector: '#ex1 input[type="text"]',
   listboxSelector: '#ex1 [role="listbox"]',
   optionsSelector: '#ex1 [role="option"]',
+  buttonSelector: '#ex1 button',
   numAOptions: 5
 };
 
@@ -154,6 +155,77 @@ ariaTest('"aria-selected" attribute on options element', exampleFile, 'option-ar
   await assertAttributeValues(t, ex.optionsSelector + ':nth-of-type(1)', 'aria-selected', 'true');
 });
 
+ariaTest('"aria-controls" attribute on button element', exampleFile, 'button-aria-controls', async (t) => {
+  t.plan(2);
+
+  const popupId = await t.context.session
+    .findElement(By.css(ex.buttonSelector))
+    .getAttribute('aria-controls');
+
+  t.truthy(
+    popupId,
+    '"aria-controls" attribute should exist on: ' + ex.buttonSelector
+  );
+
+  const popupElements = await t.context.session
+    .findElement(By.id('ex1'))
+    .findElements(By.id(popupId));
+
+  t.is(
+    popupElements.length,
+    1,
+    'There should be a element with id "' + popupId + '" as referenced by the aria-controls attribute'
+  );
+});
+
+
+ariaTest('"aria-expanded" on button element', exampleFile, 'button-aria-expanded', async (t) => {
+  t.plan(4);
+
+  const button = await t.context.session.findElement(By.css(ex.buttonSelector));
+
+  // Check that aria-expanded is false and the listbox is not visible before interacting
+
+  t.is(
+    await button.getAttribute('aria-expanded'),
+    'false',
+    'button element should have attribute "aria-expanded" set to false by default.'
+  );
+
+  const popupId = await t.context.session
+    .findElement(By.css(ex.textboxSelector))
+    .getAttribute('aria-controls');
+
+  const popupElement = await t.context.session
+    .findElement(By.id('ex1'))
+    .findElement(By.id(popupId));
+
+  t.false(
+    await popupElement.isDisplayed(),
+    'Popup element should not be displayed when \'aria-expanded\' is false\''
+  );
+
+  // Send key "a" to textbox
+
+  await t.context.session
+    .findElement(By.css(ex.textboxSelector))
+    .sendKeys('a');
+
+  // Check that aria-expanded is true and the listbox is visible
+
+  t.is(
+    await button.getAttribute('aria-expanded'),
+    'true',
+    'button element should have attribute "aria-expand" set to true after typing.'
+  );
+
+  t.true(
+    await popupElement.isDisplayed(),
+    'Popup element should be displayed when \'aria-expanded\' is true\''
+  );
+
+});
+
 
 // Keys