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

Asset search: Custom checkboxes not programmatically determined and operable with a keyboard

    XMLWordPrintable

Details

    Description

      Issue Summary

      The custom checkbox such as "DHCP " in edit dilog in more options in all objects  is not keyboard operable. The role and state of the checkboxes are not programmatically determined .

      Note : same issue reproduced in the  services column also.

      Steps to Reproduce

      1. Open the Asset search page.
      2. Navigate to "More action" and activate it
      3. Navigate to "Edit" button and activate it.
      4. Observe the modal dialog appears on the page.
      5. Navigate to mentioned checkbox
      6. Try to access the checkboxes.
      7. Observe that the checkboxes are not keyboard operable.
      8. Listen that the checkboxes are not identified with role or state.

      Screenshot

      Actual Result

      The custom checkbox such as "DHCP " in edit dialog in more options in all objects is not keyboard operable. The role and state of the checkboxes are not programmatically determined for screen reader users.

      This resulted in keyboard-only and screen reader users not being able to interact with the custom checkboxes.

      Expected Results

      The custom checkboxes must be identified with role and state using screen reader for its users. Also, the custom checkboxes must be operable with a keyboard for its users.

       
      Replace the custom checkbox with the standard checkbox by using the <input type="checkbox"> element.
       
      Alternatively, use appropriate ARIA roles and attributes to code the custom checkbox. Additionally, modify the scripts to ensure it's operable with the keyboard.
       
      A working example of custom checkbox can be found at:
      https://www.w3.org/WAI/ARIA/apg/example-index/checkbox/checkbox.html 

      Code snippet

      <label for="a1" class="ruiCheckbox">DHCP<input id="a1" class="ruiCheckbox__input" type="checkbox"><span class="ruiCheckbox__mark"></span></label> 

      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.5
      Chrome - Version 115.0.5790.170 (Official Build) (arm64)
      Firefox- Version 112.0. 1
      Safari- Version 16.5 (18615.2.9.11.4)
      JAWS- Version 2023
      NVDA- Version 2023
      Voiceover - Version Latest

      Attachments

        Activity

          People

            Unassigned Unassigned
            415c9ec44a7c Pravalika Suragani
            Votes:
            0 Vote for this issue
            Watchers:
            1 Start watching this issue

            Dates

              Created:
              Updated:

              Backbone Issue Sync