-
+
-
@@ -272,6 +273,10 @@ Listbox Popup
+
+
+ The button has been removed from the tab sequence of the page, but is still important to assistive technologies for mobile devices that use touch events to open the list of options.
+
@@ -422,6 +427,60 @@ Listbox Popup
+
+
+
+
+
+ Role
+ Attribute
+ Element
+ Usage
+
+
+
+
+
+ tabindex="-1"
+
+ buttonRemoves the button from the tab sequence of the page because its function is redundant with the keyboard operation of the combobox.
+
+
+
+ aria-label="States"
+
+ buttonProvides a label for the button.
+
+
+
+ aria-controls="#IDREF"
+
+ buttonIdentifies the element that serves as the popup.
+
+
+
+ aria-expanded="false"
+
+ buttonIndicates that the popup element is not displayed.
+
+
+
+ aria-expanded="true"
+
+ buttonIndicates that the popup element is displayed.
+
+
+
diff --git a/examples/combobox/combobox-autocomplete-none.html b/examples/combobox/combobox-autocomplete-none.html
index e2262a6b05..35d05c1420 100644
--- a/examples/combobox/combobox-autocomplete-none.html
+++ b/examples/combobox/combobox-autocomplete-none.html
@@ -53,10 +53,11 @@ Example
aria-autocomplete="none"
aria-expanded="false"
aria-controls="cb1-listbox">
-
+
-
@@ -221,6 +222,10 @@ Listbox Popup
+
+
+ The button has been removed from the tab sequence of the page, but is still important to assistive technologies for mobile devices that use touch events to open the list of options.
+
@@ -371,6 +376,59 @@ Listbox Popup
+
+
+
+
+ Role
+ Attribute
+ Element
+ Usage
+
+
+
+
+
+ tabindex="-1"
+
+ buttonRemoves the button from the tab sequence of the page, since it's keyboard function is redundant with the keyboard operation of the textbox to open the listbox.
+
+
+
+ aria-label="Previous Searches"
+
+ buttonProvides a label for the button.
+
+
+
+ aria-controls="#IDREF"
+
+ buttonIdentifies the element that serves as the popup.
+
+
+
+ aria-expanded="false"
+
+ buttonIndicates that the popup element is not displayed.
+
+
+
+ aria-expanded="true"
+
+ buttonIndicates that the popup element is displayed.
+
+
+
diff --git a/examples/combobox/css/combobox-autocomplete.css b/examples/combobox/css/combobox-autocomplete.css
index 3ea6b53c0a..bd15ab978c 100644
--- a/examples/combobox/css/combobox-autocomplete.css
+++ b/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);
}
@@ -44,16 +44,27 @@
.combobox .group.focus input,
.combobox .group.focus button {
- background-color: #DEF;
+ background-color: #def;
}
-.combobox polygon {
+.combobox button polygon.outline {
+ stroke: transparent;
+ fill: transparent;
+}
+
+.combobox button[aria-expanded="true"] polygon.outline,
+.combobox .group.focus polygon.outline {
+ stroke: white;
+ fill: white;
+}
+
+.combobox polygon.arrow {
fill: gray;
stroke: gray;
}
-.combobox button.open polygon,
-.combobox .group.focus polygon {
+.combobox button[aria-expanded="true"] polygon.arrow,
+.combobox .group.focus polygon.arrow {
fill: black;
stroke: black;
}
@@ -88,11 +99,11 @@ ul[role="listbox"] li[role="option"] {
/* focus and hover styling */
[role="listbox"].focus [role="option"][aria-selected="true"] {
- background-color: #DEF;
+ background-color: #def;
padding-top: 0;
padding-bottom: 0;
- border-top: 0.2em solid #8CCBF2;
- border-bottom: 0.2em solid #8CCBF2;
+ border-top: 0.2em solid #8ccbf2;
+ border-bottom: 0.2em solid #8ccbf2;
}
@media (forced-colors: active), (-ms-high-contrast: active) {
@@ -100,10 +111,10 @@ ul[role="listbox"] li[role="option"] {
-ms-high-contrast-adjust: none; /* disable the backgrounds that Edge puts behind text */
background-color: highlight;
color: highlighttext;
- border-color: currentcolor;
+ border-color: currentColor;
}
}
[role="listbox"] li[role="option"]:hover {
- background-color: #DEF;
+ background-color: #def;
}
diff --git a/examples/combobox/js/combobox-autocomplete.js b/examples/combobox/js/combobox-autocomplete.js
index 8bae873d66..6f39ccf466 100644
--- a/examples/combobox/js/combobox-autocomplete.js
+++ b/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);
}
};
diff --git a/test/tests/combobox_autocomplete-both.js b/test/tests/combobox_autocomplete-both.js
index f16296e16a..7699fcbc3b 100644
--- a/test/tests/combobox_autocomplete-both.js
+++ b/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,94 @@ ariaTest('"aria-selected" attribute on options element', exampleFile, 'option-ar
await assertAttributeValues(t, ex.optionsSelector + ':nth-of-type(1)', 'aria-selected', 'true');
});
+ariaTest('Button should have tabindex="-1"', exampleFile, 'button-tabindex', async (t) => {
+ t.plan(1);
+
+ const button = await t.context.session.findElement(By.css(ex.buttonSelector))
+
+ t.is(
+ await button.getAttribute('tabindex'),
+ '-1',
+ 'tabindex should be set to "-1" on button'
+ );
+});
+
+ariaTest('"aria-label" attribute on button element', exampleFile, 'button-aria-label', async (t) => {
+ t.plan(1);
+ await assertAriaLabelExists(t, ex.buttonSelector);
+});
+
+
+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',
diff --git a/test/tests/combobox_autocomplete-list.js b/test/tests/combobox_autocomplete-list.js
index 0bf230a4c6..ba991e5641 100644
--- a/test/tests/combobox_autocomplete-list.js
+++ b/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,94 @@ ariaTest('"aria-selected" attribute on options element', exampleFile, 'option-ar
await assertAttributeValues(t, ex.optionsSelector + ':nth-of-type(1)', 'aria-selected', 'true');
});
+ariaTest('Button should have tabindex="-1"', exampleFile, 'button-tabindex', async (t) => {
+ t.plan(1);
+
+ const button = await t.context.session.findElement(By.css(ex.buttonSelector))
+
+ t.is(
+ await button.getAttribute('tabindex'),
+ '-1',
+ 'tabindex should be set to "-1" on button'
+ );
+});
+
+ariaTest('"aria-label" attribute on button element', exampleFile, 'button-aria-label', async (t) => {
+ t.plan(1);
+ await assertAriaLabelExists(t, ex.buttonSelector);
+});
+
+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
diff --git a/test/tests/combobox_autocomplete-none.js b/test/tests/combobox_autocomplete-none.js
index a08652bf98..b87c11885c 100644
--- a/test/tests/combobox_autocomplete-none.js
+++ b/test/tests/combobox_autocomplete-none.js
@@ -14,6 +14,7 @@ const ex = {
textboxSelector: '#ex1 input[type="text"]',
listboxSelector: '#ex1 [role="listbox"]',
optionsSelector: '#ex1 [role="option"]',
+ buttonSelector: '#ex1 button',
numOptions: 11
};
@@ -154,6 +155,92 @@ ariaTest('"aria-selected" attribute on options element', exampleFile, 'option-ar
await assertAttributeValues(t, ex.optionsSelector + ':nth-of-type(1)', 'aria-selected', 'true');
});
+ariaTest('Button should have tabindex="-1"', exampleFile, 'button-tabindex', async (t) => {
+ t.plan(1);
+
+ const button = await t.context.session.findElement(By.css(ex.buttonSelector))
+
+ t.is(
+ await button.getAttribute('tabindex'),
+ '-1',
+ 'tabindex should be set to "-1" on button'
+ );
+});
+
+ariaTest('"aria-label" attribute on button element', exampleFile, 'button-aria-label', async (t) => {
+ t.plan(1);
+ await assertAriaLabelExists(t, ex.buttonSelector);
+});
+
+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
@@ -549,4 +636,3 @@ ariaTest('Expected behavior for all other standard single line editing keys',
'Sending standard editing keys should NOT filter results'
);
});
-