ARIA 1.0 Combobox with List Autocomplete: A combobox that demonstrates the autocomplete behavior known as list with manual selection and uses the ARIA 1.0 implementation pattern.
+
ARIA 1.0 Combobox Without Autocomplete: A combo box that demonstrates the behavior associated with aria-autocomplete=none and uses the ARIA 1.0 implementation pattern.
diff --git a/examples/combobox/aria1.0pattern/combobox-autocomplete-both.html b/examples/combobox/aria1.0pattern/combobox-autocomplete-both.html
index a658449596..f4a8c2bb22 100644
--- a/examples/combobox/aria1.0pattern/combobox-autocomplete-both.html
+++ b/examples/combobox/aria1.0pattern/combobox-autocomplete-both.html
@@ -2,193 +2,461 @@
-Example of Legacy ARIA 1.0 Combobox With Both List and Inline Autocompletion | WAI-ARIA Authoring Practices 1.1
+Legacy ARIA 1.0 Combobox With Both List and Inline Autocomplete Example | WAI-ARIA Authoring Practices
+ 1.1
-
-
-
+
+
+
-
-
+
+
+
+
+
-
Example of Legacy ARIA 1.0 Combobox With Both List and Inline Autocompletion
-
- NOTE: This page is work in progress; it is not ready for review.
- This work is tracked by issue 99.
-
-
-
- Replace this paragraph with an overview of the example that is something like the following. The
- below example section demonstrates a simple checkbox that implements the
- design pattern for checkbox.
- This example uses ... summarize salient techniques )
-
-
Similar examples include:
-
-
example name: summarize what this related example demonstrates.
-
-
+
Legacy ARIA 1.0 Combobox With Both List and Inline Autocomplete Example
+
+ NOTE: This page is work in progress. Please provide feedback in
+ issue 99.
+
+
+ The below combobox for choosing the name of a US state or territory demonstrates the
+ ARIA 1.0 design pattern for combobox.
+ The design pattern describes four types of autocomplete behavior.
+ This example illustrates the autocomplete behavior referred to in the pattern as list with inline completion.
+ If the user types one or more characters in the edit box and the typed characters match the beginning of the name of one or more states or territories,
+ a listbox popup appears containing the matching names, and the first match is automatically selected.
+ In addition, the portion of the selected suggestion that has not been typed by the user, a completion string, appears inline after the input cursor in the textbox.
+ The automatically selected suggestion becomes the value of the textbox when the combobox loses focus unless the user chooses a different suggestion or changes the character string in the textbox.
+ Note that this implementation enables users to input the name of a state or territory, but it does not prevent input of any other arbetrary value.
+
+
Similar examples include:
+
+
ARIA 1.0 Combobox with List Autocomplete: A combobox that demonstrates the autocomplete behavior known as list with manual selection and uses the ARIA 1.0 implementation pattern.
+
ARIA 1.0 Combobox Without Autocomplete: A combo box that demonstrates the behavior associated with aria-autocomplete=none and uses the ARIA 1.0 implementation pattern.
+
ARIA 1.1 Combobox with Listbox Popup: Comboboxes that demonstrate the various forms of autocomplete behavior using a listbox popup and use the ARIA 1.1 implementation pattern.
+
ARIA 1.1 Combobox with Grid Popup: A combobox that presents suggestions in a grid, enabling users to navigate descriptive information about each suggestion.
Opens the listbox and moves focus to the first suggested value.
+
+
+
Up Arrow
+
Opens the listbox and moves focus to the last suggested value.
+
+
+
Escape
+
if open, closes the listbox.
+
+
+
Standard single line text editing keys
+
+
+
Keys used for cursor movement and text manipulation, such as Delete and Shift + Right Arrow.
+
As the value of the textbox changes, suggestions in the listbox change to show values that match the input; if there are no matches, the listbox is not visible.
+
Note: An HTML input with type=text is used for the textbox so the browser will provide platform-specific editing keys.
+
+
+
+
+
+
Listbox Popup
+
+ NOTE: When visual focus is in the listbox, DOM focus remains on the textbox and the value of aria-activedescendant on the textbox is set to a value that refers to the listbox option that is visually indicated as focused.
+ Where the following descriptions of keyboard commands mention focus, they are referring to the visual focus indicator.
+ For more information about this focus management technique, see
+ Using aria-activedescendant to Manage Focus.
+
+
+
+
+
Key
+
Function
+
+
+
+
+
Enter
+
+
+
Sets the textbox value to the content of the focused option in the listbox.
+
Closes the listbox.
+
Sets focus on the textbox.
+
+
+
+
+
Escape
+
Closes the listbox and sets focus on the textbox.
+
+
+
Down Arrow
+
+
+
Moves focus to the next option.
+
If focus is on the last option, the focus does not move.
+
+
+
+
+
Up Arrow
+
+
+
Moves focus to the previous option.
+
If focus is on the first option, the focus does not move.
+
+
+
+
+
Right Arrow
+
+
+
Returns focus to the textbox without closing the listbox.
+
Moves the input cursor one character to the right. If the input cursor is on the right-most character, the cursor does not move.
+
+
+
+
+
Left Arrow
+
+
+
Returns focus to the textbox without closing the listbox.
+
Moves the input cursor one character to the left. If the input cursor is on the left-most character, the cursor does not move.
+
+
+
+
+
Home
+
Moves focus to the first option.
+
+
+
End
+
Moves focus to the last option.
+
+
+
Printable Characters
+
+
+
Returns focus to the textbox without closing the popup and types the character.
+
Note: the listbox content may change due to the new textbox value.
+
+
+
+
+
Standard Editing Keys e.g., Delete
+
+
+
Return focus to the textbox without closing the popup.
+
Executes the platform-specific function for the key.
+
Note: the listbox content may change due to the new textbox value.
Note: The primary difference between the ARIA 1.0 pattern and the ARIA 1.1 pattern is the placement of the combobox role.
+
+
+
+
+
+
+ aria-autocomplete=both
+
+
input[type="text"]
+
Indicates that the autocomplete behavior of the text input is to both show an inline completion string and suggest a list of possible values in a popup where the suggestions are related to the string that is present in the textbox.
+
+
+
+
+ aria-haspopup=true
+
+
input[type="text"]
+
Indicates that the combobox can popup another element to suggest values.
+
+
+
+
+ aria-owns=#IDREF
+
+
input[type="text"]
+
+
+
Identifies the element that serves as the popup.
+
Note: In the ARIA 1.1 combobox pattern, the combobox uses aria-controls instead of aria-owns.
+
+
+
+
+
+
+ aria-expanded=false
+
+
input[type="text"]
+
Indicates that the popup element is not displayed.
+
+
+
+
+ aria-expanded=true
+
+
input[type="text"]
+
Indicates that the popup element is displayed.
+
+
+
+
+ aria-activedescendant=IDREF
+
+
input[type="text"]
+
+
+
When an option in the listbox is visually indicated as having keyboard focus, refers to that option.
+
When navigation keys, such as Down Arrow, are pressed, the JavaScript changes the value.
+
Enables assistive technologies to know which element the application regards as focused while DOM focus remains on the input element.
The text content of the element provides the accessible name of the option.
+
+
+
+
+
+
+ aria-selected=true
+
+
li
+
+
+
Specified on an option in the listbox when it is visually highlighted as selected.
+
Occurs when an option in the list is referenced by aria-activedescendant and when focus is in the textbox and the first option is automatically selected.
+
+
+
+
+
+
-
-
Example
-
-
-
-
-
This is the place where the reader will experience the functioning example.
+
+
Javascript and CSS Source Code
+
-
The HTML in this section along with the javascript and CSS it uses demonstrate
- the design pattern.
Optional section: If appropriate, please replace this content with a list of any special or noteworthy accessibility features
- demonstrated in this implementation, such as:
-
-
What distinguishes this example from related examples.
-
Keyboard chortcuts, live regions, unusual event handling, or other ancillary best practices that are employed.
-
Do not include information that would be repeated in the following keyboard and attribute sections.
-
Delete this section if not needed.
-
-
-
-
-
Keyboard Support
-
-
-
-
-
Key
-
Function
-
-
-
-
-
KeyName
-
- Description of key function.
-
-
-
-
-
KeyName
-
-
-
If condition 1, performs function 1.
-
If condition 2, performs function 2.
-
Only use a list if multiple statements are needed.
-
-
-
-
-
-
-
-
-
Role, Property, State, and Tabindex Attributes
-
-
-
-
-
Role
-
Attribute
-
Element
-
Usage
-
-
-
-
-
RoleName
-
-
HTML_ELEMENT
-
- Describe usage/purpose, e.g., indicates the focusable element that serves as the ...
-
-
-
-
-
-
-
AttributeName=AttributeValue
-
HTML_ELEMENT
-
-
-
explanation of usage, purpose, benefit, and/or guidance relevant to this implementation.
-
If making multiple statements, use list for brevity and clarity
+
+
+
+
diff --git a/examples/combobox/aria1.0pattern/combobox-autocomplete-list.html b/examples/combobox/aria1.0pattern/combobox-autocomplete-list.html
index ac48a39893..be5c5c89c0 100644
--- a/examples/combobox/aria1.0pattern/combobox-autocomplete-list.html
+++ b/examples/combobox/aria1.0pattern/combobox-autocomplete-list.html
@@ -2,7 +2,7 @@
-Example of Legacy ARIA 1.0 Combobox With an Autocomplete List | WAI-ARIA Authoring Practices 1.1
+Legacy ARIA 1.0 Combobox With List Autocomplete Example | WAI-ARIA Authoring Practices 1.1
@@ -13,184 +13,443 @@
-
+
+
+
+
-
Example of Legacy ARIA 1.0 Combobox With an Autocomplete List
-
- NOTE: This page is work in progress; it is not ready for review.
- This work is tracked by issue 99.
-
-
-
- Replace this paragraph with an overview of the example that is something like the following. The
- below example section demonstrates a simple checkbox that implements the
- design pattern for checkbox.
- This example uses ... summarize salient techniques )
-
-
Similar examples include:
-
-
example name: summarize what this related example demonstrates.
-
-
-
-
-
Example
-
-
-
-
-
This is the place where the reader will experience the functioning example.
+
Legacy ARIA 1.0 Combobox With List Autocomplete Example
+
+ NOTE: This page is work in progress. Please provide feedback in
+ issue 99.
+
+
+ The below combobox for choosing the name of a US state or territory demonstrates the
+ ARIA 1.0 design pattern for combobox.
+ The design pattern describes four types of autocomplete behavior.
+ This example illustrates the autocomplete behavior known as list autocomplete with manual selection.
+ If the user types one or more characters in the edit box and the typed characters match the beginning of the name of one or more states or territories, a listbox popup appears containing the matching names.
+ When the listbox appears, a suggested name is not automatically selected.
+ Thus, after typing, if the user tabs or clicks out of the combobox without choosing a value from the listbox, the typed string becomes the value of the combobox.
+ Note that this implementation enables users to input the name of a state or territory, but it does not prevent input of any other arbetrary value.
+
ARIA 1.0 Combobox Without Autocomplete: A combo box that demonstrates the behavior associated with aria-autocomplete=none and uses the ARIA 1.0 implementation pattern.
+
ARIA 1.1 Combobox with Listbox Popup: Comboboxes that demonstrate the various forms of autocomplete behavior using a listbox popup and use the ARIA 1.1 implementation pattern.
+
ARIA 1.1 Combobox with Grid Popup: A combobox that presents suggestions in a grid, enabling users to navigate descriptive information about each suggestion.
Opens the listbox and moves focus to the first suggested value.
+
+
+
Up Arrow
+
Opens the listbox and moves focus to the last suggested value.
+
+
+
Escape
+
if open, closes the listbox.
+
+
+
Standard single line text editing keys
+
+
+
Keys used for cursor movement and text manipulation, such as Delete and Shift + Right Arrow.
+
As the value of the textbox changes, suggestions in the listbox change to show values that match the input; if there are no matches, the listbox is not visible.
+
Note: An HTML input with type=text is used for the textbox so the browser will provide platform-specific editing keys.
+
+
+
+
+
+
Listbox Popup
+
+ NOTE: When visual focus is in the listbox, DOM focus remains on the textbox and the value of aria-activedescendant on the textbox is set to a value that refers to the listbox option that is visually indicated as focused.
+ Where the following descriptions of keyboard commands mention focus, they are referring to the visual focus indicator.
+ For more information about this focus management technique, see
+ Using aria-activedescendant to Manage Focus.
+
+
+
+
+
Key
+
Function
+
+
+
+
+
Enter
+
+
+
Sets the textbox value to the content of the focused option in the listbox.
+
Closes the listbox.
+
Sets focus on the textbox.
+
+
+
+
+
Escape
+
Closes the listbox and sets focus on the textbox.
+
+
+
Down Arrow
+
+
+
Moves focus to the next option.
+
If focus is on the last option, the focus does not move.
+
+
+
+
+
Up Arrow
+
+
+
Moves focus to the previous option.
+
If focus is on the first option, the focus does not move.
+
+
+
+
+
Right Arrow
+
+
+
Returns focus to the textbox without closing the listbox.
+
Moves the input cursor one character to the right. If the input cursor is on the right-most character, the cursor does not move.
+
+
+
+
+
Left Arrow
+
+
+
Returns focus to the textbox without closing the listbox.
+
Moves the input cursor one character to the left. If the input cursor is on the left-most character, the cursor does not move.
+
+
+
+
+
Home
+
Moves focus to the first option.
+
+
+
End
+
Moves focus to the last option.
+
+
+
Printable Characters
+
+
+
Returns focus to the textbox without closing the popup and types the character.
+
Note: the listbox content may change due to the new textbox value.
+
+
+
+
+
Standard Editing Keys e.g., Delete
+
+
+
Return focus to the textbox without closing the popup.
+
Executes the platform-specific function for the key.
+
Note: the listbox content may change due to the new textbox value.
Note: The primary difference between the ARIA 1.0 pattern and the ARIA 1.1 pattern is the placement of the combobox role.
+
+
+
+
+
+
+ aria-autocomplete=list
+
+
input[type="text"]
+
Indicates that the autocomplete behavior of the text input is to suggest a list of possible values in a popup and that the suggestions are related to the string that is present in the textbox.
+
+
+
+
+ aria-haspopup=true
+
+
input[type="text"]
+
Indicates that the combobox can popup another element to suggest values.
+
+
+
+
+ aria-owns=#IDREF
+
+
input[type="text"]
+
+
+
Identifies the element that serves as the popup.
+
Note: In the ARIA 1.1 combobox pattern, the combobox uses aria-controls instead of aria-owns.
+
+
+
+
+
+
+ aria-expanded=false
+
+
input[type="text"]
+
Indicates that the popup element is not displayed.
+
+
+
+
+ aria-expanded=true
+
+
input[type="text"]
+
Indicates that the popup element is displayed.
+
+
+
+
+ aria-activedescendant=IDREF
+
+
input[type="text"]
+
+
+
When an option in the listbox is visually indicated as having keyboard focus, refers to that option.
+
When navigation keys, such as Down Arrow, are pressed, the JavaScript changes the value.
+
Enables assistive technologies to know which element the application regards as focused while DOM focus remains on the input element.
Optional section: If appropriate, please replace this content with a list of any special or noteworthy accessibility features
- demonstrated in this implementation, such as:
-
-
What distinguishes this example from related examples.
-
Keyboard chortcuts, live regions, unusual event handling, or other ancillary best practices that are employed.
-
Do not include information that would be repeated in the following keyboard and attribute sections.
-
Delete this section if not needed.
-
-
-
-
-
Keyboard Support
-
-
-
-
-
Key
-
Function
-
-
-
-
-
KeyName
-
- Description of key function.
-
-
-
-
-
KeyName
-
-
-
If condition 1, performs function 1.
-
If condition 2, performs function 2.
-
Only use a list if multiple statements are needed.
-
-
-
-
-
-
-
-
-
Role, Property, State, and Tabindex Attributes
-
-
-
-
-
Role
-
Attribute
-
Element
-
Usage
-
-
-
-
-
RoleName
-
-
HTML_ELEMENT
-
- Describe usage/purpose, e.g., indicates the focusable element that serves as the ...
-
-
-
-
-
-
-
AttributeName=AttributeValue
-
HTML_ELEMENT
-
-
-
explanation of usage, purpose, benefit, and/or guidance relevant to this implementation.
-
If making multiple statements, use list for brevity and clarity
Example of Legacy ARIA 1.0 Combobox Without Autocomplete
-
- NOTE: This page is work in progress; it is not ready for review.
- This work is tracked by issue 99.
-
-
-
- Replace this paragraph with an overview of the example that is something like the following. The
- below example section demonstrates a simple checkbox that implements the
- design pattern for checkbox.
- This example uses ... summarize salient techniques )
-
-
Similar examples include:
-
-
example name: summarize what this related example demonstrates.
-
-
+
Legacy ARIA 1.0 Combobox without Autocomplete Example
+
+ NOTE: This page is work in progress. Please provide feedback in
+ issue 99.
+
+
+ The below combobox that enables users to choose a term from a hypothetical list of previously searched terms demonstrates the
+ ARIA 1.0 design pattern for combobox.
+ The design pattern describes four types of autocomplete behavior.
+ This example illustrates the autocomplete behavior known as no autocomplete.
+ The terms that appear in the listbox popup are not related to the string that is present in the textbox.
+ In this implementation, The listbox popup is not automatically triggered; it is displayed only when the user opens it.
+
+
Similar examples include:
+
+
ARIA 1.0 Combobox with List Autocomplete: A combobox that demonstrates the autocomplete behavior known as list with manual selection and uses the ARIA 1.0 implementation pattern.
ARIA 1.1 Combobox with Listbox Popup: Comboboxes that demonstrate the various forms of autocomplete behavior using a listbox popup and use the ARIA 1.1 implementation pattern.
+
ARIA 1.1 Combobox with Grid Popup: A combobox that presents suggestions in a grid, enabling users to navigate descriptive information about each suggestion.
Opens the listbox and moves focus to the first suggested value.
+
+
+
Up Arrow
+
Opens the listbox and moves focus to the last suggested value.
+
+
+
Escape
+
if open, closes the listbox.
+
+
+
Standard single line text editing keys
+
+
+
Keys used for cursor movement and text manipulation, such as Delete and Shift + Right Arrow.
+
Note: An HTML input with type=text is used for the textbox so the browser will provide platform-specific editing keys.
+
+
+
+
+
+
Listbox Popup
+
+ NOTE: When visual focus is in the listbox, DOM focus remains on the textbox and the value of aria-activedescendant on the textbox is set to a value that refers to the listbox option that is visually indicated as focused.
+ Where the following descriptions of keyboard commands mention focus, they are referring to the visual focus indicator.
+ For more information about this focus management technique, see
+ Using aria-activedescendant to Manage Focus.
+
+
+
+
+
Key
+
Function
+
+
+
+
+
Enter
+
+
+
Sets the textbox value to the content of the focused option in the listbox.
+
Closes the listbox.
+
Sets focus on the textbox.
+
+
+
+
+
Escape
+
Closes the listbox and sets focus on the textbox.
+
+
+
Down Arrow
+
+
+
Moves focus to the next option.
+
If focus is on the last option, the focus does not move.
+
+
+
+
+
Up Arrow
+
+
+
Moves focus to the previous option.
+
If focus is on the first option, the focus does not move.
+
+
+
+
+
Right Arrow
+
+
+
Returns focus to the textbox without closing the listbox.
+
Moves the input cursor one character to the right. If the input cursor is on the right-most character, the cursor does not move.
+
+
+
+
+
Left Arrow
+
+
+
Returns focus to the textbox without closing the listbox.
+
Moves the input cursor one character to the left. If the input cursor is on the left-most character, the cursor does not move.
+
+
+
+
+
Home
+
Moves focus to the first option.
+
+
+
End
+
Moves focus to the last option.
+
+
+
Printable Characters
+
Returns focus to the textbox without closing the popup and types the character.
+
+
+
Standard Editing Keys e.g., Delete
+
+
+
Return focus to the textbox without closing the popup.
+
Executes the platform-specific function for the key.
Optional section: If appropriate, please replace this content with a list of any special or noteworthy accessibility features
- demonstrated in this implementation, such as:
-
-
What distinguishes this example from related examples.
-
Keyboard chortcuts, live regions, unusual event handling, or other ancillary best practices that are employed.
-
Do not include information that would be repeated in the following keyboard and attribute sections.
-
Delete this section if not needed.
-
-
-
-
-
Keyboard Support
-
-
-
-
-
Key
-
Function
-
-
-
-
-
KeyName
-
- Description of key function.
-
-
-
-
-
KeyName
-
-
-
If condition 1, performs function 1.
-
If condition 2, performs function 2.
-
Only use a list if multiple statements are needed.
-
-
-
-
-
-
-
-
-
Role, Property, State, and Tabindex Attributes
-
-
-
-
-
Role
-
Attribute
-
Element
-
Usage
-
-
-
-
-
RoleName
-
-
HTML_ELEMENT
-
- Describe usage/purpose, e.g., indicates the focusable element that serves as the ...
-
-
-
-
-
-
-
AttributeName=AttributeValue
-
HTML_ELEMENT
-
-
-
explanation of usage, purpose, benefit, and/or guidance relevant to this implementation.
-
If making multiple statements, use list for brevity and clarity
+
+
+
diff --git a/examples/combobox/aria1.0pattern/css/combobox-1.0.css b/examples/combobox/aria1.0pattern/css/combobox-1.0.css
index 85c190566f..0633db3ac5 100644
--- a/examples/combobox/aria1.0pattern/css/combobox-1.0.css
+++ b/examples/combobox/aria1.0pattern/css/combobox-1.0.css
@@ -2,3 +2,30 @@
font-style: italic;
color: #366ED4;
}
+
+.combobox-list {
+ position: relative;
+}
+
+.combobox-inline label,
+.combobox-list label {
+ margin: 0;
+ padding: 0;
+ display: block;
+}
+
+.combobox-list .group input,
+.combobox-list .group button {
+ display: inline;
+}
+
+.combobox-list .group button {
+ margin: 0;
+ padding: 0 0.125em 0 0.125em;
+ position: relative;
+ top: 1px;
+ left: -2px;
+ font-size: 85%;
+ background-color: #eee;
+}
+
diff --git a/examples/combobox/aria1.0pattern/css/listbox.css b/examples/combobox/aria1.0pattern/css/listbox.css
new file mode 100644
index 0000000000..baf84e2b32
--- /dev/null
+++ b/examples/combobox/aria1.0pattern/css/listbox.css
@@ -0,0 +1,43 @@
+
+ul[role="listbox"] {
+ margin: 0;
+ padding: 0;
+ position: absolute;
+ top: 3em;
+ list-style: none;
+ background-color: #EEEEEE;
+ display: none;
+ border: thin #333 solid;
+ height: 12em;
+ width: 12em;
+ overflow: scroll;
+}
+
+ul[role="listbox"] li[role="option"]{
+ display: block;
+ margin: 0.25em;
+ padding: 0;
+ background-color: #EEEEEE;
+ font-size: 100%;
+}
+
+/* focus and hover styling */
+
+button:focus,
+button:hover,
+input:focus,
+input:hover {
+ outline: 2px solid black;
+}
+
+input:focus,
+input:hover {
+ background-color: #EEEEEE;
+}
+
+ul[role="listbox"] li[role="option"].focus,
+ul[role="listbox"] li[role="option"]:hover{
+ background-color: black;
+ color: white;
+}
+
diff --git a/examples/combobox/aria1.0pattern/js/combobox-1.0-list.js b/examples/combobox/aria1.0pattern/js/combobox-1.0-list.js
new file mode 100644
index 0000000000..9584bfbd9d
--- /dev/null
+++ b/examples/combobox/aria1.0pattern/js/combobox-1.0-list.js
@@ -0,0 +1,278 @@
+/*
+* This content is licensed according to the W3C Software License at
+* https://www.w3.org/Consortium/Legal/2015/copyright-software-and-document
+*/
+var ComboboxList = function (domNode) {
+
+ this.domNode = domNode;
+ this.listbox = false;
+ this.option = false;
+
+ this.hasFocus = false;
+ this.hasHover = false;
+ this.filter = '';
+
+ this.keyCode = Object.freeze({
+ 'BACKSPACE': 8,
+ 'TAB': 9,
+ 'RETURN': 13,
+ 'ESC': 27,
+ 'SPACE': 32,
+ 'PAGEUP': 33,
+ 'PAGEDOWN': 34,
+ 'END': 35,
+ 'HOME': 36,
+ 'LEFT': 37,
+ 'UP': 38,
+ 'RIGHT': 39,
+ 'DOWN': 40
+ });
+};
+
+ComboboxList.prototype.init = function () {
+
+ this.domNode.setAttribute('aria-haspopup', 'true');
+
+ this.autocomplete = this.domNode.getAttribute('aria-autocomplete');
+
+ if (this.autocomplete) {
+ this.autocomplete = this.autocomplete.toLowerCase();
+ }
+
+ this.domNode.addEventListener('keydown', this.handleKeydown.bind(this));
+ this.domNode.addEventListener('keyup', this.handleKeyup.bind(this));
+ this.domNode.addEventListener('click', this.handleClick.bind(this));
+ this.domNode.addEventListener('focus', this.handleFocus.bind(this));
+ this.domNode.addEventListener('blur', this.handleBlur.bind(this));
+
+ // initialize pop up menus
+
+ var listbox = document.getElementById(this.domNode.getAttribute('aria-owns'));
+
+ if (listbox) {
+ this.listbox = new Listbox(listbox, this);
+ this.listbox.init();
+ }
+
+ // Open Button
+
+ var button = this.domNode.nextElementSibling;
+
+ if (button && button.tagName === 'BUTTON') {
+ button.addEventListener('click', this.handleButtonClick.bind(this));
+ }
+
+};
+
+ComboboxList.prototype.updateValue = function () {
+ if (this.autocomplete === 'both') {
+
+ if (this.filter.length && this.option && this.listbox.isOpen()) {
+ this.domNode.value = this.option.textContent;
+ this.domNode.setSelectionRange(this.filter.length,this.filter.length);
+ }
+ else {
+ this.domNode.value = this.filter;
+ }
+ }
+};
+
+ComboboxList.prototype.setValue = function (value) {
+ this.filter = value;
+ this.domNode.value = this.filter;
+ this.domNode.setSelectionRange(this.filter.length,this.filter.length);
+ if (this.autocomplete !== 'none') {
+ this.listbox.filterOptions(this.filter, this.option);
+ }
+};
+
+ComboboxList.prototype.setOption = function (option) {
+ if (option) {
+ this.option = option;
+ this.listbox.setFocusStyle(this.option);
+ this.updateValue();
+ }
+};
+
+/* Event Handlers */
+
+ComboboxList.prototype.handleKeydown = function (event) {
+ var tgt = event.currentTarget,
+ flag = false,
+ char = event.key,
+ shiftKey = event.shiftKey,
+ ctrlKey = event.ctrlKey,
+ altKey = event.altKey;
+
+ switch (event.keyCode) {
+
+ case this.keyCode.RETURN:
+ if (this.option) {
+ this.setValue(this.option.textContent);
+ this.listbox.close(true);
+ }
+ flag = true;
+ break;
+
+ case this.keyCode.DOWN:
+
+ if (this.listbox.hasOptions()) {
+ if (this.listbox.isOpen()) {
+ this.setOption(this.listbox.getNextItem(this.option));
+ }
+ else {
+ this.listbox.open();
+ if (!altKey) {
+ this.setOption(this.listbox.getFirstItem());
+ }
+ }
+ }
+ flag = true;
+ break;
+
+ case this.keyCode.UP:
+ if (this.listbox.hasOptions()) {
+ if (this.listbox.isOpen()) {
+ this.setOption(this.listbox.getPreviousItem(this.option));
+ }
+ else {
+ this.listbox.open();
+ if (!altKey) {
+ this.setOption(this.listbox.getLastItem());
+ }
+ }
+ }
+ flag = true;
+ break;
+
+ case this.keyCode.HOME:
+ case this.keyCode.PAGEUP:
+ if (this.listbox.hasOptions()) {
+ if (this.listbox.isOpen()) {
+ this.setOption(this.listbox.getFirstItem());
+ }
+ }
+ flag = true;
+ break;
+
+ case this.keyCode.END:
+ case this.keyCode.PAGEDOWN:
+ if (this.listbox.hasOptions()) {
+ if (this.listbox.isOpen()) {
+ this.setOption(this.listbox.getLastItem());
+ }
+ }
+ flag = true;
+ break;
+
+ case this.keyCode.ESC:
+ if (this.listbox.isOpen()) {
+ this.listbox.close(true);
+ }
+ this.setValue(this.filter);
+ flag = true;
+ break;
+
+ default:
+ break;
+ }
+
+ if (flag) {
+ event.stopPropagation();
+ event.preventDefault();
+ }
+
+};
+
+ComboboxList.prototype.handleKeyup = function (event) {
+ var tgt = event.currentTarget,
+ flag = false,
+ option = false,
+ char = event.key;
+
+ function isPrintableCharacter (str) {
+ return str.length === 1 && str.match(/\S/);
+ }
+
+ this.filter = this.domNode.value.substring(0,this.domNode.selectionEnd);
+
+ if (this.autocomplete !== 'none') {
+ option = this.listbox.filterOptions(this.filter, this.option);
+ }
+
+ switch (event.keyCode) {
+
+ case this.keyCode.BACKSPACE:
+ if (this.autocomplete === 'both') {
+ this.setValue(this.filter);
+ }
+ flag = true;
+ break;
+
+ case this.keyCode.LEFT:
+ case this.keyCode.RIGHT:
+ flag = true;
+ break;
+
+ default:
+
+ if (isPrintableCharacter(char)) {
+ if (option) {
+ this.setOption(option);
+ }
+ else {
+ this.setValue(this.filter);
+ }
+ }
+ flag = true;
+ break;
+ }
+
+ if (flag) {
+ event.stopPropagation();
+ event.preventDefault();
+ }
+
+};
+
+ComboboxList.prototype.handleClick = function (event) {
+ if (this.listbox.isOpen()) {
+ this.listbox.close(true);
+ }
+ else {
+ this.listbox.open();
+ }
+};
+
+ComboboxList.prototype.handleFocus = function (event) {
+ this.listbox.hasFocus = true;
+};
+
+ComboboxList.prototype.handleBlur = function (event) {
+ this.listbox.hasFocus = false;
+ setTimeout(this.listbox.close.bind(this.listbox, false), 300);
+
+};
+
+ComboboxList.prototype.handleButtonClick = function (event) {
+ if (this.listbox.isOpen()) {
+ this.listbox.close(true);
+ }
+ else {
+ this.listbox.open();
+ }
+};
+
+
+// Initialize comboboxes
+
+window.addEventListener('load', function () {
+
+ var comboboxes = document.querySelectorAll('.combobox-list [role="combobox"]');
+
+ for (var i = 0; i < comboboxes.length; i++) {
+ var combobox = new ComboboxList(comboboxes[i]);
+ combobox.init();
+ }
+
+});
diff --git a/examples/combobox/aria1.0pattern/js/combobox-1.0-listbox.js b/examples/combobox/aria1.0pattern/js/combobox-1.0-listbox.js
new file mode 100644
index 0000000000..4aaead499f
--- /dev/null
+++ b/examples/combobox/aria1.0pattern/js/combobox-1.0-listbox.js
@@ -0,0 +1,200 @@
+/*
+* This content is licensed according to the W3C Software License at
+* https://www.w3.org/Consortium/Legal/2015/copyright-software-and-document
+*
+* File: combobox-1.0.js
+*
+* Desc: Combobox widget that implements ARIA Authoring Practices for
+* ARIA 1.0 definition of combobox using a Listbox
+*
+* Author: Jon Gunderson and Nicholas Hoyt
+*/
+
+/*
+* @constructor ComboboxListbox
+*
+* @desc
+* Wrapper object for a combobox with a listbox option
+*
+* @param domNode
+* The DOM element node that serves as the listbox container. Each
+* child element of domNode that represents a option must have a
+* 'role' attribute with value 'option'.
+*
+*/
+var ComboboxListbox = function (domNode) {
+
+ this.domNode = domNode;
+ this.listbox = false;
+
+ this.hasFocus = false;
+ this.hasHover = false;
+ this.filter = '';
+
+ this.keyCode = Object.freeze({
+ 'BACKSPACE': 8,
+ 'TAB': 9,
+ 'RETURN': 13,
+ 'ESC': 27,
+ 'SPACE': 32,
+ 'PAGEUP': 33,
+ 'PAGEDOWN': 34,
+ 'END': 35,
+ 'HOME': 36,
+ 'LEFT': 37,
+ 'UP': 38,
+ 'RIGHT': 39,
+ 'DOWN': 40
+ });
+};
+
+ComboboxListbox.prototype.init = function () {
+
+ this.domNode.setAttribute('aria-haspopup', 'true');
+
+ this.autocomplete = this.domNode.getAttribute('aria-autocomplete');
+
+ if (this.autocomplete) {
+ this.autocomplete = this.autocomplete.toLowerCase();
+ }
+
+ this.domNode.addEventListener('keydown', this.handleKeydown.bind(this));
+ this.domNode.addEventListener('keyup', this.handleKeyup.bind(this));
+ this.domNode.addEventListener('click', this.handleClick.bind(this));
+ this.domNode.addEventListener('focus', this.handleFocus.bind(this));
+ this.domNode.addEventListener('blur', this.handleBlur.bind(this));
+
+ // initialize pop up menus
+
+ var listbox = document.getElementById(this.domNode.getAttribute('aria-owns'));
+
+ if (listbox) {
+ this.listbox = new Listbox(listbox, this);
+ this.listbox.init();
+ }
+
+ // Open Button
+
+ var button = this.domNode.nextElementSibling;
+
+ if (button && button.tagName === 'BUTTON') {
+ button.addEventListener('click', this.handleButtonClick.bind(this));
+ }
+
+};
+
+ComboboxListbox.prototype.updateValue = function (value) {
+ if (this.domNode.getAttribute('aria-autocomplete') === 'both') {
+ this.domNode.value = value;
+ this.domNode.setSelectionRange(this.filter.length,this.filter.length);
+ }
+};
+
+ComboboxListbox.prototype.setValue = function (value) {
+ this.domNode.value = value;
+};
+
+/* Event Handlers */
+
+ComboboxListbox.prototype.handleKeydown = function (event) {
+ var tgt = event.currentTarget,
+ flag = false,
+ char = event.key,
+ shiftKey = event.shiftKey,
+ ctrlKey = event.ctrlKey,
+ altKey = event.altKey;
+
+ switch (event.keyCode) {
+
+ case this.keyCode.DOWN:
+ if (this.listbox) {
+ this.listbox.filterOptions(this.filter);
+ this.listbox.open();
+ if (!altKey) {
+ this.listbox.setFocusToFirstItem();
+ }
+ }
+ flag = true;
+ break;
+
+ case this.keyCode.UP:
+ if (this.listbox) {
+ this.listbox.filterOptions(this.filter);
+ this.listbox.open();
+ if (!altKey) {
+ this.listbox.setFocusToLastItem();
+ }
+ flag = true;
+ }
+ break;
+
+ case this.keyCode.ESC:
+ this.listbox.close(true);
+ flag = true;
+ break;
+
+ default:
+ break;
+ }
+
+ if (flag) {
+ event.stopPropagation();
+ event.preventDefault();
+ }
+};
+
+ComboboxListbox.prototype.handleKeyup = function (event) {
+ var tgt = event.currentTarget,
+ flag = false,
+ char = event.key;
+
+ if (this.autocomplete !== 'none') {
+ this.filter = this.domNode.value.substring(0,this.domNode.selectionEnd);
+ this.option = this.listbox.filterOptions(this.filter);
+ }
+
+};
+
+ComboboxListbox.prototype.handleClick = function (event) {
+ if (this.domNode.getAttribute('aria-expanded') == 'true') {
+ this.listbox.close(true);
+ }
+ else {
+ this.listbox.open();
+ this.listbox.setFocusToFirstItem();
+ }
+};
+
+ComboboxListbox.prototype.handleFocus = function (event) {
+ this.listbox.hasFocus = true;
+};
+
+ComboboxListbox.prototype.handleBlur = function (event) {
+ this.listbox.hasFocus = false;
+ setTimeout(this.listbox.close.bind(this.listbox, false), 300);
+
+};
+
+ComboboxListbox.prototype.handleButtonClick = function (event) {
+ if (this.domNode.getAttribute('aria-expanded') == 'true') {
+ this.listbox.close(true);
+ }
+ else {
+ this.listbox.open();
+ this.listbox.setFocusToFirstItem();
+ }
+};
+
+
+// Initialize comboboxes
+
+window.addEventListener('load', function () {
+
+ var comboboxes = document.querySelectorAll('.combobox-listbox [role="combobox"]');
+
+ for (var i = 0; i < comboboxes.length; i++) {
+ var combobox = new ComboboxListbox(comboboxes[i]);
+ combobox.init();
+ }
+
+});
diff --git a/examples/combobox/aria1.0pattern/js/combobox-1.0.js b/examples/combobox/aria1.0pattern/js/combobox-1.0.js
deleted file mode 100644
index d82228b0dd..0000000000
--- a/examples/combobox/aria1.0pattern/js/combobox-1.0.js
+++ /dev/null
@@ -1,3 +0,0 @@
-/**
- * Rename this file to the name of the example, e.g., checkbox.js.
- */
diff --git a/examples/combobox/aria1.0pattern/js/listbox.js b/examples/combobox/aria1.0pattern/js/listbox.js
new file mode 100644
index 0000000000..b9313ade69
--- /dev/null
+++ b/examples/combobox/aria1.0pattern/js/listbox.js
@@ -0,0 +1,223 @@
+/*
+* This content is licensed according to the W3C Software License at
+* https://www.w3.org/Consortium/Legal/2015/copyright-software-and-document
+*/
+var Listbox = function (domNode, comboboxObj) {
+ var elementChildren,
+ msgPrefix = 'Listbox constructor argument domNode ';
+
+ // Check whether domNode is a DOM element
+ if (!domNode instanceof Element) {
+ throw new TypeError(msgPrefix + 'is not a DOM Element.');
+ }
+
+ // Check whether domNode has child elements
+ if (domNode.childElementCount === 0) {
+ throw new Error(msgPrefix + 'has no element children.');
+ }
+
+ // Check whether domNode child elements are A elements
+ var childElement = domNode.firstElementChild;
+ while (childElement) {
+ var option = childElement.firstElementChild;
+ childElement = childElement.nextElementSibling;
+ }
+
+ this.domNode = domNode;
+ this.combobox = comboboxObj;
+
+ this.allOptions = [];
+
+ this.options = []; // see PopupMenu init method
+
+ this.firstOption = null; // see PopupMenu init method
+ this.lastOption = null; // see PopupMenu init method
+
+ this.hasFocus = false; // see MenuItem handleFocus, handleBlur
+ this.hasHover = false; // see PopupMenu handleMouseover, handleMouseout
+};
+
+/*
+* @method Listbox.prototype.init
+*
+* @desc
+* Add domNode event listeners for mouseover and mouseout. Traverse
+* domNode children to configure each option and populate.options
+* array. Initialize firstOption and lastOption properties.
+*/
+Listbox.prototype.init = function () {
+ var childElement, optionElement, firstChildElement, option, textContent, numItems;
+
+ // Configure the domNode itself
+ this.domNode.tabIndex = -1;
+
+ this.domNode.setAttribute('role', 'listbox');
+
+ this.domNode.addEventListener('mouseover', this.handleMouseover.bind(this));
+ this.domNode.addEventListener('mouseout', this.handleMouseout.bind(this));
+
+ // Traverse the element children of domNode: configure each with
+ // option role behavior and store reference in.options array.
+ optionElements = this.domNode.getElementsByTagName('LI');
+
+ for (var i = 0; i < optionElements.length; i++) {
+
+ optionElement = optionElements[i];
+
+ if (!optionElement.firstElementChild && optionElement.getAttribute('role') != 'separator') {
+ option = new Option(optionElement, this);
+ option.init();
+ this.allOptions.push(option);
+ }
+ }
+
+ this.filterOptions('');
+
+};
+
+Listbox.prototype.filterOptions = function (filter, currentOption) {
+
+ if (typeof filter !== 'string') {
+ filter = '';
+ }
+
+ var firstMatch = false,
+ i,
+ option,
+ textContent,
+ numItems;
+
+ this.filter = filter;
+ filter = filter.toLowerCase();
+
+ this.options = [];
+ this.firstChars = [];
+ this.domNode.innerHTML = '';
+
+ for (i = 0; i < this.allOptions.length; i++) {
+ option = this.allOptions[i];
+ if (filter.length === 0 || option.textComparision.indexOf(filter) === 0) {
+ this.options.push(option);
+ textContent = option.textContent.trim();
+ this.firstChars.push(textContent.substring(0, 1).toLowerCase());
+ this.domNode.appendChild(option.domNode);
+ }
+ }
+
+ // Use populated.options array to initialize firstOption and lastOption.
+ numItems = this.options.length;
+ if (numItems > 0) {
+ this.firstOption = this.options[0];
+ this.lastOption = this.options[numItems - 1];
+
+ if (currentOption && this.options.indexOf(currentOption) >= 0) {
+ option = currentOption;
+ }
+ else {
+ option = this.firstOption;
+ }
+ }
+ else {
+ this.firstOption = false;
+ option = false;
+ this.lastOption = false;
+ }
+
+ return option;
+};
+
+Listbox.prototype.setFocusStyle = function (option) {
+ this.combobox.domNode.setAttribute('aria-activedescendant', '');
+
+ for (var i = 0; i < this.options.length; i++) {
+ if (this.options[i] === option) {
+ this.combobox.domNode.setAttribute('aria-activedescendant', option.domNode.id);
+ option.domNode.classList.add('focus');
+ this.domNode.scrollTop = option.domNode.offsetTop;
+ }
+ else {
+ this.options[i].domNode.classList.remove('focus');
+ }
+ }
+
+};
+
+Listbox.prototype.setOption = function (option) {
+ this.combobox.setOption(option);
+ this.combobox.setValue(option.textContent);
+ this.close();
+};
+
+/* EVENT HANDLERS */
+
+Listbox.prototype.handleMouseover = function (event) {
+ this.hasHover = true;
+};
+
+Listbox.prototype.handleMouseout = function (event) {
+ this.hasHover = false;
+ setTimeout(this.close.bind(this, false), 300);
+};
+
+/* FOCUS MANAGEMENT METHODS */
+
+
+Listbox.prototype.getFirstItem = function () {
+ return this.firstOption;
+};
+
+Listbox.prototype.getLastItem = function () {
+ return this.lastOption;
+};
+
+Listbox.prototype.getPreviousItem = function (currentOption) {
+ var index;
+
+ if (currentOption !== this.firstOption) {
+ index = this.options.indexOf(currentOption);
+ return this.options[index - 1];
+ }
+ return currentOption;
+};
+
+Listbox.prototype.getNextItem = function (currentOption) {
+ var index;
+
+ if (currentOption !== this.lastOption) {
+ index = this.options.indexOf(currentOption);
+ return this.options[index + 1];
+ }
+ return currentOption;
+};
+
+/* MENU DISPLAY METHODS */
+
+Listbox.prototype.isOpen = function () {
+ return this.domNode.style.display === 'block';
+};
+
+Listbox.prototype.hasOptions = function () {
+ return this.options.length;
+};
+
+Listbox.prototype.open = function () {
+ // set CSS properties
+ this.domNode.style.display = 'block';
+
+ // set aria-expanded attribute
+ this.combobox.domNode.setAttribute('aria-expanded', 'true');
+};
+
+Listbox.prototype.close = function (force) {
+ if (typeof force !== 'boolean') {
+ force = false;
+ }
+
+ if (force || (!this.hasFocus && !this.hasHover && !this.combobox.hasHover)) {
+ this.domNode.style.display = 'none';
+ this.combobox.domNode.setAttribute('aria-expanded', 'false');
+ this.combobox.domNode.setAttribute('aria-activedescendant', '');
+ }
+};
+
+
diff --git a/examples/combobox/aria1.0pattern/js/listboxOption.js b/examples/combobox/aria1.0pattern/js/listboxOption.js
new file mode 100644
index 0000000000..787c8fe54a
--- /dev/null
+++ b/examples/combobox/aria1.0pattern/js/listboxOption.js
@@ -0,0 +1,42 @@
+/*
+* This content is licensed according to the W3C Software License at
+* https://www.w3.org/Consortium/Legal/2015/copyright-software-and-document
+*/
+var Option = function (domNode, listboxObj) {
+
+ this.domNode = domNode;
+ this.listbox = listboxObj;
+ this.textContent = domNode.textContent;
+ this.textComparision = domNode.textContent.toLowerCase();
+
+};
+
+Option.prototype.init = function () {
+
+ if (!this.domNode.getAttribute('role')) {
+ this.domNode.setAttribute('role', 'option');
+ }
+
+ this.domNode.addEventListener('click', this.handleClick.bind(this));
+ this.domNode.addEventListener('mouseover', this.handleMouseover.bind(this));
+ this.domNode.addEventListener('mouseout', this.handleMouseout.bind(this));
+
+};
+
+/* EVENT HANDLERS */
+
+Option.prototype.handleClick = function (event) {
+ this.listbox.setOption(this);
+ this.listbox.close(true);
+};
+
+Option.prototype.handleMouseover = function (event) {
+ this.listbox.hasHover = true;
+ this.listbox.open();
+
+};
+
+Option.prototype.handleMouseout = function (event) {
+ this.listbox.hasHover = false;
+ setTimeout(this.listbox.close.bind(this.listbox, false), 300);
+};
diff --git a/examples/combobox/aria1.1pattern/grid-combo.html b/examples/combobox/aria1.1pattern/grid-combo.html
index 489a8ce42c..43afcd985c 100644
--- a/examples/combobox/aria1.1pattern/grid-combo.html
+++ b/examples/combobox/aria1.1pattern/grid-combo.html
@@ -19,405 +19,412 @@
-
ARIA 1.1 Combobox with Grid Popup Example
-
- NOTE: Please provide feedback on this example in
- issue 500.
-
-
- The following example combobox implements the
- combobox design pattern
- using a grid for the suggested values popup.
-
-
- In this example, users can specify the name of a fruit or vegetable by either typing a value in the box or choosing from the set of values presented in a grid popup.
- The popup becomes available after the textbox contains a character that matches the beginning of the name of one of the items in the set of value suggestions.
- Users may type any value in the textbox; this implementation does not limit input to values that are in the set of value suggestions.
-
-
- The grid that presents suggested values has two columns.
- Each row of the grid represents one suggestion; column one contains the name of the fruit or vegetable and column two identifies whether it is a fruit or vegetable.
-
- The example combobox on this page implements the following keyboard interface.
- Other variations and options for the keyboard interface are described in the
- Keyboard Interaction section of the combobox design pattern.
+ NOTE: Please provide feedback on this example in
+ issue 500.
-
Textbox
-
-
-
-
Key
-
Function
-
-
-
-
-
Down Arrow
-
If the grid is displayed, moves focus to the first suggested value.
-
-
-
Up Arrow
-
If the grid is displayed, moves focus to the last suggested value.
-
-
-
Escape
-
-
-
Clears the textbox
-
If the grid is displayed, closes it.
-
-
-
-
-
Standard single line text editing keys
-
-
-
Keys used for cursor movement and text manipulation, such as Delete and Shift + Right Arrow.
-
An HTML input with type=text is used for the textbox so the browser will provide platform-specific editing keys.
-
-
-
-
-
-
Grid Popup
-
-
-
-
Key
-
Function
-
-
-
-
-
Enter
-
-
-
Sets the textbox value to the content of the first cell in the row containing focus.
-
Closes the grid popup.
-
Sets focus on the textbox.
-
-
-
-
-
Escape
-
-
-
Closes the grid popup.
-
Sets focus on the textbox.
-
Clears the textbox.
-
-
-
-
-
Down Arrow
-
-
-
Moves focus to the next row.
-
If focus is in the last row, moves focus to the first row.
-
Note: This wrapping behavior is useful when Home and End move the editing cursor as described below.
-
-
-
-
-
Up Arrow
-
-
-
Moves focus to the previous row.
-
If focus is in the first row, moves focus to the last row.
-
Note: This wrapping behavior is useful when Home and End move the editing cursor as described below.
-
-
-
-
-
Right Arrow
-
-
-
Moves focus to the next cell.
-
If focus is in the last cell in a row, moves focus to the first cell in the next row.
-
If focus is in the last cell in the last row, moves focus to the first cell in the first row.
-
-
-
-
-
Left Arrow
-
-
-
Moves focus to the previous cell.
-
If focus is in the first cell in a row, moves focus to the last cell in the previous row.
-
If focus is in the first cell in the first row, moves focus to the last cell in the last row.
-
-
-
-
-
Home
-
Moves focus to the textbox and places the editing cursor at the beginning of the field.
-
-
-
End
-
Moves focus to the textbox and places the editing cursor at the end of the field.
-
-
-
Printable Characters
-
-
-
Moves focus to the textbox.
-
Types the character in the textbox.
-
-
-
-
-
-
-
-
-
Role, Property, State, and Tabindex Attributes
- The example comboboxes on this page implement the following ARIA roles, states, and properties.
- Information about other ways of applying ARIA roles, states, and properties is available in the
- Roles, States, and Properties section of the combobox design pattern.
+ The following example combobox implements the
+ combobox design pattern
+ using a grid for the suggested values popup.
-
Combobox Container
-
-
-
-
Role
-
Attribute
-
Element
-
Usage
-
-
-
-
-
- combobox
-
-
-
div
-
-
-
Identifies the element as a combobox.
-
Note: The primary difference between the ARIA 1.0 pattern and the ARIA 1.1 pattern is the placement of the combobox role.
-
-
-
-
-
-
- aria-haspopup=grid
-
-
div
-
Indicates that the combobox can popup a grid to suggest values.
-
-
-
-
- aria-owns=IDREF
-
-
div
-
Identifies the element that serves as the grid popup.
-
-
-
-
- aria-expanded=false
-
-
div
-
Indicates that the popup element is not displayed.
-
-
-
-
- aria-expanded=true
-
-
div
-
Indicates that the popup element is displayed.
-
-
-
-
Textbox
-
-
-
-
Role
-
Attribute
-
Element
-
Usage
-
-
-
-
-
-
- aria-labelledby=IDREF
-
-
input[type="text"]
-
Provides a label for the textbox element of the combobox.
-
-
-
-
- aria-autocomplete=list
-
-
input[type="text"]
-
Indicates that the autocomplete behavior of the text input is to suggest a list of possible values in a popup.
-
-
-
-
- aria-controls=IDREF
-
-
input[type="text"]
-
-
-
Identifies the popup element that lists suggested values.
-
Note: In the ARIA 1.0 combobox pattern, the textbox uses aria-owns instead of aria-controls.
-
-
-
-
-
-
- aria-activedescendant=IDREF
-
-
input[type="text"]
-
-
-
When a cell in the grid is visually indicated as having keyboard focus, refers to that cell.
-
When navigation keys, such as Down Arrow, are pressed, the JavaScript changes the value.
-
Enables assistive technologies to know which element the application regards as focused while DOM focus remains on the input element.
Provides a label for the grid element of the combobox.
-
-
-
- row
-
-
-
div
-
Identifies the element containing all the cells for a row.
-
-
-
-
- aria-selected=true
-
-
div
-
-
-
Specified on a row in the grid when it is visually indicated as selected.
-
Occurs only when a cell in the grid is referenced by aria-activedescendant.
-
-
-
-
-
gridcell
-
-
div
-
Identifies the element containing the content for a single cell.
-
-
-
-
-
-
-
Javascript and CSS Source Code
+
+ In this example, users can specify the name of a fruit or vegetable by either typing a value in the box or choosing from the set of values presented in a grid popup.
+ The popup becomes available after the textbox contains a character that matches the beginning of the name of one of the items in the set of value suggestions.
+ Users may type any value in the textbox; this implementation does not limit input to values that are in the set of value suggestions.
+
+
+ The grid that presents suggested values has two columns.
+ Each row of the grid represents one suggestion; column one contains the name of the fruit or vegetable and column two identifies whether it is a fruit or vegetable.
+
ARIA 1.0 Combobox with List Autocomplete: A combobox that demonstrates the autocomplete behavior known as list with manual selection and uses the ARIA 1.0 implementation pattern.
+
ARIA 1.0 Combobox Without Autocomplete: A combo box that demonstrates the behavior associated with aria-autocomplete=none and uses the ARIA 1.0 implementation pattern.
If the grid is displayed, moves focus to the first suggested value.
+
+
+
Up Arrow
+
If the grid is displayed, moves focus to the last suggested value.
+
+
+
Escape
+
+
+
Clears the textbox
+
If the grid is displayed, closes it.
+
+
+
+
+
Standard single line text editing keys
+
+
+
Keys used for cursor movement and text manipulation, such as Delete and Shift + Right Arrow.
+
An HTML input with type=text is used for the textbox so the browser will provide platform-specific editing keys.
+
+
+
+
+
+
Grid Popup
+
+ NOTE: When visual focus is in the grid, DOM focus remains on the textbox and the value of aria-activedescendant on the textbox is set to a value that refers to an element in the grid that is visually indicated as focused.
+ Where the following descriptions of keyboard commands mention focus, they are referring to the visual focus indicator.
+ For more information about this focus management technique, see
+ Using aria-activedescendant to Manage Focus.
+
+
+
+
+
Key
+
Function
+
+
+
+
+
Enter
+
+
+
Sets the textbox value to the content of the first cell in the row containing focus.
+
Closes the grid popup.
+
Sets focus on the textbox.
+
+
+
+
+
Escape
+
+
+
Closes the grid popup.
+
Sets focus on the textbox.
+
Clears the textbox.
+
+
+
+
+
Down Arrow
+
+
+
Moves focus to the next row.
+
If focus is in the last row, moves focus to the first row.
+
Note: This wrapping behavior is useful when Home and End move the editing cursor as described below.
+
+
+
+
+
Up Arrow
+
+
+
Moves focus to the previous row.
+
If focus is in the first row, moves focus to the last row.
+
Note: This wrapping behavior is useful when Home and End move the editing cursor as described below.
+
+
+
+
+
Right Arrow
+
+
+
Moves focus to the next cell.
+
If focus is in the last cell in a row, moves focus to the first cell in the next row.
+
If focus is in the last cell in the last row, moves focus to the first cell in the first row.
+
+
+
+
+
Left Arrow
+
+
+
Moves focus to the previous cell.
+
If focus is in the first cell in a row, moves focus to the last cell in the previous row.
+
If focus is in the first cell in the first row, moves focus to the last cell in the last row.
+
+
+
+
+
Home
+
Moves focus to the textbox and places the editing cursor at the beginning of the field.
+
+
+
End
+
Moves focus to the textbox and places the editing cursor at the end of the field.