carbon
carbon copied to clipboard
Date Range not accessible through keyboard
Current behaviour
See https://carbon.sage.com/?path=/docs/experimental-date-range--default-story When navigating using keyboard, dates can't be selected using tab key.
Expected behaviour
When navigating using keyboard, a specific date can be selected.
Reproducible example
Go to https://carbon.sage.com/?path=/docs/experimental-date-range--default-story and use tab key to navigate in the page.
Suggested solution(s)
Additional context
Your environment
| Software | Version(s) |
| Browser | Google Chrome|
| Operating System | Wondows 10|
JIRA issue
https://jira.sage.com/browse/SBS-39817 https://jira.sage.com/browse/FE-4075
I have raised FE-4075 for this issue
@tempertemper Is a datepicker considered an accessible pattern? Or do we feel that just using the text input is a solution. How do we deal with the tab behaviour and guessing what the intention of the user is?
@nicktitchmarsh just to update on this - martin and ashley have put a meeting in for next week for us to discuss this issue further.
As a slight aside, do you know if this datepicker is a react plugin that we're using? Does it even support keyboard nav or would we have to modify the plugin heavily?
@ljemmo, the date picker is keyboard navigable. However at the moment we dont allow the datepicker to take focus due to one product needing to override that behaviour and set the tab ordering on the next input.
While the new date picker is being worked on by Ashley, @ljemmo, and the team, how much would break if we:
- Made the date picker keyboard navigable by default
- Added a prop so that that one product that needs to override the behaviour can continue to have it they way they've got it
My Spidey-Sense is tingling though: could you message me with details of the product that needs to override the behaviour and set the tab ordering on the next input? Sounds odd…
:tada: This issue has been resolved in version 123.4.0 :tada:
The release is available on:
Your semantic-release bot :package::rocket: