Some style, accessibility and sematic html updates to modal sub components (#19034)

ui/components/component-library/modal-header/__snapshots__/modal-header.test.tsx.snap

@@ -9,11 +9,11 @@ exports[`ModalHeader should render ModalHeader correctly 1`] = `
     <div
       class="box box--flex-direction-row box--width-full"
     >
-      <h4
+      <header
         class="box mm-text mm-text--heading-sm mm-text--text-align-center box--flex-direction-row box--color-text-default"
       >
         Modal header
-      </h4>
+      </header>
     </div>
   </div>
 </div>

ui/components/component-library/modal-header/modal-header.tsx

@@ -1,6 +1,13 @@
 import React from 'react';
 import classnames from 'classnames';
-import { HeaderBase, Text, ButtonIcon, ButtonIconSize, IconName } from '..';
+import {
+  HeaderBase,
+  Text,
+  ButtonIcon,
+  ButtonIconSize,
+  IconName,
+  ValidTag,
+} from '..';
 import {
   TextVariant,
   TextAlign,
@@ -50,7 +57,11 @@ export const ModalHeader: React.FC<ModalHeaderProps> = ({
       {...props}
     >
       {typeof children === 'string' ? (
-        <Text variant={TextVariant.headingSm} textAlign={TextAlign.Center}>
+        <Text
+          as={ValidTag.Header}
+          variant={TextVariant.headingSm}
+          textAlign={TextAlign.Center}
+        >
           {children}
         </Text>
       ) : (

ui/components/component-library/modal-overlay/__snapshots__/modal-overlay.test.tsx.snap

@@ -3,6 +3,7 @@
 exports[`ModalOverlay should match snapshot 1`] = `
 <div>
   <div
+    aria-hidden="true"
     class="box mm-modal-overlay box--flex-direction-row box--width-full box--height-full box--background-color-overlay-default"
   />
 </div>

ui/components/component-library/modal-overlay/modal-overlay.scss

@@ -1,7 +1,8 @@
 .mm-modal-overlay {
-  position: absolute;
+  position: fixed;
   top: 0;
   left: 0;
   right: 0;
   bottom: 0;
+  z-index: $modal-z-index;
 }

ui/components/component-library/modal-overlay/modal-overlay.tsx

@@ -21,6 +21,7 @@ export const ModalOverlay: React.FC<ModalOverlayProps> = ({
     width={BLOCK_SIZES.FULL}
     height={BLOCK_SIZES.FULL}
     onClick={onClick}
+    aria-hidden="true"
     {...props}
   />
 );

ui/components/component-library/text/text.types.ts

@@ -41,6 +41,7 @@ export enum ValidTag {
   Ul = 'ul',
   Label = 'label',
   Input = 'input',
+  Header = 'header',
 }
 
 export interface TextProps extends BoxProps {

ui/components/ui/popover/index.scss

@@ -51,7 +51,7 @@
     display: flex;
     justify-content: center;
     align-items: center;
-    z-index: 1050;
+    z-index: $modal-z-index;
   }
 
   &-footer {

ui/css/design-system/z-index.scss

@@ -10,3 +10,4 @@ $main-container-z-index: 18;
 $send-card-z-index: 20;
 $sidebar-z-index: 26;
 $sidebar-overlay-z-index: 25;
+$modal-z-index: 1050;