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

Create Plan Wizard: Custom form controls not programmatically determined and operable for screen reader users

XMLWordPrintable

      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

      1. Navigate to Plan dropdown in header section.
      2. Activate the “Create…“ option.
      3. Select "Plan" > and activate "Create" button.
      4. Open the "Create Plan Wizard" page.
      5. Navigate to the main content.
      6. Navigate to the mentioned form fields.
      7. Inspect the code.

      Screen Recording

      Create Advanced Roadmaps Plan - Advanced Roadmaps - InstEnv Jira - Google Chrome 2024-01-30 18-38-04.mp4

      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

        1. Create Advanced Roadmaps Plan - Advanced Roadmaps - InstEnv Jira - Google Chrome 2024-01-30 18-38-04.mp4
          18.51 MB

          Form Name

            [JSWSERVER-25689] Create Plan Wizard: Custom form controls not programmatically determined and operable for screen reader users

            Jira Server Release Automation Bot[ADM-107524] made changes -
            Resolution New: Fixed [ 1 ]
            Status Original: Waiting for Release [ 12075 ] New: Closed [ 6 ]
            Sylwia Mikołajczuk made changes -
            Priority Original: Highest [ 1 ] New: Medium [ 3 ]
            Arun S made changes -
            Fix Version/s New: 10.2.0 [ 108819 ]
            Arun S made changes -
            Status Original: In Progress [ 3 ] New: Waiting for Release [ 12075 ]
            Sameer Shaikh made changes -
            Labels Original: 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 New: 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
            Arun S made changes -
            Assignee New: Arun S [ 578bae526277 ]
            Arun S made changes -
            Status Original: Ready for Development [ 10049 ] New: In Progress [ 3 ]
            Arun S made changes -
            Remote Link New: This issue links to "Page (Confluence)" [ 934687 ]
            Sameer Shaikh made changes -
            Description Original: h3. 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.
            h3. 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.

            h3. Screen Recording

            [^Create Advanced Roadmaps Plan - Advanced Roadmaps - InstEnv Jira - Google Chrome 2024-01-30 18-38-04.mp4]
            h3. 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.
            h3. Expected Results
            {noformat}
            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 id="permission-uid2-label" for="permission-uid2" class="css-14u8e9r">Access<span aria-hidden="true" class="css-lx0zk6">*</span></label>
            <input id="react-select-2-input" readonly="" tabindex="0" aria-autocomplete="list" aria-expanded="false" aria-haspopup="true" role="combobox"... class="css-62g3xt-dummyInput" value="">{noformat}
            h3. 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
            h3. Environment

            Chrome - Version 101.0.4606.81 (Official Build) (64-bit)
            Firefox- Version 93.0 (32-bit)
            JAWS- Version 2022
            NVDA- Version 2020.3             		New: h3. 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.
            h3. 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.

            h3. Screen Recording

            [^Create Advanced Roadmaps Plan - Advanced Roadmaps - InstEnv Jira - Google Chrome 2024-01-30 18-38-04.mp4]
            h3. 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.
            h3. 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]
            h3. 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
            h3. Environment

            Chrome - Version 101.0.4606.81 (Official Build) (64-bit)
            Firefox- Version 93.0 (32-bit)
            JAWS- Version 2022
            NVDA- Version 2020.3
            Sameer Shaikh made changes -
            Description Original: h3. 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.
            h3. 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.

            h3. Screen Recording

            [^Create Advanced Roadmaps Plan - Advanced Roadmaps - InstEnv Jira - Google Chrome 2024-01-30 18-38-04.mp4]
            h3. 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.

            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.
            h3. 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 the below links
            [https://www.w3.org/WAI/ARIA/apg/patterns/combobox/ |https://www.w3.org/WAI/ARIA/apg/patterns/combobox/]

            [https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-activedescendant]
            h3. 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
            h3. Environment

            Chrome - Version 101.0.4606.81 (Official Build) (64-bit)
            Firefox- Version 93.0 (32-bit)
            JAWS- Version 2022
            NVDA- Version 2020.3             		New: h3. 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.
            h3. 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.

            h3. Screen Recording

            [^Create Advanced Roadmaps Plan - Advanced Roadmaps - InstEnv Jira - Google Chrome 2024-01-30 18-38-04.mp4]
            h3. 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.
            h3. Expected Results
            {noformat}
            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 id="permission-uid2-label" for="permission-uid2" class="css-14u8e9r">Access<span aria-hidden="true" class="css-lx0zk6">*</span></label>
            <input id="react-select-2-input" readonly="" tabindex="0" aria-autocomplete="list" aria-expanded="false" aria-haspopup="true" role="combobox"... class="css-62g3xt-dummyInput" value="">{noformat}
            h3. 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
            h3. Environment

            Chrome - Version 101.0.4606.81 (Official Build) (64-bit)
            Firefox- Version 93.0 (32-bit)
            JAWS- Version 2022
            NVDA- Version 2020.3

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

                Created:
                Updated:
                Resolved: