cal.com
cal.com copied to clipboard
calcom
Keyboard navigation (a11y)
Found a bug? Please fill out the sections below. 👍
Issue Summary
Being on the availability page, when opening the copy to menu, it would not allow to naviage with keyboard. https://app.cal.com/availability
Plus, I think the accessibility could be improved.
Steps to Reproduce
- go to: https://app.cal.com/availability
- Chose a schedule
- open copy to
- try to use ONLY your keyboard to enable a button.
The copy to menu is not navigatable through keyboard:
suggestions
I tried to solve this with tabindex but did not work, here are a few links that I looked for to solve the issue but could not:
- https://web.dev/control-focus-with-tabindex/
- https://stackoverflow.com/questions/52998354/why-does-tabindex-not-work-after-first-tab-to-select-li
- https://developer.mozilla.org/en-US/docs/Web/Accessibility/Understanding_WCAG/Keyboard
@a0m0rajab there is no copy option. Can you show it through some screenshots? In this way, I can become easy to understands the issue.
We have the same issue when the tips are open:
the keyboard goes to the last card in the tips then it got to the first one, I think it should show the first one the go to the profile.
right now, it's skipping the profile.
@PeerRich I would like to inquire about the expected behavior of a keyboard in two different cases. Please find the details below:
Case 1:
-
The first checkbox should be automatically focused when the interface is loaded.
-
Users should be able to navigate through the checkboxes using the arrow keys.
Case 2:
-
Upon pressing the Tab key or arrow key, the focus should be directed to the first checkbox.
-
Once the focus is on the first checkbox, users should be able to navigate through the checkboxes using the arrow keys.
The user can able to toggle the checkbox using Enter key in both the cases.
Please tell me which case should I implement in the code. Thanks
@SksOp in either solution have you tried to check them in the code? cause I was expecting to be able to navigate with arrow keys, but I could not use any of them, in the dev env.
Yes, I was able to implement the feature in the code to get the navigation throughout the checkboxes using keyboard by pressing Tab key. But I thought some one might try to itterate using navigation key also. So I was wondering which one should I implement.
That's great! if it does not take much effort from your side, did you think to open two PRs and let peer decide on which one they prefer? (this might save time from the conversation going back and forth)
And I got curios how you implemented it.
@SksOp would not this be done with HTML or CSS without the need for extra logic?