-
Bug
-
Resolution: Fixed
-
Medium (View bug fix roadmap)
-
8.20.30, 9.12.2, 9.4.17
-
- 2.1.1
- 2.4.3
- 4.1.2
- Level-A
- WCAG2.1
- a11y-triaged
- ax-at-JAWS
- ax-at-NVDA
- ax-at-user
- ax-bug
- ax-critical-priority
- ax-desktop
- ax-dev-ready
- ax-jiradc-arj
- ax-jiradc-arj-vpat2024
- ax-jiradc-vpat
- ax-jiradc-vpat-accessibilityassessmentroadmaps
- ax-jiradc-vpat-createplanwizard
- ax-jiradc-vpat-pg01
- ax-qa
- ax-qa-fixed
- ax-qa-verified
-
8.2
-
Severity 3 - Minor
-
Issue Summary
On the Create Plan Wizard page, JAWS users cannot select an option using arrow keys that appears for the "Access" and "Board" custom input fields in the main content area.
Steps to Reproduce
- Navigate to Plan dropdown in header section.
- Activate the “Create…“ option.
- Select "Plan" > and activate "Create" button.
- Open the "Create Plan Wizard" page.
- Navigate to the main content.
- Navigate to the mentioned form fields.
- Inspect the code.
Screen Recording
Actual Results
As soon as user use arrow keys within the "Access" and "Board" custom input fields, a list of options appear visually. While trying to select an option using JAWS, the virtual cursor exits forms mode and none of the option could be selected. The focus is not managed appropriately such that using JAWS an option can be selected. Moreover, the options are not placed inline to the <input> elements. Instead, they are placed at the end of the page.
Expected Results
Make sure that the combobox is programmatically defined by providing appropriate role and attributes, so that the screen reader users can interact with it effectively.
To achieve this, make the following changes:
- Provide role="combobox" for <input> element containing the mentioned form control in the DOM.
- Specify role="listbox" for <ul> element containing the combobox options, as well provide role="option" for <li> element containing each option.
- Specify the “aria-expanded” attribute and set the value as “false“ when it is in the collapse state. Make sure that the value should be updated on user interaction.
- The attributes "aria-autocomplete", "aria-haspopup", and "aria-controls" further define the exact behavior of the component. They are not strictly required for conformance. However, we strongly encourage you to use these attributes.
- Additionally, make sure the options available in combo boxes are also accessible for screen reader users. Use aria-activedescendant attribute on the <input> elements to determine the active option. This attribute uses the "id" of the active option.
For more information on implementing the combobox, Refer:
https://www.w3.org/WAI/ARIA/apg/patterns/combobox/
https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-activedescendant
Workaround
Required, if there is no workaround please state:
Currently there is no known workaround for this behavior. A workaround will be added here when available
Environment
Chrome - Version 101.0.4606.81 (Official Build) (64-bit)
Firefox- Version 93.0 (32-bit)
JAWS- Version 2022
NVDA- Version 2020.3
| Form Name | |||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|