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

Accessibility assessment | Roadmaps : Comboboxes are not programmatically defined

XMLWordPrintable

      Issue Summary

      On the "Accessibility assessment | Roadmaps" page, the "Choose issue type" comboboxes are not programmatically declared.

      Steps to Reproduce

      1. Navigate onto the above mentioned page.
      2. Navigate onto the "View settings" button and activate it.
      3. Navigate to the mentioned instances and inspect the code.
      4. Observe that the comboboxes are not programmatically defined.

      Screenshot

      Actual Results

      There are comboboxes that are not correctly programmatically defined with appropriate roles and properties. The <input > elements of the "Choose issue type" comboboxes do not use role="combobox" or aria-activedescendant. As well, the child listbox does not use role="listbox", role="option" and aria-selected attributes.

      This may particularly  disadvantage the users of a screen reader. That the combobox is not correctly programmatically defined may confuse or mislead them about the functionality of the form fields.

      Expected Results

      Make sure that the combobox components are programmatically determined. In this scenario, we would recommend you to create a combobox with appropriate ARIA roles and properties. On the combobox, use role="combobox". Where possible, expand a native <input>. Make sure that the <input> is labelled. This can be done with <label> or aria-labelledby. Use aria-expanded to differentiate when the listbox is expanded and collapsed. As well, use aria-activedescendant to programmatically determine the active option. This attribute uses the id of the active option. On the listbox, use role="listbox". Where possible, expand a list container such as <ul>. On the options, use role="option". Where possible, expand <li>. As well, use aria-selected to differentiate of the active and inactive options. For more information, you can refer " https://www.w3.org/WAI/ARIA/apg/patterns/combobox/"

      Code Snippet

      <label for="ex">Choose issue type</label>
