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

Modal focus trapping #172

Merged
merged 46 commits into from
Feb 19, 2024
Merged

Modal focus trapping #172

merged 46 commits into from
Feb 19, 2024

Conversation

susulone
Copy link
Collaborator

Modal:

  • trap focus inside modal
  • fix height issues when content is long

SubModal:

  • trap focus inside modal
  • change min-w-[400px] to only apply with larger screens
  • fix height issues when content is long

DeleteModal:

  • trap focus inside modal

CalendarEventModal:

  • trap focus inside modal

KanbanTask:

  • trap focus inside modal

IconButton:

  • fix sizing issues when only icon is displayed

LabelModal:

  • make checkbox focusable and selectable with keyboard

susulone and others added 30 commits February 15, 2024 11:20
@susulone
Modal: remove unnecessary comments
af25cc4
@susulone
Modal: remove dialog from the tab index
f714f26
@susulone
Modal: give all focusable children a tab index and make them loop
6e69ae9
@susulone
DeleteModal: Remove dialog from the tab index. Give all focusable chi…
f2b0a5e 
…ldren a tab index and make them loop. Add event listener to be able to close modal with esc.
@susulone
DeleteModal: add aria label to close modal button
22bd3de
@susulone
SubModal: Remove dialog from the tab index. Give all focusable childr…
6999140 
…en a tab index and make them loop. Add event listener to be able to close modal with esc.
@susulone
SubModal: add aria labels for icon buttons
d687b7b
@susulone
SubModal: wrap closeAllModals with use callback hook
a7544da
@susulone
Modal: remove aria modal
0440a06
@susulone
CreateLabelModal: change import to import type
44901bd
@TTyni
changed modal to close on mouse dow
110c246
@bkruotsalainen @susulone
Frontend: Kanban column polish (#167)
952b9cc 
* Polish kanban column layout

* Fix button position

* Add padding to show full outline

* Change height to avoid column warping on drag

* Fix height

* Adjust task positions
@bkruotsalainen @susulone
Add missing tabIndex and onKeyDown to TaskMemberItem (#168)
06a1581
@TTyni @susulone
Password update validation (#166)
eef6b3c 
* removed couple comments and added backend password update validation

* Type fix

* fixes
@susulone
KanbanTask: Remove dialog from the tab index. Give all focusable chil…
9528984 
…dren a tab index and make them loop. Add event listener to be able to close modal with esc and add aria label for the close task button.
@susulone
CreateLabelModal: add autofocus for the input field
a626b61
@susulone
EditLabelModal: add autofocus for the input field
1c3c904
@susulone
KanbanTask: change closing the task modal to onMouseDown
3b33eb5
@susulone
SubModal: change closing the modal to onMouseDown
09f3afc
@susulone
IconButton: fix sizing issues when only icon is displayed
9286417
@susulone
LabelModal: make checkbox focusable and selectable with keyboard
ce7280d
@susulone
LabelModal: refactor code to be able to select the task by clicking t…
7cae87a 
…he task name also
@susulone
SubModal: change min-w-[400px] to only apply with larger screens
b4e6bf6
@susulone
LabelModal: give label modal a max height and give overflow a scroll
0003f0f
@susulone
TaskMembersModal: give modal a max height and set overflow to scroll
74dfa4f
@susulone
Modal: remove unnecessary styling from the dialog and change overflow…
9a6a9bd 
… to hidden
@susulone
ProjectMembersModal: give div a max height and set overflow to auto
59ca4d1
@susulone
SubModal: remove unnecessary styling from the dialog
3eada3a
@susulone
DeleteEventModal: refactor button to enable better styling
462e414
@susulone
CalendarEventModal: Remove dialog from the tab index. Give all focusa…
940f3c8 
…ble children a tab index and make them loop. Add listener to be able to close modal with esc and add aria label for the close modal button.
@bkruotsalainen bkruotsalainen self-requested a review February 16, 2024 13:49
susulone and others added 16 commits February 19, 2024 09:59
@susulone
make suggested fixes to LabelModal and TaskMemberItem
8d6eff3
@susulone
fix overflow issues in horizontal mobile screens
dc0a833
@susulone
fix overflow issues in horizontal mobile screens
7eb768f
@susulone
DeleteModal: fix issues on vertical mobile screen
dd1727f
@susulone
fix overflow issues in horizontal mobile screens (Modal)
971a9cb
@Moiman @susulone
frontend: pass only required events to eventmodal
76bcace
@Moiman @susulone
frontend: calendar change from y.array to y.map
0aaaed1
@Moiman @susulone
frontend: increase event maxlength (#170)
c564bb6
@Moiman @susulone
frontend: invalidate projects cache on userUpdate
7ffcbc0
@Moiman @susulone
frontend: update backend url
d2a3529
@bkruotsalainen @susulone
Frontend: Polish kanban task (#173)
b78c750 
* Polish kanban task

* Fix disappearing members

* Change member limits

* Scale kanban deadline buttons

* Add suggested fixes
@susulone
KanbanTask: Remove dialog from the tab index. Give all focusable chil…
c580bdc 
…dren a tab index and make them loop. Add event listener to be able to close modal with esc and add aria label for the close task button.
@susulone
KanbanTask: fix deadline label styling
c1b6003
@susulone
Modal: change overflow-y-hidden to auto
6c026ad
@susulone
ProjectMembersModal: change max height
5c1587f
@susulone
Merge branch 'main' into modal-focus-trapping
de54364
@Moiman Moiman merged commit 4b21643 into main Feb 19, 2024
5 checks passed
@Moiman Moiman deleted the modal-focus-trapping branch February 19, 2024 13:06
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@bkruotsalainen bkruotsalainen bkruotsalainen left review comments

Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.
4 participants
@susulone @bkruotsalainen @Moiman @TTyni