Merge pull request #668 from Opetushallitus/feature/OPHKIOS-55

SHARED:AKR:OTR:VKT:YKI(Frontend): OPHKIOS-55 Saavutettavampi modaali
Opetushallitus · Apr 19, 2024 · ce3aaab · ce3aaab
2 parents e29d743 + 08771b7
commit ce3aaab
Show file tree

Hide file tree

Showing 5 changed files with 34 additions and 4 deletions.
diff --git a/frontend/packages/shared/CHANGELOG.MD b/frontend/packages/shared/CHANGELOG.MD
@@ -9,6 +9,12 @@ and this project adheres to [Semantic Versioning](http://semver.org/).
 
 ## [Released]
 
+## [1.10.6] - 2024-04-05
+
+### Fixed
+- Dialog content is focused on open
+- Added aria-model=true attribute to dialogs
+
 ## [1.10.5] - 2024-02-28
 
 ### Fixed

diff --git a/frontend/packages/shared/package.json b/frontend/packages/shared/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@opetushallitus/kieli-ja-kaantajatutkinnot.shared",
-  "version": "1.10.5",
+  "version": "1.10.6",
   "description": "Shared Frontend Package",
   "exports": {
     "./components": "./src/components/index.tsx",

diff --git a/frontend/packages/shared/src/components/Notifier/DialogBox.tsx b/frontend/packages/shared/src/components/Notifier/DialogBox.tsx
@@ -5,6 +5,7 @@ import {
   DialogTitle,
 } from '@mui/material';
 
+import { useEffect, useRef } from 'react';
 import { Color } from '../../enums';
 import { useDialog } from '../../hooks/useDialog/useDialog';
 import { CustomButton } from '../CustomButton/CustomButton';
@@ -14,6 +15,20 @@ import './DialogBox.scss';
 
 export const DialogBox = () => {
   const { activeDialog, removeDialog } = useDialog();
+  const dialogRef = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    if (activeDialog) {
+        const dialogContainer = dialogRef.current;
+
+        if (dialogContainer) {
+          const dialog = dialogContainer.querySelector('[role="dialog"]');
+          if (dialog instanceof HTMLDivElement) {
+            dialog.focus();
+          }
+      }
+    }
+  }, [activeDialog]);
 
   const handleClose = () => {
     if (activeDialog?.onClose) {
@@ -37,6 +52,8 @@ export const DialogBox = () => {
           className={`dialog-box--${activeDialog.severity}`}
           open={!!activeDialog}
           onClose={handleClose}
+          PaperProps={{ 'aria-modal': true }}
+          ref={dialogRef}
         >
           <DialogTitle>{activeDialog.title}</DialogTitle>
           <DialogContent>

diff --git a/frontend/packages/yki/package.json b/frontend/packages/yki/package.json
@@ -26,7 +26,7 @@
     "yki:tslint": "yarn g:tsc --pretty --noEmit"
   },
   "dependencies": {
-    "shared": "npm:@opetushallitus/[email protected].5"
+    "shared": "npm:@opetushallitus/[email protected].6"
   },
   "devDependencies": {
     "multer": "^1.4.5-lts.1"

diff --git a/frontend/yarn.lock b/frontend/yarn.lock
@@ -2687,7 +2687,7 @@ __metadata:
   languageName: unknown
   linkType: soft
 
-"@opetushallitus/kieli-ja-kaantajatutkinnot.shared@workspace:packages/shared, shared@npm:@opetushallitus/[email protected].5":
+"@opetushallitus/kieli-ja-kaantajatutkinnot.shared@workspace:packages/shared, shared@npm:@opetushallitus/[email protected].6":
   version: 0.0.0-use.local
   resolution: "@opetushallitus/kieli-ja-kaantajatutkinnot.shared@workspace:packages/shared"
   languageName: unknown
@@ -2707,7 +2707,7 @@ __metadata:
   resolution: "@opetushallitus/kieli-ja-kaantajatutkinnot.yki@workspace:packages/yki"
   dependencies:
     multer: "npm:^1.4.5-lts.1"
-    shared: "npm:@opetushallitus/[email protected].5"
+    shared: "npm:@opetushallitus/[email protected].6"
   languageName: unknown
   linkType: soft
 
@@ -11782,6 +11782,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"shared@npm:@opetushallitus/[email protected]":
+  version: 1.10.5
+  resolution: "@opetushallitus/kieli-ja-kaantajatutkinnot.shared@npm:1.10.5::__archiveUrl=https%3A%2F%2Fnpm.pkg.github.com%2Fdownload%2F%40Opetushallitus%2Fkieli-ja-kaantajatutkinnot.shared%2F1.10.5%2F736504f381897a96e9daf6074d8151b47799e1c4"
+  checksum: 6b33f891bd704b1a1cb0100de73e9b7494acdabe11afda67d3938755bc3c88aec56f33a52e1df38a2fd3af0f9d1929004cf2b84c0481425e3c25500aca889724
+  languageName: node
+  linkType: hard
+
 "shebang-command@npm:^2.0.0":
   version: 2.0.0
   resolution: "shebang-command@npm:2.0.0"