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

Kanban board: Buttons not focusable with a keyboard and lack button role

    XMLWordPrintable

Details

    Description

      Issue Summary

      The role such as "button" and label is not defined for the interactive elements present in the "Release" modal dialog.

      This issue has been observed on the "Backlog" page.

      Steps to Reproduce

      1. Navigate to "Boards" dropdown present in the header section.
      2. Navigate to the "KAN board" option and activate it.
      3. Observe that "Kanban board" page has been appeared on the page
      4. Navigate to the "Release" button and activate it.
      5. Observe that modal dialog has been appeared on the screen.
      6. Access the date widget icon using keyboard.
      7. Observe that it is not accessible using keyboard.

      Screenshot 1: Kanban Board

      Screenshot 2: Backlog

      Actual Results

      The role "button" not defined for the interactive elements in the "Date widget" (that becomes available on activating "Release"> "Date widget"). As a result, keyboard-only and screen reader users will not be able to interact with the functionality of interactive element.

      Additionally, label not defined programmatically for the "date widget".

      Expected Results

      Ensure that all the interactive elements are focusable and operable using a keyboard and screen reader.
      Apply the following changes:

      • Code the mentioned buttons using <button> tag.
      • Provide aria-label as "Date widget".
      • Modify the scripts to ensure that the button is operable with keyboard and a mouse.

      A working example of accessible button can be found at https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button

      Note: Before implementing changes in label confirm this with content design team.

      Code Snippet

      <button aria-label="Date widget" id="ghx-release-date_trigger_c" class="ghx-iconfont aui-icon aui-icon-small aui-iconfont-calendar">&nbsp;</button>

      Workaround

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

      Environment

      MacBook Pro (16-inch, 2019)
      macOS Monterey Version 12.6
      Chrome - Version 106.0.5249.91 (Official Build) (x86_64)
      Firefox- Version 93.0 (32-bit)
      Safari- Version 14.1.2 (16611.3.10.1.16)
      JAWS- Version 2022
      NVDA- Version 2020.3
      Voiceover - Version Latest

      Attachments

        1. image-2023-04-11-07-08-45-319.png
          777 kB
          Varsha Bansode
        2. edit.png
          639 kB
          Athul Sudhan

        Activity

          People

            34a5d0a5a65c Pavlo Samchuk
            c3f9a46dc7c4 Varsha Bansode
            Votes:
            0 Vote for this issue
            Watchers:
            2 Start watching this issue

            Dates

              Created:
              Updated:
              Resolved: