From ab8a3692264f5991352f77003002ee69e6a57359 Mon Sep 17 00:00:00 2001
From: Pyry Koivisto <pyry.koivisto@mavericks.fi>
Date: Fri, 5 Apr 2024 15:56:39 +0300
Subject: [PATCH] SHARED(Frontend): Autofocus dialog content

Add aria-modal property to dialogs
---
 frontend/packages/shared/CHANGELOG.MD         |  6 ++++++
 frontend/packages/shared/package.json         |  2 +-
 .../src/components/Notifier/DialogBox.tsx     | 21 +++++++++++++++++++
 frontend/yarn.lock                            |  9 +++++++-
 4 files changed, 36 insertions(+), 2 deletions(-)

diff --git a/frontend/packages/shared/CHANGELOG.MD b/frontend/packages/shared/CHANGELOG.MD
index 6c3f99e0b..dc8d8ece2 100644
--- 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
index 483b74164..ea872fd27 100644
--- 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
index 3d797b559..e60e12670 100644
--- 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,7 +15,25 @@ import './DialogBox.scss';
 
 export const DialogBox = () => {
   const { activeDialog, removeDialog } = useDialog();
+  const dialogRef = useRef<HTMLDivElement>(null);
 
+  useEffect(() => {
+    if (!!activeDialog) {
+      setTimeout(() => {
+        const dialogContainer = dialogRef.current;
+
+        if (dialogContainer) {
+          const dialog = dialogContainer.querySelector('[role="dialog"]');
+          if (dialog instanceof HTMLDivElement) {
+            dialog.tabIndex = -1;
+            dialog.focus();
+          }
+
+      }
+    }, 0);
+      
+    }
+  }, [activeDialog]);
   const handleClose = () => {
     if (activeDialog?.onClose) {
       activeDialog.onClose();
@@ -37,6 +56,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/yarn.lock b/frontend/yarn.lock
index bca9f25dd..2ebfed0f0 100644
--- 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/kieli-ja-kaantajatutkinnot.shared@1.10.5":
+"@opetushallitus/kieli-ja-kaantajatutkinnot.shared@workspace:packages/shared":
   version: 0.0.0-use.local
   resolution: "@opetushallitus/kieli-ja-kaantajatutkinnot.shared@workspace:packages/shared"
   languageName: unknown
@@ -11782,6 +11782,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"shared@npm:@opetushallitus/kieli-ja-kaantajatutkinnot.shared@1.10.5":
+  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"