Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Make the calendar navigatable by keyboard #6870

Closed
19 of 23 tasks
rezbyte opened this issue Apr 19, 2024 · 3 comments · Fixed by #6885
Closed
19 of 23 tasks

Make the calendar navigatable by keyboard #6870

rezbyte opened this issue Apr 19, 2024 · 3 comments · Fixed by #6885
Labels
a11y Accessibility related problems improvement nice-to-haves that are not impeding usage of any features state:done meets our definition of done state:tested-with-comments Issue has been tested but some issues were found and needs review. topic: calendar
Milestone
230.240528.0

Comments

@rezbyte
Copy link
Contributor

rezbyte commented Apr 19, 2024 •
edited by murilopereirame

As of writing, it is not possible to use the calendar via keyboard alone because the agenda, day, week and months views need keyboard controls to focus events. I have devised an amendment to the control scheme that is based off several other email clients and our own behaviour in different pages.

All views:

  • Pressing tab should focus the next event.
  • Pressing shift + tab should focus the previous event.
  • Pressing home should scroll the view the top.
  • Pressing end should scroll the view the bottom.
  • Pressing the left arrow should open the previous interval (month/week/day).
  • Pressing the right arrow should open the next interval.
  • Pressing delete on a focused event should delete the event.

Agenda view:

  • Pressing enter on a focused event should select the focused event.
  • Pressing the up arrow should select the previous event, showing it's details in the details column outside of single-column view and just focusing it in single-column view..
  • Pressing the down arrow should select the next event.

Day and week views:

  • Pressing enter on a focused event should open and focus the details dialog.
  • Pressing the up arrow should scroll the view up.
  • Pressing the down arrow should scroll the view down.
  • Pressing page-up should scroll the view until the previous screen-full of content.
  • Pressing page-down should scroll the view until the next screen-full of content.

Test notes

  • On Web/Desktop
    • Try the controls listed above in three column layout
    • Try the controls listed above in single column layout
    • Pressing a scroll key (home etc.) while an event is focused works
    • All modals opened when interacting with an event are focused
    • The views still scroll to the current time when today is selected
  • On mobile
    • Next and previous events lists are still aligned when swiping
@rezbyte rezbyte added improvement nice-to-haves that are not impeding usage of any features a11y Accessibility related problems topic: calendar labels Apr 19, 2024
@rezbyte rezbyte self-assigned this Apr 19, 2024
@rezbyte rezbyte mentioned this issue Apr 25, 2024
Merged
@wrdhub wrdhub added the state:done meets our definition of done label May 8, 2024
@kib42 kib42 added this to the Notifications milestone May 21, 2024
@murilopereirame murilopereirame self-assigned this May 27, 2024
@murilopereirame
Copy link
Contributor

murilopereirame commented May 27, 2024 •
edited

Web/Desktop:

  • 3 Columns - Day/Week and Month views the tabbing starts on the past day/week/month
  • 1 Column layout - Month view start on the past month
  • To use the arrows left/right, I need to do an extra tab, probably is focusing on past day/week/month first

@murilopereirame murilopereirame added the state:tested-with-comments Issue has been tested but some issues were found and needs review. label May 27, 2024
@murilopereirame murilopereirame removed their assignment May 27, 2024
@rezbyte
Copy link
Contributor Author

rezbyte commented May 28, 2024

Web/Desktop:

* 3 Columns - Day/Week and Month views the tabbing starts on the past day/week/month

Ah, I thought this was fixed by 66a04ae but I can reproduce this. I will work on a fix for it today.

* 1 Column layout - Month view start on the past month

I am having a bit of trouble reproducing this. The month view starts on the right month with the correct dates for me. There are probably additional steps needed.

* To use the arrows left/right, I need to do an extra tab, probably is focusing on past day/week/month first

I can reproduce this too. This seems to be a regression as it worked in the original PR. I will fix this too.

@rezbyte rezbyte mentioned this issue May 28, 2024
Open
2 tasks
@murilopereirame
Copy link
Contributor

Web/Desktop:

* 3 Columns - Day/Week and Month views the tabbing starts on the past day/week/month

Ah, I thought this was fixed by 66a04ae but I can reproduce this. I will work on a fix for it today.

* 1 Column layout - Month view start on the past month

I am having a bit of trouble reproducing this. The month view starts on the right month with the correct dates for me. There are probably additional steps needed.

* To use the arrows left/right, I need to do an extra tab, probably is focusing on past day/week/month first

I can reproduce this too. This seems to be a regression as it worked in the original PR. I will fix this too.

About the single column layout, sorry, totally my bad. I wasn't clear, the tab starts on the previous month, the dates are fine. Sorry again for the confusion

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
a11y Accessibility related problems improvement nice-to-haves that are not impeding usage of any features state:done meets our definition of done state:tested-with-comments Issue has been tested but some issues were found and needs review. topic: calendar
Projects
None yet
Milestone
230.240528.0
Development

Successfully merging a pull request may close this issue.

Add keyboard controls to the calendar tutao/tutanota
4 participants
@murilopereirame @rezbyte @kib42 @wrdhub