Issue Summary

The date selector widgets available in the "Start" and "End" form fields are not operable with a keyboard.

Note: Similar issue is found on below pages

• Analytics
• Create New Page

Steps to Reproduce

1. Navigate to the header and activate the "Calendar" link
2. Navigate to the dates and activate it 
3. Using the screen reader, navigate to the date selector widget in the "Start" and "End" form fields
4. Try to navigate to the mentioned date selector controls
5. Observe that the date selector controls are not reachable
6. Listen that the date selector controls are not identified instead they are skipped.

Screenshot 1: Calendar

Screenshot 2: Create new page | Date

Actual Results

Date selector controls provided for selecting “Start" and “End” dates in the "Create event" modal dialog are not operable with a keyboard. The role of the date selector controls is not programmatically determined for screen reader users. This made it difficult for keyboard-only and screen reader users to interact with the Date selector widget. Additionally, "Previous" and "Next" images are defined through CSS. 

Expected Results

Apply the following changes:

• Code the date selector control using <button> tag.
• Provide accessible names to the date selector control via the inner text of the <button> tag.
• Provide unique and descriptive labels such as “Previous month” and “Next month” for the buttons using button text or the "aria-label" attribute.
• Define the image buttons using <img> element. Alternatively, use CSS content property (with ::before and ::after pseudo-elements) to define the image.
• Add an empty alt attribute (alt="") for the image.
•  Ensure that the calendar for selecting the date is coded as dialog using appropriate ARIA roles, states and attributes.

 
Alternatively, Apply the following changes:

• Provide a date input field to allow a user to enter a date manually using the keyboard along with the date selector widget.
• To help screen reader users submit the form successfully, include the instruction about date format within the <label> tag of the date input field.
• If hidden instruction is provided, provide a unique ID attribute for the instruction text and reference it to the 'aria-describedby' attribute provide to the <input> tag.
• Provide unique and descriptive labels such as “Previous month” and “Next month” for the buttons using button text or the "aria-label" attribute.
• Define the image buttons using <img> element. Alternatively, use CSS content property (with ::before and ::after pseudo-elements) to define the image.
• Add an empty alt attribute (alt="") for the image.

 
A working example of an accessible date selector widget can be found below links:

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

Workaround

Currently, there is no known workaround for this behaviour.

Environment 

MacBook Pro (16-inch, 2019)
macOS 13.4.1 (c) (22F770820d)
Chrome - Version 115.0.5790.170 (Official Build) (x86_64)
Firefox- Version 114.0 (64-bit)
Safari- Version 16.5.2 (18615.2.9.11.10)
JAWS- Version 2023.2306.28
NVDA- Version 2022.2.2
Voiceover - Version Latest