-
Bug
-
Resolution: Fixed
-
Low
-
8.4.0
-
Severity 3 - Minor
-
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
- Navigate to the header and activate the "Calendar" link
- Navigate to the dates and activate it
- Using the screen reader, navigate to the date selector widget in the "Start" and "End" form fields
- Try to navigate to the mentioned date selector controls
- Observe that the date selector controls are not reachable
- 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
- causes
-
CONFSERVER-96029 Time of new event is not pre-populated in Team Calendar in the week-view
- Closed
-
CONFSERVER-95992 Team Calendar Create Event: Date Picker does not recognise the language setting changes
- Gathering Impact
- followed by
-
CONFSERVER-90567 Calendar | Create Event: Time selector form field inaccessible for users
- Closed