Boards | Board configuration : Missing keyboard support for input fields

XMLWordPrintable

    • 9.07
    • Severity 3 - Minor

      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

              Assignee:
              Maciej Szarecki
              Reporter:
              Rogerpinto Marialouis (Inactive)
              Votes:
              0 Vote for this issue
              Watchers:
              4 Start watching this issue

                Created:
                Updated:
                Resolved: