Issue Summary

The "iOS Version" select-only combobox is not programmatically defined for screen reader users.

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 one 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 "iOS Version" select-only combobox, they find 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, 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 makes the combobox inaccessible and causes confusion for screen reader users.

Expected Results

Ensure that the combobox is programmatically defined to allow screen reader users to navigate and interact with it correctly.

In this case, 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.
• 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.
• Set role="option" on each <div> (or <li>) element that represents an option.

Refer to the following link for guidance on creating an accessible select-only combobox:

W3C ARIA Pattern for Combobox

Code Snippet:

<label for="select-only-label">iOS Version</label>

<select id="select-only-label">
<option value="ios14">iOS 14</option>
  <option value="ios15">iOS 15</option>
  <option value="ios16">iOS 16</option>
  <option value="ios17">iOS 17</option>
  <option value="ios18">iOS 18</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