Uploaded image for project: 'Jira Data Center'
  1. Jira Data Center
  2. JRASERVER-75670

Boards | Board configuration : Missing keyboard support for input fields

    XMLWordPrintable

Details

    Description

      Issue Summary

      Missing keyboard support for the "Board name", "Administrators", "Saved Filter" and "Kanban board sub-filter" input fields. Currently, this element is executable with a mouse only.

      Note- Similar issue has been observed on the "Backlog" page for the search input fields. Please refer to screenshot 2.

      Steps to Reproduce

      1. Navigate to the “Boards” menu pop-up link and activate it.
      2. Navigate to the “Configure” link and activate it.
      3. Try to access mentioned interactive element with the Keyboard.
      4. Observe it is missing keyboard support.

      Screenshot 1

      Screenshot 2

      Actual Result

      When the user tries to navigate to the mentioned input fields using the keyboard it was not possible. This is because the mentioned element is lacking <button> markup or role=”button”. 

      If an interactive element is missing a role or has an incorrect aria-attribute then it becomes incompatible with the screen reader. As a result, screen readers and keyboard-only users will miss out on important functionality associated with it.

      Expected Result

      The mentioned input fields should receive keyboard support when the user navigates through them using the TAB key.

      For this interactive element should be coded as a button with type=” button” or role=”button”. Also, it should announce an accessible name for this button via aria-label attribute as associated input fields

      Note: If using role="button" instead of the semantic <button> or <input type="button"> elements, you will need to make the element focusable and define event handlers for click and keydown events. This includes handling the Enter and Space keypresses in order to process all forms of user input.

      Code snippet 1: Using <button>

      <button aria-label="board name edit field" id="ghx-field-viewname" class="ghx-editable">(..)</button>

      Code snippet 2: Using role=”button”

      <span role="button" aria-label="board name edit field" id="ghx-field-viewname" class="ghx-editable">KAB board</span>

      Workaround

      Currently, there is no known workaround for this behaviour. A workaround will be added here when available

      Environment

      MacBook Pro (14-inch, 2021)
      macOs Ventura  13.2.1
      Chrome - Version 110.0.5481.100 (Official Build) (64-bit)
      Firefox- Version 92.0 (64-bit)
      Safari- Version 16.2 (18614.3.7.1.5)
      JAWS- Version 2021
      NVDA- Version 2021.2
      Voiceover - Version Latest

      Attachments

        Activity

          People

            b5681d69ff53 Maciej Szarecki
            153f1fd15216 Rogerpinto Marialouis
            Votes:
            0 Vote for this issue
            Watchers:
            4 Start watching this issue

            Dates

              Created:
              Updated:
              Resolved: