Issue Summary

      The role is not provided for the “Martin Test Insight Object (optional)” custom combobox. In addition, a visual label is not associated with the mentioned custom combobox.

      Steps to Reproduce

      1. Navigate to "Help center" and activate it.
      2. Navigate to the "Charlottes First Project" link and activate it
      3. Try to access the “Martin Test Insight Object (optional)” custom combobox with screen reader on.
      4. Observe the comboboxes are missing roles.

      Actual Results

      The role is not provided for the “Martin Test Insight Object (optional)” custom combobox. In addition, a label is not provided for the mentioned combobox.

      Following problems found with custom combobox →

      1. The custom combobox is missing the roles of "combobox" and "listbox".
      2. role=”option” is missing for combobox options.
      3. The visual label “Martin Test Insight Object (optional)” is not associated with combobox.

      Due to this, screen reader users may not be able to use the functionality effectively.

      Although, all the necessary instructions such as "Press down to open the menu" and "Press left to focus selected values" are provided for the combobox. 

      Expected Results

      Making custom combobox accessible →

      • role="combobox" to the <input> element to announce correct role for this field.
      • aria-expanded property to the <input> element and toggle its value programmatically to true/ false depending on expanded/ collapsed state of combobox.
      • <div> element with role=”listbox” and unique id.
      • “aria-owns” attribute to <input> element having value of id property of <div> element.
      • role=”option” and unique id to the <div> elements present for options present for combobox.
      • aria-activedescendant property to the <input> element having value as id property of <li> element
      • A visible label such as “Martin Test Insight Object (optional)” should be associated with Combobox using “for“ and “id” attributes.

      For details on implementation, please see this example →

      https://www.w3.org/WAI/ARIA/apg/patterns/combobox/

      https://react-select.com/home

       

      Screenshots

      Screen Recording 2023-02-03 at 12.33.33 PM.mov

      Workaround

      Currently there is no known workaround for this behavior. 

            [JSDSERVER-12363] Get IT Help: Roles not defined for custom combobox

            There are no comments yet on this issue.

              f8cc0f3bb64f Shova Acharya
              b4488184f7d2 Rahil Shaikh
              Affected customers:
              0 This affects my team
              Watchers:
              1 Start watching this issue

                Created:
                Updated:
                Resolved: