Trap focus in topmost modal on screen readers

Close #7998

Co-authored-by: ivk <ivk@tutao.de>

src/RootView.ts

@@ -76,7 +76,7 @@ export class RootView implements ClassComponent {
 					height: "100%",
 				},
 			},
-			[m(overlay), m(modal), vnode.children],
+			[m(overlay), m(modal), m(".main-view", { inert: modal.visible }, vnode.children)],
 		)
 	}
 

src/common/gui/base/Modal.ts

@@ -4,7 +4,7 @@ import { theme } from "../theme"
 import type { Shortcut } from "../../misc/KeyManager"
 import { keyManager } from "../../misc/KeyManager"
 import { windowFacade } from "../../misc/WindowFacade"
-import { insideRect, remove } from "@tutao/tutanota-utils"
+import { insideRect, lastIndex, remove } from "@tutao/tutanota-utils"
 import { LayerType } from "../../../RootView"
 import { assertMainOrNodeBoot } from "../../api/common/Env"
 
@@ -36,12 +36,8 @@ class Modal implements Component {
 			return m(
 				"#modal.fill-absolute",
 				{
-					oncreate: (_) => {
-						// const lastComponent = last(this.components)
-						// if (lastComponent) {
-						// 	lastComponent.component.backgroundClick(e)
-						// }
-					},
+					"aria-modal": true,
+					inert: !this.visible,
 					style: {
 						"z-index": LayerType.Modal,
 						display: this.visible ? "" : "none",
@@ -52,6 +48,7 @@ class Modal implements Component {
 						".fill-absolute",
 						{
 							key: wrapper.key,
+							inert: i !== lastIndex(array),
 							oncreate: (vnode) => {
 								// do not set visible=true already in display() because it leads to modal staying open in a second window in Chrome
 								// because onbeforeremove is not called in that case to set visible=false. this is probably an optimization in Chrome to reduce