Uploaded image for project: 'Jira Software Data Center'
  1. Jira Software Data Center
  2. JSWSERVER-25710

Accessibility Assessment | Teams: Custom form controls not programmatically determined and operable for screen reader users

XMLWordPrintable

      Issue Summary

      On the Accessibility Assessment | Teams page, JAWS users cannot select an option using arrow keys that appears for the "Shared team" custom input field in the modal dialog (that becomes available on activating “Add team” button) in the main content area.

      Steps to Reproduce

      1. Open the "Accessibility Assessment | Teams" page.
      2. Navigate to the main content.
      3. Navigate to the "Add team" button and activate it.
      4. A modal dialog appears on the page.
      5. Navigate to the "Add existing shared team" radio button and activate it.
      6. Navigate to the mentioned custom input field.
      7. Inspect the code

      Screen Recording

      Accessibility Assessments - Advanced Roadmaps - InstEnv Jira - Google Chrome 2024-01-29 19-01-58.mp4

      Actual Results

      As soon as user use arrow keys within the "Shared team" custom input field, 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.

      As well, the instructions “Use Up and Down to choose an option. Press enter to select the currently focussed option. Press escape to exit the menu” are incomplete. The options in these input fields can be selected with Up, Down, Left, and Right arrow keys. However, the instructions do not talk about Left and Right arrow key navigation. As a result, the screen reader users cannot select any options that appears for the custom input fields.

      Expected Results

      All interactive elements must be completely operable and compatible with all screen readers. In this scenario, Make sure that the options that appear on expanding the input fields are coded directly after the <input> elements in the DOM. As well, 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 using aria-activedescendant, you can refer: https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-activedescendant#:~:text=The%20value%20of%20aria%2Dactivedescendant%20refers%20to%20an%20owned%20element,is%20controlled%20by%20the%20combobox.
As well, modify the instructions in a manner such that they provide a complete information as to how to select the options properly. For instance, “Use Up and Down arrow keys to navigate to the options. Use Left and Right arrow keys to navigate to the selected options. Press enter to select the focused option. Press Escape to come out of the input field.
Code Snippet
<label class="Field__Label-vqybw1-1 ghWQGY" id="sharedTeamId-cd3a3996-1cd6-4867-930c-82229b34f84b-label" for="sharedTeamId-cd3a3996-1cd6-4867-930c-82229b34f84b">Shared team</label>
<input autocapitalize="none" autocomplete="off" autocorrect="off" id="react-select-3-input" spellcheck="false" tabindex="0" type="text" aria-autocomplete="list" aria-expanded="false" aria-haspopup="true" aria-required="true" role="combobox" aria-labelledby="sharedTeamId-cd3a3996-1cd6-4867-930c-82229b34f84b-label sharedTeamId-cd3a3996-1cd6-4867-930c-82229b34f84b-helper sharedTeamId-cd3a3996-1cd6-4867-930c-82229b34f84b-valid sharedTeamId-cd3a3996-1cd6-4867-930c-82229b34f84b-error" value="" style="box-sizing: content-box; width: 2px; background: 0px center; border: 0px; font-size: inherit; opacity: 1; outline: 0px; padding: 0px; color: inherit;">

      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

        1. Accessibility Assessments - Advanced Roadmaps - InstEnv Jira - Google Chrome 2024-01-29 19-01-58.mp4
          12.45 MB
        2. Car plan - Advanced Roadmaps - InstEnv Jira - Google Chrome 2024-09-04 12-02-47.mp4
          14.34 MB

            [JSWSERVER-25710] Accessibility Assessment | Teams: Custom form controls not programmatically determined and operable for screen reader users

            Arun S added a comment -

            Fixed in the PR - https://stash.atlassian.com/projects/JSWSERVER/repos/jira-software-application/pull-requests/3778/overview

            Arun S added a comment - Fixed in the PR - https://stash.atlassian.com/projects/JSWSERVER/repos/jira-software-application/pull-requests/3778/overview

              578bae526277 Arun S
              4cbd728b4726 Rinku Kumar
              Affected customers:
              0 This affects my team
              Watchers:
              6 Start watching this issue

                Created:
                Updated:
                Resolved: