Combobox role now works with button element (mdn#38535)

* update ARIA combobox role documentation

* Update files/en-us/web/accessibility/aria/reference/roles/combobox_role/index.md

Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>

* Update files/en-us/web/accessibility/aria/reference/roles/combobox_role/index.md

Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>

* fix: formatting, restoring author edit

* Apply suggestions from code review

---------

Co-authored-by: Brian Smith <brian@smith.berlin>
Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>

Author: 3 people

files/en-us/web/accessibility/aria/reference/roles/combobox_role/index.md

@@ -9,17 +9,17 @@ spec-urls:
 sidebar: accessibilitysidebar
 ---
 
-The `combobox` role identifies an element as an `input` that controls another element, such as a `listbox` or `grid`, that can dynamically pop up to help the user set the value of that `input`.
+The `combobox` role identifies an element as either an `input` or a `button` that controls another element, such as a `listbox` or `grid`, that can dynamically pop up to help the user set the value. A combobox can be either editable (allowing text input) or select-only (only allowing selection from the popup).
 
 ## Description
 
 A `combobox` is a composite widget that combines a named input field with a popup providing possible values for that input field. The purpose of this widget is to improve user experience by helping the user select a value without having to type in the complete value and, optionally depending whether supported values are limited, preventing the user from entering invalid or otherwise unsupported values.
 
-The `combobox` role is set on input that controls another element, such as a listbox or grid, that can dynamically pop up to help the user set the value of the input.
+The `combobox` role can be set on either an input element for editable comboboxes, or a button element for select-only comboboxes. This element controls another element, such as a listbox or grid, that can dynamically pop up to help the user set a value.
 
-The `combobox` input field can either be a single-line text field that supports editing and typing, similar to a HTML {{HTMLElement('input')}} with a {{HTMLElement('datalist')}}, or an element that only displays the current value of the combobox.
+The element with the `combobox` role can be either an editable single-line text field (using an {{HTMLElement('input')}} element, similar to one with a {{HTMLElement('datalist')}}), or a select-only element (using a `button` element) that only displays the current value without allowing direct text input.
 
-A WAI-ARIA combobox only has one attribute that is required that authors specify: [`aria-expanded`](/en-US/docs/Web/Accessibility/ARIA/Reference/Attributes/aria-expanded). However, it also has several other attributes which will be necessary to specify, depending on the combobox's implementation. These include [`aria-haspopup`](/en-US/docs/Web/Accessibility/ARIA/Reference/Attributes/aria-haspopup), [`aria-controls`](/en-US/docs/Web/Accessibility/ARIA/Reference/Attributes/aria-controls), [`aria-activedescendant`](/en-US/docs/Web/Accessibility/ARIA/Reference/Attributes/aria-activedescendant), and [`aria-autocomplete`](/en-US/docs/Web/Accessibility/ARIA/Reference/Attributes/aria-autocomplete).
+A WAI-ARIA combobox requires only one attribute: [`aria-expanded`](/en-US/docs/Web/Accessibility/ARIA/Reference/Attributes/aria-expanded). However, several other attributes are typically necessary depending on the implementation: [`aria-haspopup`](/en-US/docs/Web/Accessibility/ARIA/Reference/Attributes/aria-haspopup), [`aria-controls`](/en-US/docs/Web/Accessibility/ARIA/Reference/Attributes/aria-controls), [`aria-activedescendant`](/en-US/docs/Web/Accessibility/ARIA/Reference/Attributes/aria-activedescendant), and [`aria-autocomplete`](/en-US/docs/Web/Accessibility/ARIA/Reference/Attributes/aria-autocomplete).
 
 Typically, the initial state of a combobox is collapsed, with `aria-expanded="false"` set. In the collapsed state, only the combobox element and, optionally a sibling button to invoke the popup, are visible. The [`aria-expanded`](/en-US/docs/Web/Accessibility/ARIA/Reference/Attributes/aria-expanded), with the value set to `false`, is required when collapsed, because it indicates to assistive technologies that the widget is expandable.
 
@@ -33,15 +33,22 @@ When a combobox's popup is displayed, ensure the [`aria-controls`](/en-US/docs/W
 
 If the combobox UI includes a visible control, such as an icon, that allows the visibility of the popup to be controlled via pointer and touch events, that control should be a {{HTMLElement('button')}}, {{HTMLElement('input')}} of type `button`, or a [`button`](/en-US/docs/Web/Accessibility/ARIA/Reference/Roles/button_role) role element with a [`tabindex`](/en-US/docs/Web/HTML/Reference/Global_attributes/tabindex) of `-1`. Doing so will allow the button to be focusable but not included in keyboard tab sequence. It must not be a descendant of the element with role `combobox`.
 
-To be keyboard accessible, keyboard support for moving focus between the `combobox` input field element and elements contained in the popup `listbox`, `tree`, `grid`, or `dialog`, must be programmed in. One common convention is that <kbd>Down Arrow</kbd> moves focus from the input to the first focusable descendant of the popup element.
+To be keyboard accessible, keyboard support for moving focus between the `combobox` element and elements contained in the popup `listbox`, `tree`, `grid`, or `dialog`, must be programmed in. One common convention is that <kbd>Down Arrow</kbd> moves focus from the input to the first focusable descendant of the popup element.
 
 The [`aria-activedescendant`](/en-US/docs/Web/Accessibility/ARIA/Reference/Attributes/aria-activedescendant) property can be used to identify the currently active element of the combobox popup, for instance an `option` within a popup `listbox`, for implementations where DOM focus remains on the combobox. If DOM focus does not remain on the combobox when its popup is invoked, but rather DOM focus moves into the popup, such as a dialog, then `aria-activedescendant` may not be necessary.
 
-If the combobox element is an {{HTMLElement('input')}} element, the value of the combobox is the input's value. Otherwise, the value of the combobox comes from its descendant elements.
+If the combobox is implemented as an editable {{HTMLElement('input')}} element, the value of the combobox is the input's value. For select-only comboboxes implemented with a `button` element, the value comes from the selected option in the popup.
 
-If the `combobox` supports text input and provides autocompletion behavior, set [`aria-autocomplete`](/en-US/docs/Web/Accessibility/ARIA/Reference/Attributes/aria-autocomplete) on the combobox element to the value that corresponds to the provided behavior: `inline`, `list`, or `both`. The `aria-autocomplete` attribute indicates that inputting text will trigger display of one or more predictions of the user's intended value for the combobox and specifies how the predictions will be presented when made.
+The [`aria-autocomplete`](/en-US/docs/Web/Accessibility/ARIA/Reference/Attributes/aria-autocomplete) attribute is only applicable for editable comboboxes that support text input. For these comboboxes, set the attribute to a value that corresponds to the provided behavior: `inline`, `list`, or `both`. The attribute indicates that inputting text will trigger display of one or more predictions of the user's intended value and specifies how these predictions will be presented. For select-only comboboxes using a `button` element, `aria-autocomplete` should not be used since no text input is possible.
 
-Every `combobox` must have an accessible name. If using an {{HTMLElement('input')}} element, the accessible name should come from the associated {{HTMLElement('label')}}. If not, if an appropriate label is visible in the content, provide the name via [`aria-labelledby`](/en-US/docs/Web/Accessibility/ARIA/Reference/Attributes/aria-labelledby). In other words, if there is an element in the user interface that serves as a label for the `combobox` input field, include `aria-labelledby` as an attribute on the element with the role of `combobox`, and set the value of the attribute to the `id` of the labelling element or elements. If no visible label is present, use [`aria-label`](/en-US/docs/Web/Accessibility/ARIA/Reference/Attributes/aria-label) instead. Not both.
+Every `combobox` must have an accessible name, which can be provided in one of three ways:
+
+1. For an {{HTMLElement('input')}} element, use an associated {{HTMLElement('label')}}.
+2. If a visible label exists in the UI, use [`aria-labelledby`](/en-US/docs/Web/Accessibility/ARIA/Reference/Attributes/aria-labelledby) referencing the label element's `id`.
+3. If no visible label is present, use [`aria-label`](/en-US/docs/Web/Accessibility/ARIA/Reference/Attributes/aria-label).
+
+> [!NOTE]
+> Use only one of these methods; do not combine them.
 
 ### Associated WAI-ARIA roles, states, and properties
 
@@ -53,19 +60,39 @@ Every `combobox` must have an accessible name. If using an {{HTMLElement('input'
 ### Keyboard interactions
 
 - <kbd>Down Arrow</kbd>
-  - : Moves focus to the next option, or to the first option if none was selected.
+  - : Opens the popup if closed and moves focus to the next option, or to the first option if none was selected.
 
 - <kbd>Alt</kbd> + <kbd>Down Arrow</kbd> (Optional)
   - : If the popup is available but not displayed, displays the popup without moving focus.
 
 - <kbd>Up Arrow</kbd>
-  - : Moves focus to the previous option. Moving focus to the first option if focus was originally on the last option.
+  - : Opens the popup if closed and moves focus to the previous option, or to the last option if none was selected.
 
 - <kbd>Alt</kbd> + <kbd>Up Arrow</kbd> (Optional)
   - : If the popup has focus, returns focus to the combobox, otherwise it closes the popup.
 
+- <kbd>Escape</kbd>
+  - : Closes the popup if open. If the popup is already closed, clears the combobox value for editable comboboxes.
+
+#### Editable combobox keyboard interactions
+
 - <kbd>Enter</kbd>
-  - : If the combobox is editable and an autocomplete suggestion is selected in the popup, accepts the suggestion either by placing the input cursor at the end of the accepted value in the combobox or by performing a default action on the value. For example, in a messaging application, the default action may be to add the accepted value to a list of message recipients and then clear the combobox so the user can add another recipient.
+  - : If an autocomplete suggestion is selected in the popup, accepts the suggestion by updating the combobox value and placing the input cursor at the end.
+    May also trigger a default action (e.g., in a messaging application, adding the accepted value to a list of recipients).
+
+- <kbd>Tab</kbd>
+  - : Accepts the current value and moves focus to the next focusable element.
+
+#### Select-only combobox keyboard interactions
+
+- <kbd>Enter</kbd> or <kbd>Space</kbd>
+  - : When the popup is closed, opens the popup. When the popup is open and an option is selected, accepts the selected option as the combobox value and closes the popup.
+
+- <kbd>Tab</kbd>
+  - : Accepts the current selection and moves focus to the next focusable element.
+
+- <kbd>Home</kbd> or <kbd>End</kbd>
+  - : When the popup is open, moves focus to the first or last option respectively.
 
 ## Examples