Issue Description

in "Create issue" modal dialog, The Calendar popup provided for "Due date" is not accessible with screen reader & keyboard-only users.

Similar issue is present in "Releases" page for "start date" & "release date" calendars.

Steps to reproduce

1. Turn on screen reader and activate "Create" link from header region.
2. Navigate to the "Select a date" element present near "Due date" input field & activate it with enter key.
3. The calendar popup will open but the element inside popup can’t be navigated with keyboard.

Actual Behaviour

When screen reader users try to navigate in calendar component with up/down keys or Tab key, it is not responding i.e this calendar component is inaccessible for screen reader users.

When user activates the "Select a date" button the calendar popup is displayed. But the elements inside the popup such as "close", "Previous month", "Next month", etc can not be navigated with keyboard & screen reader doesn’t announce the contents.

Although when user press arrow keys the Different dates can be selected but screen reader doesn’t announce which date is currently focused.

This makes screen reader & keyboard users difficult to access the functionality of the Calendar effectively.

Expected Behaviour

When the popup opens the keyboard focus should go inside the popup contents. All the elements inside the Calendar popup such as "close", "Previous month", "Next month", etc should receive keyboard focus & screen reader should announce the elements. 

Following code changes needs to be made.

• Provide role="dialog" & aria-label="Select date" to the parent <div> container of the popup.
• Mark the elements such as "Close", "Previous month", "Next month", etc as <button> elements.
• Provide clear & descriptive labels to these buttons.
• Mark the month text inside <h2> element & provide aria-live="polite" along with an unique id.
• Provide role="grid" & aria-labelledby to the <table> element. 
• Provide aria-selected="true" to the currently selected date inside table.
• When user press up/down/left/right arrow keys to navigate to different dates, the screen reader should announce the date.
• Remove Following elements from <table> & <th> markup.
  • Help 
  • September 2022
  • close
  • Previous year & Next year
  • Previous Month & Next month
  • Today

Refer to the following Example of Accessible Calendar popup.

https://www.w3.org/WAI/ARIA/apg/example-index/dialog-modal/datepicker-dialog.html 

Screenshot

Create Issue dialog

Releases page.

AXQA Ref:AXQA-184