+ Select-Only Combobox : A single-select combobox with no text input that is functionally similar to an HTML select element.Editable Combobox with Both List and Inline Autocomplete : An editable combobox that demonstrates the autocomplete behavior known as list with inline autocomplete .Editable Combobox Without Autocomplete : An editable combobox that demonstrates the behavior associated with aria-autocomplete=none.Editable Combobox with Grid Popup : An editable combobox that presents suggestions in a grid, enabling users to navigate descriptive information about each suggestion.Editable Combobox without Autocomplete Example
Similar examples include:
+ Select-Only Combobox : A single-select combobox with no text input that is functionally similar to an HTML select element.Editable Combobox with Both List and Inline Autocomplete : An editable combobox that demonstrates the autocomplete behavior known as list with inline autocomplete .Editable Combobox with List Autocomplete : An editable combobox that demonstrates the autocomplete behavior known as list with manual selection .Editable Combobox with Grid Popup : An editable combobox that presents suggestions in a grid, enabling users to navigate descriptive information about each suggestion.Select-Only Combobox Example | WAI-ARIA Authoring Practices 1.2
+
+
+
+
+
+
+ Select-Only Combobox Example
+
+ The following example implementation of the ARIA design pattern for combobox
+ demonstrates a single-select combobox widget that is functionally similar to an HTML select element.
+ Unlike the editable combobox examples, this select-only combobox is not made with an <input> element, and it does not accept freeform user input.
+ However, like an HTML <select>, users can type characters to select matching options.
+
+ Similar examples include:
+
+
+
+
+
+ Keyboard Support
+
+ 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.
+
+ Closed Combobox
+
+
+
+ Key
+ Function
+
+
+
+
+ Down Arrow
+
+ Opens the listbox if it is not already displayed without moving focus or changing selection.
+ DOM focus remains on the combobox.
+
+
+
+
+ Alt + Down Arrow
+ Opens the listbox without moving focus or changing selection.
+
+
+
+ Up Arrow
+
+ First opens the listbox if it is not already displayed and then moves visual focus to the first option.
+ DOM focus remains on the combobox.
+
+
+
+
+ Enter
+ Opens the listbox without moving focus or changing selection.
+
+
+
+ Space
+ Opens the listbox without moving focus or changing selection.
+
+
+
+ Home
+ Opens the listbox and moves visual focus to the first option.
+
+
+
+ End
+ Opens the listbox and moves visual focus to the last option.
+
+
+
+ Printable Characters
+
+
+ First opens the listbox if it is not already displayed and then moves visual focus to the first option that matches the typed character.
+ If multiple keys are typed in quick succession, visual focus moves to the first option that matches the full string.
+ If the same character is typed in succession, visual focus cycles among the options starting with that character
+
+
+
+
+
+ Listbox Popup
+
+ NOTE: When visual focus is in the listbox, DOM focus remains on the combobox and the value of aria-activedescendant on the combobox 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 value to the content of the focused option in the listbox.
+ Closes the listbox.
+ Sets visual focus on the combobox.
+
+
+
+
+ Space
+
+ Sets the value to the content of the focused option in the listbox.
+ Closes the listbox.
+ Sets visual focus on the combobox.
+
+
+
+
+ Tab
+
+ Sets the value to the content of the focused option in the listbox.
+ Closes the listbox.
+ Performs the default action, moving focus to the next focusable element.
+ Note: the native <select> element closes the listbox but does not move focus on tab.
+ This pattern matches the behavior of the other comboboxes rather than the native element in this case.
+
+
+
+
+ Escape
+
+ Closes the listbox.
+ Sets visual focus on the combobox.
+
+
+
+
+ Down Arrow
+
+ Moves visual focus to the next option.
+ If visual focus is on the last option, visual focus does not move.
+
+
+
+
+ Up Arrow
+
+ Moves visual focus to the previous option.
+ If visual focus is on the first option, visual focus does not move.
+
+
+
+
+ Alt + Up Arrow
+
+ Sets the value to the content of the focused option in the listbox.
+ Closes the listbox.
+ Sets visual focus on the combobox.
+
+
+
+
+ Home Moves visual focus to the first option.
+
+
+ End Moves visual focus to the last option.
+
+
+ PageUp Jumps visual focus up 10 options (or to first option).
+
+
+ PageDown Jumps visual focus down 10 options (or to last option).
+
+
+ Printable Characters
+
+
+ First opens the listbox if it is not already displayed and then moves visual focus to the first option that matches the typed character.
+ If multiple keys are typed in quick succession, visual focus moves to the first option that matches the full string.
+ If the same character is typed in succession, visual focus cycles among the options starting with that character
+
+
+
+
+
+
+
+
+ Role, Property, State, and Tabindex Attributes
+
+ The example combobox on this page implements 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.
+
+ Combobox
+
+
+
+ Role
+ Attribute
+ Element
+ Usage
+
+
+
+
+
+ combobox
+
+ divIdentifies the input as a combobox.
+
+
+
+ aria-labelledby="#IDREF"
+
+ divIdentifies the element that labels the combobox.
+
+
+
+ aria-controls="#IDREF"
+
+ divIdentifies the element that serves as the popup.
+
+
+
+ aria-expanded="false"
+
+ divIndicates that the popup element is not displayed.
+
+
+
+ aria-expanded="true"
+
+ divIndicates that the popup element is displayed.
+
+
+
+ aria-activedescendant="IDREF"
+
+ div
+
+ 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.
+
+ For more information about this focus management technique, see
+ Using aria-activedescendant to Manage Focus.
+
+
+
+
+
+
+ Listbox Popup
+
+
+
+ Role
+ Attribute
+ Element
+ Usage
+
+
+
+
+
+ listbox
+
+
+ div
+
+ Identifies the element as a listbox.
+
+
+
+ option
+
+ div
+
+ Identifies the element as a listbox option.
+ 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 only when an option in the list is referenced by aria-activedescendant.
+
+
+
+
+
+
+
+
+ Javascript and CSS Source Code
+
+
+
+
+ HTML Source Code
+
+
+
+
+
+
+ Combobox Design Pattern in WAI-ARIA Authoring Practices 1.2
+
+
+
diff --git a/examples/combobox/css/select-only.css b/examples/combobox/css/select-only.css
new file mode 100644
index 0000000000..6eeaf22e7a
--- /dev/null
+++ b/examples/combobox/css/select-only.css
@@ -0,0 +1,103 @@
+.combo *,
+.combo *::before,
+.combo *::after {
+ box-sizing: border-box;
+}
+
+.combo {
+ display: block;
+ margin-bottom: 1.5em;
+ max-width: 400px;
+ position: relative;
+}
+
+.combo::after {
+ border-bottom: 2px solid rgba(0, 0, 0, 0.75);
+ border-right: 2px solid rgba(0, 0, 0, 0.75);
+ content: '';
+ display: block;
+ height: 12px;
+ pointer-events: none;
+ position: absolute;
+ right: 16px;
+ top: 50%;
+ transform: translate(0, -65%) rotate(45deg);
+ width: 12px;
+}
+
+.combo-input {
+ background-color: #f5f5f5;
+ border: 2px solid rgba(0, 0, 0, 0.75);
+ border-radius: 4px;
+ display: block;
+ font-size: 1em;
+ min-height: calc(1.4em + 26px);
+ padding: 12px 16px 14px;
+ text-align: left;
+ width: 100%;
+}
+
+.open .combo-input {
+ border-radius: 4px 4px 0 0;
+}
+
+.combo-input:focus {
+ border-color: #0067b8;
+ box-shadow: 0 0 4px 2px #0067b8;
+ outline: 4px solid transparent;
+}
+
+.combo-label {
+ display: block;
+ font-size: 20px;
+ font-weight: 100;
+ margin-bottom: 0.25em;
+}
+
+.combo-menu {
+ background-color: #f5f5f5;
+ border: 1px solid rgba(0, 0, 0, 0.75);
+ border-radius: 0 0 4px 4px;
+ display: none;
+ max-height: 300px;
+ overflow-y:scroll;
+ left: 0;
+ position: absolute;
+ top: 100%;
+ width: 100%;
+ z-index: 100;
+}
+
+.open .combo-menu {
+ display: block;
+}
+
+.combo-option {
+ padding: 10px 12px 12px;
+}
+
+.combo-option:hover {
+ background-color: rgba(0, 0, 0, 0.1);
+}
+
+.combo-option.option-current {
+ outline: 3px solid #0067b8;
+ outline-offset: -3px;
+}
+
+.combo-option[aria-selected="true"] {
+ padding-right: 30px;
+ position: relative;
+}
+
+.combo-option[aria-selected="true"]::after {
+ border-bottom: 2px solid #000;
+ border-right: 2px solid #000;
+ content: '';
+ height: 16px;
+ position: absolute;
+ right: 15px;
+ top: 50%;
+ transform: translate(0, -50%) rotate(45deg);
+ width: 8px;
+}
\ No newline at end of file
diff --git a/examples/combobox/grid-combo.html b/examples/combobox/grid-combo.html
index 140def9c9e..215a0d7fd6 100644
--- a/examples/combobox/grid-combo.html
+++ b/examples/combobox/grid-combo.html
@@ -44,6 +44,7 @@ Editable Combobox with Grid Popup Example
Similar examples include:
+ Select-Only Combobox : A single-select combobox with no text input that is functionally similar to an HTML select element.Editable Combobox with Both List and Inline Autocomplete : An editable combobox that demonstrates the autocomplete behavior known as list with inline autocomplete .Editable Combobox with List Autocomplete : An editable combobox that demonstrates the autocomplete behavior known as list with manual selection .Editable Combobox Without Autocomplete : An editable combobox that demonstrates the behavior associated with aria-autocomplete=none.Examples by Role
Editable Combobox With Both List and Inline Autocomplete Editable Combobox With List Autocomplete Editable Combobox without Autocomplete Select-Only Combobox Editable Combobox with Grid Popup
@@ -148,6 +149,7 @@ Examples by Role
Editable Combobox With Both List and Inline Autocomplete Editable Combobox With List Autocomplete Editable Combobox without Autocomplete Select-Only Combobox Collapsible Dropdown Listbox Listbox with Grouped Options Listboxes with Rearrangeable Options Examples by Role
Editable Combobox With Both List and Inline Autocomplete Editable Combobox With List Autocomplete Editable Combobox without Autocomplete Select-Only Combobox
@@ -298,6 +301,7 @@ Examples by Role
tab
@@ -311,6 +315,7 @@ Examples by Role
tablist
@@ -320,6 +325,7 @@ Examples by Role
tabpanel
@@ -374,6 +380,7 @@ Examples By Properties and States
Editable Combobox With Both List and Inline Autocomplete Editable Combobox With List Autocomplete Editable Combobox without Autocomplete Select-Only Combobox Editable Combobox with Grid Popup Collapsible Dropdown Listbox Listbox with Grouped Options Examples By Properties and States
Accordion Auto-Rotating Image Carousel with a Tablist Checkbox (Mixed-State) Editable Combobox With Both List and Inline Autocomplete Editable Combobox With List Autocomplete Editable Combobox without Autocomplete Select-Only Combobox Editable Combobox with Grid Popup Disclosure (Show/Hide) for Answers to Frequently Asked Questions Disclosure (Show/Hide) for Image Description Examples By Properties and States
Editable Combobox With Both List and Inline Autocomplete Editable Combobox With List Autocomplete Editable Combobox without Autocomplete Select-Only Combobox Editable Combobox with Grid Popup Disclosure (Show/Hide) for Answers to Frequently Asked Questions Disclosure (Show/Hide) for Image Description Examples By Properties and States
@@ -654,7 +666,12 @@ Examples By Properties and States
aria-roledescriptionAuto-Rotating Image Carousel
+
+
aria-rowcountExamples By Properties and States
aria-selected
+ Auto-Rotating Image Carousel with a Tablist Editable Combobox With Both List and Inline Autocomplete Editable Combobox With List Autocomplete Editable Combobox without Autocomplete