<input id="ex" type="search" role="combobox" aria-activedescendant="01" aria-autocomplete="list" aria-expanded="true" aria-controls="results" aria-haspopup="listbox" ...>
<ul id="results" role="listbox" aria-label="Issue type list">
<li id="01" role="option" aria-selected="true">Task</li>
<li id="02" role="option">Story</li>
...
</ul>

      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 Ventura 13.3.1
      Chrome - Version 113.0.5672.63 (Official Build) (x86_64)
      Firefox- Version 92.0 (64-bit)
      Safari- Version 16.4 (18615.1.26.110.1)
      JAWS- Version 2023
      NVDA- Version 2023.3
      Voiceover - Version Latest

        1. Screenshot 2024-02-07 at 8.48.31 AM.png
          Screenshot 2024-02-07 at 8.48.31 AM.png
          863 kB

          Form Name

            [JSWSERVER-25739] Accessibility assessment | Roadmaps : Comboboxes are not programmatically defined

            Marc Dacanay made changes -
            Labels Original: 4.1.2 ax-at-user ax-bug ax-desktop ax-high-priority ax-jiradc-arj ax-jiradc-arj-vpat2024 ax-jiradc-vpat ax-jiradc-vpat-accessibilityassessmentroadmaps ax-jiradc-vpat-pg03 ax-qa level-A wcag21 New: 4.1.2 ax-at-user ax-bug ax-desktop ax-high-priority ax-jiradc-arj ax-jiradc-arj-vpat2024 ax-jiradc-vpat ax-jiradc-vpat-accessibilityassessmentroadmaps ax-jiradc-vpat-pg03 ax-qa level-A ril wcag21
            Marc Dacanay made changes -
            Remote Link New: This issue links to "Internal ticket (Web Link)" [ 963911 ]
            Sylwia Mikołajczuk made changes -
            Priority Original: High [ 2 ] New: Medium [ 3 ]
            Stasiu made changes -
            Introduced in Version Original: 9.12 New: 8.2
            Affects Version/s New: 8.20.30 [ 106364 ]
            Affects Version/s New: 9.4.17 [ 106909 ]
            Sylwia Mikołajczuk made changes -
            Labels Original: 4.1.2 ax-at-user ax-bug ax-desktop ax-high-priority ax-jiradc-vpat ax-jiradc-vpat-accessibilityassessmentroadmaps ax-jiradc-vpat-pg03 ax-qa level-A wcag21 New: 4.1.2 ax-at-user ax-bug ax-desktop ax-high-priority ax-jiradc-arj ax-jiradc-arj-vpat2024 ax-jiradc-vpat ax-jiradc-vpat-accessibilityassessmentroadmaps ax-jiradc-vpat-pg03 ax-qa level-A wcag21
            Stasiu made changes -
            Component/s Original: Accessibility [ 62491 ]
            Component/s Original: (Advanced Roadmaps) Other [ 73719 ]
            Component/s New: (Advanced Roadmaps) Accessibility [ 74392 ]
            Stasiu made changes -
            Status Original: Needs Triage [ 10030 ] New: Ready for Development [ 10049 ]
            Yash Pawar made changes -
            Description Original: h3. Issue Summary

            On the "Accessibility assessment | Roadmaps" page, the "Choose issue type" comboboxes are not programmatically declared.
            h3. Steps to Reproduce
             # Navigate onto the above mentioned page.
             # Navigate onto the "View settings" button and activate it.
             # Navigate to the mentioned instances and inspect the code.
             # Observe that the comboboxes are not programmatically defined.

            h3. Screenshot
            h3. Actual Results

            There are comboboxes that are not correctly programmatically defined with appropriate roles and properties. The <input > elements of the "Choose issue type" comboboxes do not use role="combobox" or aria-activedescendant. As well, the child listbox does not use role="listbox", role="option" and aria-selected attributes.

            This may particularly  disadvantage the users of a screen reader. That the combobox is not correctly programmatically defined may confuse or mislead them about the functionality of the form fields.
            h3. Expected Results

            Make sure that the combobox components are programmatically determined. In this scenario, we would recommend you to create a combobox with appropriate ARIA roles and properties. On the combobox, use role="combobox". Where possible, expand a native <input>. Make sure that the <input> is labelled. This can be done with <label> or aria-labelledby. Use aria-expanded to differentiate when the listbox is expanded and collapsed. As well, use aria-activedescendant to programmatically determine the active option. This attribute uses the id of the active option. On the listbox, use role="listbox". Where possible, expand a list container such as <ul>. On the options, use role="option". Where possible, expand <li>. As well, use aria-selected to differentiate of the active and inactive options. For more information, you can refer " [https://www.w3.org/WAI/ARIA/apg/patterns/combobox/]"

            *Code Snippet*
            {noformat}
            <label for="ex">Choose issue type</label>
            <input id="ex" type="search" role="combobox" aria-activedescendant="01" aria-autocomplete="list" aria-expanded="true" aria-controls="results" aria-haspopup="listbox" ...>
            <ul id="results" role="listbox" aria-label="Issue type list">
            <li id="01" role="option" aria-selected="true">Task</li>
            <li id="02" role="option">Story</li>
            ...
            </ul>{noformat}
            h3. Workaround

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

            MacBook Pro (16-inch, 2021)
            macOs Ventura 13.3.1
            Chrome - Version 113.0.5672.63 (Official Build) (x86_64)
            Firefox- Version 92.0 (64-bit)
            Safari- Version 16.4 (18615.1.26.110.1)
            JAWS- Version 2023
            NVDA- Version 2023.3
            Voiceover - Version Latest             		New: h3. Issue Summary

            On the "Accessibility assessment | Roadmaps" page, the "Choose issue type" comboboxes are not programmatically declared.
            h3. Steps to Reproduce
             # Navigate onto the above mentioned page.
             # Navigate onto the "View settings" button and activate it.
             # Navigate to the mentioned instances and inspect the code.
             # Observe that the comboboxes are not programmatically defined.

            h3. Screenshot

            !Screenshot 2024-02-07 at 8.48.31 AM.png|width=447,height=259!
            h3. Actual Results

            There are comboboxes that are not correctly programmatically defined with appropriate roles and properties. The <input > elements of the "Choose issue type" comboboxes do not use role="combobox" or aria-activedescendant. As well, the child listbox does not use role="listbox", role="option" and aria-selected attributes.

            This may particularly  disadvantage the users of a screen reader. That the combobox is not correctly programmatically defined may confuse or mislead them about the functionality of the form fields.
            h3. Expected Results

            Make sure that the combobox components are programmatically determined. In this scenario, we would recommend you to create a combobox with appropriate ARIA roles and properties. On the combobox, use role="combobox". Where possible, expand a native <input>. Make sure that the <input> is labelled. This can be done with <label> or aria-labelledby. Use aria-expanded to differentiate when the listbox is expanded and collapsed. As well, use aria-activedescendant to programmatically determine the active option. This attribute uses the id of the active option. On the listbox, use role="listbox". Where possible, expand a list container such as <ul>. On the options, use role="option". Where possible, expand <li>. As well, use aria-selected to differentiate of the active and inactive options. For more information, you can refer " [https://www.w3.org/WAI/ARIA/apg/patterns/combobox/]"

            *Code Snippet*
            {noformat}
            <label for="ex">Choose issue type</label>
            <input id="ex" type="search" role="combobox" aria-activedescendant="01" aria-autocomplete="list" aria-expanded="true" aria-controls="results" aria-haspopup="listbox" ...>
            <ul id="results" role="listbox" aria-label="Issue type list">
            <li id="01" role="option" aria-selected="true">Task</li>
            <li id="02" role="option">Story</li>
            ...
            </ul>{noformat}
            h3. Workaround

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

            MacBook Pro (16-inch, 2021)
            macOs Ventura 13.3.1
            Chrome - Version 113.0.5672.63 (Official Build) (x86_64)
            Firefox- Version 92.0 (64-bit)
            Safari- Version 16.4 (18615.1.26.110.1)
            JAWS- Version 2023
            NVDA- Version 2023.3
            Voiceover - Version Latest
            Yash Pawar made changes -
            Attachment New: Screenshot 2024-02-07 at 8.48.31 AM.png [ 451532 ]
            ssuryavanshi (Inactive) made changes -
            Component/s New: (Advanced Roadmaps) Other [ 73719 ]

              Unassigned Unassigned
              773dd3a38dd5 Cynthia Singh
              Affected customers:
              0 This affects my team
              Watchers:
              1 Start watching this issue

                Created:
                Updated: