Uploaded image for project: 'Jira Service Management Data Center'
  1. Jira Service Management Data Center
  2. JSDSERVER-11503

Help Center : Combobox is missing appropriate roles and /or attributes.

XMLWordPrintable

      Issue Summary

      The element appears and functions like a Listbox but is missing the required ARIA role(s) and/or attribute(s).

      Name of the Element:
      -Popular list box

      Location:
      Located beside the heading "All portals", in the main region

      Steps to Reproduce

      1. In the Help Center portal keeping the screen reader navigate to the main content area.
      2. Inspect the dropdown menu to order the projects.

      Actual Results

      The <input> elements do not use role="combobox", aria-expanded, and aria-activedescendant attributes. As well, the comboboxes do not have programmatically defined accessible names. The listbox options do not use role="listbox", role="option", and aria-selected attributes. As a result, users of assistive technologies will not be able to understand the functionality associated with the comboboxes.

      Expected Results

      • Make sure that Combobox components are programmatically determined. If possible, use a native "<select>" element. These have out-of-the-box accessibility. If this is not possible, create a Combobox with ARIA. Provide role=”combobox” for the <div> element containing mentioned combo boxes.
      • Provide role="listbox" for the <div> element containing combo box options and also reference id of <label> element to the same <div> element using “aria-labelledby” attribute.
      • Specify the “aria-expanded” attribute and set the value as “true“ when it is in the selected 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 behaviour 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.

      Refer to this link for https://www.w3.org/WAI/ARIA/apg/patterns/combobox/examples/combobox-select-only/ implementation. 

      Screenshot

      Workaround

      No workaround is available.

      Bug Ref: 744594

      Bulldog Ref:

        1. Option labels are announcing correctly in the select order editable combobox (1).mp4
          3.78 MB
        2. Screenshot 2022-11-16 at 9.42.58 AM.png
          Screenshot 2022-11-16 at 9.42.58 AM.png
          1.10 MB
        3. Screenshot 2023-03-14 at 1.24.03 PM.png
          Screenshot 2023-03-14 at 1.24.03 PM.png
          683 kB

            [JSDSERVER-11503] Help Center : Combobox is missing appropriate roles and /or attributes.

            Gerard Cohen added a comment -

            a955dc6cda19 34549e788464 b4488184f7d2 EM from ADS Accessibility team here. Which version of @atlaskit/select are you using. I would recommend using the latest package version.

            Additionally, the Select component does not use the traditional roles/ semantics but provides the same information by other means. If testers are looking for specific markup, they may not find it but should validate the expected information is still announced.

            That being said, as mentioned in the Slack conversation, I ultimately believe that Select is not the correct semantic component for this use case. I would highly recommend using the @atlaskit/dropdown-menu for better support.{}

            Gerard Cohen added a comment - a955dc6cda19 34549e788464 b4488184f7d2 EM from ADS Accessibility team here. Which version of @atlaskit/select are you using. I would recommend using the latest package version. Additionally, the Select component does not use the traditional roles/ semantics but provides the same information by other means. If testers are looking for specific markup, they may not find it but should validate the expected information is still announced. That being said, as mentioned in the Slack conversation , I ultimately believe that Select is not the correct semantic component for this use case. I would highly recommend using the @atlaskit/dropdown-menu for better support. { }

              Unassigned Unassigned
              12b69dcabe29 Matthew Brennan
              Affected customers:
              0 This affects my team
              Watchers:
              7 Start watching this issue

                Created:
                Updated:
                Resolved: