Merge pull request #5729 from espoon-voltti/modal-escape-key

Lisätään modaalien sulkeminen esc-näppäimellä
espoon-voltti · Sep 27, 2024 · ff03e0a · ff03e0a
2 parents 672e0c4 + a753659
commit ff03e0a
Show file tree

Hide file tree

Showing 16 changed files with 144 additions and 16 deletions.
diff --git a/frontend/package.json b/frontend/package.json
@@ -64,6 +64,7 @@
     "react-day-picker": "^9.1.2",
     "react-dom": "^18.3.1",
     "react-focus-lock": "2.13.2",
+    "react-focus-on": "^3.9.4",
     "react-image-crop": "^11.0.6",
     "react-leaflet": "^4.2.1",
     "react-router-dom": "^6.26.0",

diff --git a/frontend/src/citizen-frontend/calendar/AbsenceModal.tsx b/frontend/src/citizen-frontend/calendar/AbsenceModal.tsx
@@ -160,7 +160,7 @@ export default React.memo(function AbsenceModal({
 
   return (
     <ModalAccessibilityWrapper>
-      <PlainModal mobileFullScreen margin="auto">
+      <PlainModal mobileFullScreen margin="auto" onEscapeKey={close}>
         <CalendarModalBackground>
           <BottomFooterContainer>
             <div>

diff --git a/frontend/src/citizen-frontend/calendar/DayView.tsx b/frontend/src/citizen-frontend/calendar/DayView.tsx
@@ -424,6 +424,7 @@ const DayModal = React.memo(function DayModal({
         mobileFullScreen
         data-qa="calendar-dayview"
         zIndex={100}
+        onEscapeKey={onClose}
       >
         <CalendarModalBackground>
           <BottomFooterContainer>

diff --git a/frontend/src/citizen-frontend/calendar/ReservationModal.tsx b/frontend/src/citizen-frontend/calendar/ReservationModal.tsx
@@ -193,7 +193,12 @@ export default React.memo(function ReservationModal({
 
   return (
     <ModalAccessibilityWrapper>
-      <PlainModal mobileFullScreen margin="auto" data-qa="reservation-modal">
+      <PlainModal
+        mobileFullScreen
+        margin="auto"
+        data-qa="reservation-modal"
+        onEscapeKey={onClose}
+      >
         <CalendarModalBackground>
           <BottomFooterContainer>
             <div>

diff --git a/...src/citizen-frontend/calendar/discussion-reservation-modal/DiscussionReservationModal.tsx b/...src/citizen-frontend/calendar/discussion-reservation-modal/DiscussionReservationModal.tsx
@@ -152,6 +152,7 @@ export default React.memo(function DiscussionReservationModal({
         mobileFullScreen
         margin="auto"
         data-qa="discussion-reservations-modal"
+        onEscapeKey={close}
       >
         <CalendarModalBackground>
           <BottomFooterContainer>

diff --git a/...tend/src/citizen-frontend/calendar/discussion-reservation-modal/DiscussionSurveyModal.tsx b/...tend/src/citizen-frontend/calendar/discussion-reservation-modal/DiscussionSurveyModal.tsx
@@ -167,6 +167,7 @@ export default React.memo(function DiscussionSurveyModal({
         margin="auto"
         zIndex={100}
         data-qa="discussions-modal"
+        onEscapeKey={close}
       >
         <CalendarModalBackground>
           <div>

diff --git a/...en-frontend/children/sections/service-need-and-daily-service-time/ServiceApplications.tsx b/...en-frontend/children/sections/service-need-and-daily-service-time/ServiceApplications.tsx
@@ -315,6 +315,7 @@ const ServiceApplicationsDetails = React.memo(
           mobileFullScreen
           margin="auto"
           data-qa="service-application-modal"
+          onEscapeKey={onClose}
         >
           <CalendarModalBackground>
             <CalendarModalSection>

diff --git a/frontend/src/employee-frontend/components/unit/tab-groups/notes/NotesModal.tsx b/frontend/src/employee-frontend/components/unit/tab-groups/notes/NotesModal.tsx
@@ -233,7 +233,7 @@ export default React.memo(function NotesModal({
   )
 
   return (
-    <PlainModal margin={`${defaultMargins.XL} auto`}>
+    <PlainModal margin={`${defaultMargins.XL} auto`} onEscapeKey={onClose}>
       <HeaderContainer>
         <Tabs>{tabs}</Tabs>
         <CloseContainer>

diff --git a/...nd/src/employee-frontend/components/unit/tab-unit-information/DaycareAclAdditionModal.tsx b/...nd/src/employee-frontend/components/unit/tab-unit-information/DaycareAclAdditionModal.tsx
@@ -162,7 +162,11 @@ export default React.memo(function DaycareAclAdditionModal({
       pinCodeIsValid)
 
   return (
-    <PlainModal margin="auto" data-qa="add-daycare-acl-modal">
+    <PlainModal
+      margin="auto"
+      data-qa="add-daycare-acl-modal"
+      onEscapeKey={onClose}
+    >
       <Content>
         <Centered>
           <H1 noMargin>{i18n.unit.accessControl.addDaycareAclModal.title}</H1>

diff --git a/...nd/src/employee-frontend/components/unit/tab-unit-information/EmployeeAclRowEditModal.tsx b/...nd/src/employee-frontend/components/unit/tab-unit-information/EmployeeAclRowEditModal.tsx
@@ -79,7 +79,11 @@ export default React.memo(function EmployeeAclRowEditModal({
   )
 
   return (
-    <PlainModal margin="auto" data-qa="employee-row-edit-person-modal">
+    <PlainModal
+      margin="auto"
+      data-qa="employee-row-edit-person-modal"
+      onEscapeKey={props.onClose}
+    >
       <Content>
         <Centered>
           <H1 noMargin>{i18n.unit.accessControl.editEmployeeRowModal.title}</H1>

diff --git a/...d/src/employee-frontend/components/unit/unit-reservations/StaffAttendanceDetailsModal.tsx b/...d/src/employee-frontend/components/unit/unit-reservations/StaffAttendanceDetailsModal.tsx
@@ -363,7 +363,11 @@ function StaffAttendanceDetailsModal<
     !!openAttendance && openAttendance.unitId !== unitId
 
   return (
-    <PlainModal margin="auto" data-qa="staff-attendance-details-modal">
+    <PlainModal
+      margin="auto"
+      data-qa="staff-attendance-details-modal"
+      onEscapeKey={onClose}
+    >
       <Content>
         <FixedSpaceRow alignItems="center">
           <H1 noMargin>{date.formatExotic('EEEEEE d.M.yyyy')}</H1>

diff --git a/...mployee-frontend/components/unit/unit-reservations/StaffAttendanceExternalPersonModal.tsx b/...mployee-frontend/components/unit/unit-reservations/StaffAttendanceExternalPersonModal.tsx
@@ -176,7 +176,11 @@ export default React.memo(function StaffAttendanceExternalPersonModal({
   const hasStaffOccupancyEffect = useFormField(form, 'hasStaffOccupancyEffect')
 
   return (
-    <PlainModal margin="auto" data-qa="staff-attendance-add-person-modal">
+    <PlainModal
+      margin="auto"
+      data-qa="staff-attendance-add-person-modal"
+      onEscapeKey={onClose}
+    >
       <Content>
         <Centered>
           <IconWrapper>

diff --git a/frontend/src/lib-components/molecules/date-picker/DatePickerLowLevel.tsx b/frontend/src/lib-components/molecules/date-picker/DatePickerLowLevel.tsx
@@ -153,6 +153,7 @@ export default React.memo(function DatePickerLowLevel({
   const handleUserKeyPress = useCallback(
     (e: React.KeyboardEvent) => {
       if (e.key === 'Esc' || e.key === 'Escape' || e.key === 'Enter') {
+        e.stopPropagation()
         showDatePickerOff()
       }
     },

diff --git a/frontend/src/lib-components/molecules/modals/BaseModal.tsx b/frontend/src/lib-components/molecules/modals/BaseModal.tsx
@@ -39,7 +39,7 @@ interface Props extends ModalBaseProps {
 
 export default React.memo(function BaseModal(props: Props) {
   return (
-    <ModalBackground zIndex={props.zIndex}>
+    <ModalBackground zIndex={props.zIndex} onEscapeKey={props.close}>
       <ModalWrapper
         className={props.className}
         zIndex={props.zIndex}
@@ -229,13 +229,14 @@ type PlainModalProps = Pick<
   'className' | 'zIndex' | 'data-qa' | 'mobileFullScreen' | 'children'
 > & {
   margin: string
+  onEscapeKey?: () => void
 }
 
 export const PlainModal = React.memo(function PlainModal(
   props: PlainModalProps
 ) {
   return (
-    <ModalBackground>
+    <ModalBackground onEscapeKey={props.onEscapeKey}>
       <StaticallyPositionedModal
         className={props.className}
         zIndex={props.zIndex}

diff --git a/frontend/src/lib-components/molecules/modals/ModalBackground.tsx b/frontend/src/lib-components/molecules/modals/ModalBackground.tsx
@@ -3,7 +3,7 @@
 // SPDX-License-Identifier: LGPL-2.1-or-later
 
 import React, { ReactNode } from 'react'
-import FocusLock from 'react-focus-lock'
+import { FocusOn } from 'react-focus-on'
 import styled from 'styled-components'
 
 import { modalZIndex } from '../../layout/z-helpers'
@@ -15,18 +15,20 @@ interface Props extends ZIndexProp {
 interface ZIndexProp {
   onClick?: () => void
   zIndex?: number
+  onEscapeKey?: () => void
 }
 
 export default React.memo(function ModalBackground({
   onClick,
   zIndex,
+  onEscapeKey,
   children
 }: Props) {
   return (
-    <FocusLock>
+    <FocusOn onEscapeKey={onEscapeKey}>
       <BackgroundOverlay zIndex={zIndex} onClick={onClick} />
       <FormModalLifter zIndex={zIndex}>{children}</FormModalLifter>
-    </FocusLock>
+    </FocusOn>
   )
 })
 

diff --git a/frontend/yarn.lock b/frontend/yarn.lock
@@ -4616,6 +4616,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"aria-hidden@npm:^1.2.2":
+  version: 1.2.4
+  resolution: "aria-hidden@npm:1.2.4"
+  dependencies:
+    tslib: "npm:^2.0.0"
+  checksum: 10/df4bc15423aaaba3729a7d40abcbf6d3fffa5b8fd5eb33d3ac8b7da0110c47552fca60d97f2e1edfbb68a27cae1da499f1c3896966efb3e26aac4e3b57e3cc8b
+  languageName: node
+  linkType: hard
+
 "aria-query@npm:5.3.0, aria-query@npm:^5.0.0":
   version: 5.3.0
   resolution: "aria-query@npm:5.3.0"
@@ -6926,6 +6935,7 @@ __metadata:
     react-day-picker: "npm:^9.1.2"
     react-dom: "npm:^18.3.1"
     react-focus-lock: "npm:2.13.2"
+    react-focus-on: "npm:^3.9.4"
     react-image-crop: "npm:^11.0.6"
     react-leaflet: "npm:^4.2.1"
     react-router-dom: "npm:^6.26.0"
@@ -7403,6 +7413,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"get-nonce@npm:^1.0.0":
+  version: 1.0.1
+  resolution: "get-nonce@npm:1.0.1"
+  checksum: 10/ad5104871d114a694ecc506a2d406e2331beccb961fe1e110dc25556b38bcdbf399a823a8a375976cd8889668156a9561e12ebe3fa6a4c6ba169c8466c2ff868
+  languageName: node
+  linkType: hard
+
 "get-package-type@npm:^0.1.0":
   version: 0.1.0
   resolution: "get-package-type@npm:0.1.0"
@@ -7918,6 +7935,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"invariant@npm:^2.2.4":
+  version: 2.2.4
+  resolution: "invariant@npm:2.2.4"
+  dependencies:
+    loose-envify: "npm:^1.0.0"
+  checksum: 10/cc3182d793aad82a8d1f0af697b462939cb46066ec48bbf1707c150ad5fad6406137e91a262022c269702e01621f35ef60269f6c0d7fd178487959809acdfb14
+  languageName: node
+  linkType: hard
+
 "ip@npm:^1.1.5":
   version: 1.1.9
   resolution: "ip@npm:1.1.9"
@@ -9175,7 +9201,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"loose-envify@npm:^1.1.0, loose-envify@npm:^1.4.0":
+"loose-envify@npm:^1.0.0, loose-envify@npm:^1.1.0, loose-envify@npm:^1.4.0":
   version: 1.4.0
   resolution: "loose-envify@npm:1.4.0"
   dependencies:
@@ -10940,7 +10966,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"react-focus-lock@npm:2.13.2":
+"react-focus-lock@npm:2.13.2, react-focus-lock@npm:^2.11.3":
   version: 2.13.2
   resolution: "react-focus-lock@npm:2.13.2"
   dependencies:
@@ -10960,6 +10986,26 @@ __metadata:
   languageName: node
   linkType: hard
 
+"react-focus-on@npm:^3.9.4":
+  version: 3.9.4
+  resolution: "react-focus-on@npm:3.9.4"
+  dependencies:
+    aria-hidden: "npm:^1.2.2"
+    react-focus-lock: "npm:^2.11.3"
+    react-remove-scroll: "npm:^2.6.0"
+    react-style-singleton: "npm:^2.2.1"
+    tslib: "npm:^2.3.1"
+    use-sidecar: "npm:^1.1.2"
+  peerDependencies:
+    "@types/react": ^16.8.0 || ^17.0.0 || ^18.0.0
+    react: ^16.8.0 || ^17.0.0 || ^18.0.0
+  peerDependenciesMeta:
+    "@types/react":
+      optional: true
+  checksum: 10/c9bd12a8eac28fea2f3f5ad89e33903ff9b5fa427b0e5eda5f6319393247590eadd5bc702b509ef6a10dc6ffa573059cf4fb5fda89c6fa724b77aa2196107722
+  languageName: node
+  linkType: hard
+
 "react-image-crop@npm:^11.0.6":
   version: 11.0.6
   resolution: "react-image-crop@npm:11.0.6"
@@ -11013,6 +11059,41 @@ __metadata:
   languageName: node
   linkType: hard
 
+"react-remove-scroll-bar@npm:^2.3.6":
+  version: 2.3.6
+  resolution: "react-remove-scroll-bar@npm:2.3.6"
+  dependencies:
+    react-style-singleton: "npm:^2.2.1"
+    tslib: "npm:^2.0.0"
+  peerDependencies:
+    "@types/react": ^16.8.0 || ^17.0.0 || ^18.0.0
+    react: ^16.8.0 || ^17.0.0 || ^18.0.0
+  peerDependenciesMeta:
+    "@types/react":
+      optional: true
+  checksum: 10/5ab8eda61d5b10825447d11e9c824486c929351a471457c22452caa19b6898e18c3af6a46c3fa68010c713baed1eb9956106d068b4a1058bdcf97a1a9bbed734
+  languageName: node
+  linkType: hard
+
+"react-remove-scroll@npm:^2.6.0":
+  version: 2.6.0
+  resolution: "react-remove-scroll@npm:2.6.0"
+  dependencies:
+    react-remove-scroll-bar: "npm:^2.3.6"
+    react-style-singleton: "npm:^2.2.1"
+    tslib: "npm:^2.1.0"
+    use-callback-ref: "npm:^1.3.0"
+    use-sidecar: "npm:^1.1.2"
+  peerDependencies:
+    "@types/react": ^16.8.0 || ^17.0.0 || ^18.0.0
+    react: ^16.8.0 || ^17.0.0 || ^18.0.0
+  peerDependenciesMeta:
+    "@types/react":
+      optional: true
+  checksum: 10/9fac79e1c2ed2c85729bfe82f61ef4ae5ce51f478736a13892a9a11e05cbd4e9599f9f0e012cb5fc0719e18dc1dd687ab61f516193228615df636db8b851245e
+  languageName: node
+  linkType: hard
+
 "react-router-dom@npm:^6.26.0":
   version: 6.26.0
   resolution: "react-router-dom@npm:6.26.0"
@@ -11057,6 +11138,23 @@ __metadata:
   languageName: node
   linkType: hard
 
+"react-style-singleton@npm:^2.2.1":
+  version: 2.2.1
+  resolution: "react-style-singleton@npm:2.2.1"
+  dependencies:
+    get-nonce: "npm:^1.0.0"
+    invariant: "npm:^2.2.4"
+    tslib: "npm:^2.0.0"
+  peerDependencies:
+    "@types/react": ^16.8.0 || ^17.0.0 || ^18.0.0
+    react: ^16.8.0 || ^17.0.0 || ^18.0.0
+  peerDependenciesMeta:
+    "@types/react":
+      optional: true
+  checksum: 10/80c58fd6aac3594e351e2e7b048d8a5b09508adb21031a38b3c40911fe58295572eddc640d4b20a7be364842c8ed1120fe30097e22ea055316b375b88d4ff02a
+  languageName: node
+  linkType: hard
+
 "react-transition-group@npm:^4.3.0":
   version: 4.4.1
   resolution: "react-transition-group@npm:4.4.1"
@@ -12296,7 +12394,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"tslib@npm:^2.0.0, tslib@npm:^2.0.3, tslib@npm:^2.1.0, tslib@npm:^2.5.0, tslib@npm:^2.6.2, tslib@npm:^2.7.0":
+"tslib@npm:^2.0.0, tslib@npm:^2.0.3, tslib@npm:^2.1.0, tslib@npm:^2.3.1, tslib@npm:^2.5.0, tslib@npm:^2.6.2, tslib@npm:^2.7.0":
   version: 2.7.0
   resolution: "tslib@npm:2.7.0"
   checksum: 10/9a5b47ddac65874fa011c20ff76db69f97cf90c78cff5934799ab8894a5342db2d17b4e7613a087046bc1d133d21547ddff87ac558abeec31ffa929c88b7fce6
@@ -12576,7 +12674,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"use-callback-ref@npm:^1.3.2":
+"use-callback-ref@npm:^1.3.0, use-callback-ref@npm:^1.3.2":
   version: 1.3.2
   resolution: "use-callback-ref@npm:1.3.2"
   dependencies: