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

Calender Widget : Button: The Calendars interactive elements have missing both a role and a name

XMLWordPrintable

      Issue Summary

      The interactive elements in the Date picker modal are missing both a role and an accessible name/label.

      Elements: The following icon elements

      • Question mark
      • Close
      • Prev Month (Single Left arrow)
      • Next Month(Single Right arrow)
      • Prev Year (Double Left arrow)
      • Next Year(Double Right arrow)
        Location: Top section of Calendar Widget

      Steps to Reproduce

      1. Navigate to the Jira dashboard page.
      2. Navigate to the "Issues" menu button in the header section & activate it.
      3. Activate the “Search for issues ” link.
      4. Navigate to the Search section and open the "More" dropdown button
      5. Search for the "Created date" label option and select it.
      6. Navigate to the Date picker / Calendar icon to select a date.
      7. Try to inspect the elements such as Question mark, Close, Prev Month (Single Left arrow) , Next Month(Single Right arrow), Prev Year (Double Left arrow), and Next Year(Double Right arrow).

      Actual Results

      In the calendar picker for the search basic filter, some of the interactive elements such as " Question mark, Close, Prev Month (Single Left arrow), Next Month(Single Right arrow), Prev Year (Double Left arrow), and Next Year(Double Right arrow) " have a missing role and value for it. 
      For eg., the element Next Month(Single Right arrow ">") is only stated in the ">" character. This would not make the screen reader understand the purpose associated with it.

      Additionally, the elements have missing keyboard support.

      Expected Results

      The element has a functionality more over like a button. The element could be defined into an <button> element or a role="button" could be provided.
      An accessible name should be provided with an aria-label, such as aria-label="Next month" to the ">" button.

      Ensure the elements receive keyboard focus and screen reader focus.

      Screenshot

      Workaround

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

      Bug Ref: 726674

       

        1. date picker.png
          date picker.png
          473 kB
        2. JRASERVER-73446-after-fix.mov
          30.67 MB
        3. JRASERVER-73446-after-fix-voiceover.mov
          53.76 MB
        4. 74045-Calendar-QA.mov
          32.76 MB

              c3057d0e8d6b Vadym Ohyr
              12b69dcabe29 Matthew Brennan
              Votes:
              1 Vote for this issue
              Watchers:
              4 Start watching this issue

                Created:
                Updated:
                Resolved: