Uploaded image for project: 'Jira Data Center'
  1. Jira Data Center
  2. JRASERVER-74567

Project Automation: Roles and labels not provided for combobox element

    XMLWordPrintable

Details

    Description

      Issue Summary

      The combobox element has missing roles and labels to select the type of Project for automation.

      Steps to Reproduce

      1. Select the "Administration" icon from the top navigation.
      2. Navigate to the Manage Apps -> expand "Automation for Jira" drop-down -> "Get started" button.
      3. Select the "Automate a sample project" button
      4. Keeping the screen reader on Use the tab key Navigate to the "Software Combo Box".

      Actual Results

      In the Select a project type for Jira automation, the comboxbox to select a type of project has missing roles and labels. Due to this when the screen reader tries to interact with the component, the user is unable to understand the functionality associated with it and is not able to access the list items. This makes the user difficult understand the functionality associated with it.

      Expected Results

      Try to implement the following component into an <select> element as the structure and functionality match it.

      Refer to the following code snippet:

      <form>
        <label hidden for="project_type">Choose a Project type</label>
        <select name="" id="project_type">
          <option value="0">Business</option>
          <option value="1">Software</option>
        </select>
      </form> 

      An alternate way to implement a similar component would be:

      The identity of comboxbox user interface elements is expected to be announced correctly by screen reader users.

      • Provide the attributes such as aria-expanded="false", aria-haspopup="listbox" and  role="combobox" to the <div> element.
      • Provide the role="listbox" to the list containing the options.
      • Provide a hidden label to the comboxbox explaining the purpose of the element.
      • Ensure the options receive the keyboard focus.

      Refer to the following link for better implementation:  https://www.w3.org/WAI/ARIA/apg/example-index/combobox/combobox-select-only.html 

      Screenshot

      Screen recording

      GSAC.mp4

      Workaround

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

      Attachments

        1. GSAC.jpg
          697 kB
          Akhilesh Paradhi
        2. GSAC.mp4
          354 kB
          Akhilesh Paradhi

        Issue Links

          Activity

            People

              b5681d69ff53 Maciej Szarecki
              2b3f463b7e2d Akhilesh Paradhi (Inactive)
              Votes:
              0 Vote for this issue
              Watchers:
              2 Start watching this issue

              Dates

                Created:
                Updated:
                Resolved: