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

Header : Combobox with grouped option is not programmatically defined

XMLWordPrintable

      Issue Summary

      The "Search issues" combobox in the header is not programmatically declared.

      Steps to Reproduce

      1. Navigate onto the above mentioned page.
      2. Navigate to the mentioned instance and inspect the code.
      3. Observe that the combobox is not programmatically defined.

      Screenshot

      Actual Results

      There is a combobox that is not correctly programmatically defined with appropriate roles and properties. The <input > element of the "Projects" combobox does not use role="combobox". It inappropriately use role="searchbox". 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 field.

      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 container such as <div>. On the options, use role="option". Where possible, expand <ul> and <li>. As well, use aria-selected to differentiate of the active and inactive options. Make sure that each <ul> element uses role="group" and aria-labelledby attribute.

      For more information, you can refer " https://www.w3.org/WAI/ARIA/apg/patterns/combobox/"

      Make sure that the component can be controlled with a keyboard. The standard approach is that users tab onto the combobox and use Arrow Keys to adjust the listbox. This can be done in parallel with the aforementioned aria-activedescendant and aria-selected.

      For more information on listbox with group, you can refer "https://www.w3.org/WAI/ARIA/apg/patterns/listbox/examples/listbox-grouped/"

      Note: Make sure that the "View all issues" and "View all projects" links are coded separately outside the <div> element that has role="listbox".

      Code Snippet

      <label for="ex">Search issues</label>
<input id="ex" type="search" role="combobox" aria-activedescendant="01" aria-autocomplete="list" aria-expanded="true" aria-controls="results" aria-haspopup="listbox" ...>
<div id="results" role="listbox" ...>
<span id="a1"issues</span>
<ul role="group" aria-labelledby="a1">
<li id="01" role="option" aria-selected="true">Get IT Help: Roles not defined for custom combobox</li>
<li id="02" role="option">demo1</li>
...
</ul>
...
</div>

      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-01-31 at 5.12.39 PM.png
          Screenshot 2024-01-31 at 5.12.39 PM.png
          726 kB

            [JSWSERVER-25583] Header : Combobox with grouped option is not programmatically defined

            Marc Dacanay made changes -
            Labels Original: 4.1.2 a11y-triaged 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-header ax-jiradc-vpat-pg11 ax-qa level-A wcag21 New: 4.1.2 a11y-triaged 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-header ax-jiradc-vpat-pg11 ax-qa level-A ril wcag21
            Marc Dacanay made changes -
            Remote Link New: This issue links to "Internal ticket (Web Link)" [ 963664 ]
            Sylwia Mikołajczuk made changes -
            Priority Original: High [ 2 ] New: Medium [ 3 ]
            Cynthia Singh made changes -
            Description Original: h3. Issue Summary

            The "Search issues" combobox in the header is not programmatically declared.
            h3. Steps to Reproduce
             # Navigate onto the above mentioned page.
             # Navigate to the mentioned instance and inspect the code.
             # Observe that the combobox is not programmatically defined.

            h3. Screenshot

            !Screenshot 2024-01-31 at 5.12.39 PM.png|width=676,height=400!
            h3. Actual Results

            There is a combobox that is not correctly programmatically defined with appropriate roles and properties. The <input > element of the "Projects" combobox does not use role="combobox". It inappropriately use role="searchbox". 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 field.
            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 container such as <div>. On the options, use role="option". Where possible, expand <ul> and <li>. As well, use aria-selected to differentiate of the active and inactive options. Make sure that each <ul> element uses role="group" and aria-labelledby attribute.

            For more information, you can refer " [https://www.w3.org/WAI/ARIA/apg/patterns/combobox/]"

            For more information on listbox with group, you can refer "https://www.w3.org/WAI/ARIA/apg/patterns/listbox/examples/listbox-grouped/"

            {*}Note{*}: Make sure that the "View all issues" and "View all projects" links are coded separately outside the <div> element that has role="listbox".

            *Code Snippet*
            {noformat}
            <label for="ex">Search issues</label>
            <input id="ex" type="search" role="combobox" aria-activedescendant="01" aria-autocomplete="list" aria-expanded="true" aria-controls="results" aria-haspopup="listbox" ...>
            <div id="results" role="listbox" ...>
            <span id="a1"issues</span>
            <ul role="group" aria-labelledby="a1">
            <li id="01" role="option" aria-selected="true">Get IT Help: Roles not defined for custom combobox</li>
            <li id="02" role="option">demo1</li>
            ...
            </ul>
            ...
            </div>{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

            The "Search issues" combobox in the header is not programmatically declared.
            h3. Steps to Reproduce
             # Navigate onto the above mentioned page.
             # Navigate to the mentioned instance and inspect the code.
             # Observe that the combobox is not programmatically defined.

            h3. Screenshot

            !Screenshot 2024-01-31 at 5.12.39 PM.png|width=676,height=400!
            h3. Actual Results

            There is a combobox that is not correctly programmatically defined with appropriate roles and properties. The <input > element of the "Projects" combobox does not use role="combobox". It inappropriately use role="searchbox". 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 field.
            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 container such as <div>. On the options, use role="option". Where possible, expand <ul> and <li>. As well, use aria-selected to differentiate of the active and inactive options. Make sure that each <ul> element uses role="group" and aria-labelledby attribute.

            For more information, you can refer " [https://www.w3.org/WAI/ARIA/apg/patterns/combobox/]"

            Make sure that the component can be controlled with a keyboard. The standard approach is that users tab onto the combobox and use Arrow Keys to adjust the listbox. This can be done in parallel with the aforementioned aria-activedescendant and aria-selected.

            For more information on listbox with group, you can refer "https://www.w3.org/WAI/ARIA/apg/patterns/listbox/examples/listbox-grouped/"

            {*}Note{*}: Make sure that the "View all issues" and "View all projects" links are coded separately outside the <div> element that has role="listbox".

            *Code Snippet*
            {noformat}
            <label for="ex">Search issues</label>
            <input id="ex" type="search" role="combobox" aria-activedescendant="01" aria-autocomplete="list" aria-expanded="true" aria-controls="results" aria-haspopup="listbox" ...>
            <div id="results" role="listbox" ...>
            <span id="a1"issues</span>
            <ul role="group" aria-labelledby="a1">
            <li id="01" role="option" aria-selected="true">Get IT Help: Roles not defined for custom combobox</li>
            <li id="02" role="option">demo1</li>
            ...
            </ul>
            ...
            </div>{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
            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 a11y-triaged ax-at-user ax-bug ax-desktop ax-high-priority ax-jiradc-vpat ax-jiradc-vpat-accessibilityassessmentroadmaps ax-jiradc-vpat-header ax-jiradc-vpat-pg11 ax-qa level-A wcag21 New: 4.1.2 a11y-triaged 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-header ax-jiradc-vpat-pg11 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 -
            Priority Original: Low [ 4 ] New: High [ 2 ]
            Sylwia Mikołajczuk made changes -
            Labels Original: 4.1.2 a11y-triaged ax-at-user ax-bug ax-desktop ax-high-priority ax-jiradc-vpat ax-jiradc-vpat-header ax-jiradc-vpat-pg11 ax-qa level-A wcag21 New: 4.1.2 a11y-triaged ax-at-user ax-bug ax-desktop ax-high-priority ax-jiradc-vpat ax-jiradc-vpat-accessibilityassessmentroadmaps ax-jiradc-vpat-header ax-jiradc-vpat-pg11 ax-qa level-A wcag21
            ssuryavanshi (Inactive) made changes -
            Component/s New: (Advanced Roadmaps) Other [ 73719 ]

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

                Created:
                Updated: