Issue Summary

The "Model Year" multiselect combobox is not programmatically defined.

Steps to Reproduce

1. Open the Help Center page of the JSM DC instance.
2. Navigate to the "Portals" section in the main content area and activate the "A11y Test" control.
3. Navigate to the main content area and activate the "Apple Investigation" > "VO Test" control.
4. Using VoiceOver screen reader, navigate to the mentioned combobox and activate it with Control + Option + Space.
5. Use the Up/Down Arrow keys to navigate through the options, and select multiple options with Control + Option + Space.
6. Observe that the combobox is not programmatically defined, meaning it is not announced or interacted with properly by VoiceOver.

Screenshot

Screen Recording

Actual Results

When screen reader users navigate through the "Model Year" multiselect combobox, they find that it is not programmatically defined, making it difficult to interact with. The combobox is implemented using a standard <input> element, which lacks the necessary ARIA roles and attributes (e.g., role="combobox", aria-expanded, aria-controls, aria-multiselectable, etc.).

As a result, the input is read as a generic form field, and users cannot navigate through options or understand that it functions as a combobox. This lack of proper definition renders the combobox inaccessible and causes confusion for screen reader users.

Expected Results

Ensure that the multiselect combobox is programmatically defined so that screen reader users can navigate and interact with it correctly.
In this case, you can either use the <select> and <option> elements, or apply the appropriate ARIA roles and attributes to make it accessible.

Native HTML Approach:

• Replace the <input> element with a <select> element.
• Add the multiple attribute to the <select> element to allow multiple selections.
• Specify the options using the <option> element.

ARIA Approach:

• Set role="combobox" on the <input> element.
• Add the aria-haspopup="listbox" attribute to the <input> element.
• Add the aria-expanded, aria-controls, and aria-activedescendant attributes to the <input> element.
• Ensure that the value of the aria-expanded: Set to "false" initially, and change to "true" when the options appear.
• Set role="listbox" on the <div> or <ul> element.
• Add the aria-multiselectable="true" attribute to the <div> or <ul> element.
• Set role="option" on each <div> (or <li>) element that represents an option.

Refer to the following links for guidance on creating an accessible multiselect combobox:

• Dhiwise: Multiselect Dropdown HTML – Selecting Multiple Options
• Telerik: Multiselect Accessibility
• Accessible Culture: ARIA Combobox

Code Snippet:

<label for="model-year">Model Year</label>
<select id="model-year" name="model-year" multiple>
  <option value="2010">2010</option>
  <option value="2011">2011</option>
  <option value="2012">2012</option>
  <option value="2013">2013</option>
......
</select>

Workaround

Currently there is no known workaround for this behavior. A workaround will be added here when available

Environment

MacBook Pro (16-inch, 2021)
macOS Sonoma 14.7
Operations - Windows11
Chrome - Version 135.0.7049.42 (Official Build) (64-bit)
Safari- Version 18.0
Firefox- Version 135.0 (64-bit)
JAWS- Version 2023
NVDA- Version 2024.4.2
VoiceOver - Version Latest