Move close into header & make sticky.

Fixes #653

Author: joedolson

src/css/reset.css

@@ -1403,18 +1403,24 @@ dialog.my-calendar-modal .my-calendar-modal__wrapper {
 }
 
 dialog.my-calendar-modal .mc-modal-title-container {
-	position: relative;
+	position: sticky;
+	top: 0;
 	margin-top: 0;
 	margin-bottom: 0;
-	padding: 16px;
+	padding: 4px 16px;
 	background: var(--highlight-light);
 	z-index: 1;
+	display: grid;
+	grid-template-columns: 1fr auto;
+	gap: 16px;
+	align-items: center;
+	border-bottom: 1px solid var(--highlight-dark);
 }
 
 dialog.my-calendar-modal #modal-title {
 	font-size: var(--modal-title);
 	margin: 0;
-	margin-right: 64px;
+	padding: 0;
 	box-sizing: border-box;
 }
 
@@ -1512,9 +1518,6 @@ body.mc-no-scroll {
   overflow: auto;
 }
 .my-calendar-modal-close {
-  position: absolute;
-  top: 3px;
-  right: 3px;
   background: var(--close-button);
   border-radius: 3px;
   color: var(--primary-light);
@@ -1525,6 +1528,9 @@ body.mc-no-scroll {
   display: flex;
   align-items: center;
   column-gap: 4px;
+  order: 1;
+  font-size: 1rem;
+  font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif
 }
 .my-calendar-modal-close:focus,
 .my-calendar-modal-close:hover,

src/js/modal/accessible-modal-window-aria.js

@@ -150,7 +150,9 @@
 	var outerContent = document.createElement( 'div' );
 	var innerContent = document.createElement( 'div' );
 	var contentContainer = document.createElement( 'div' );
+	var titleContainer = document.createElement( 'div' );
 	contentContainer.setAttribute( 'id', MODAL_CONTENT_JS_ID );
+	titleContainer.classList.add( 'mc-modal-title-container' );
 
 	var id = MODAL_JS_ID;
     var modalClassName = config.modalPrefixClass + MODAL_CLASS_SUFFIX;
@@ -159,7 +161,7 @@
     var buttonCloseInner = '<span class="' + config.modalPrefixClass + MODAL_CLOSE_TEXT_CLASS_SUFFIX + '">\n                                          ' + config.modalCloseText + '\n                                         </span>';
     var contentClassName = config.modalPrefixClass + MODAL_CONTENT_CLASS_SUFFIX;
     var titleClassName = config.modalPrefixClass + MODAL_TITLE_CLASS_SUFFIX;
-    var title = config.modalTitle !== '' ? '<div class="mc-modal-title-container"><h1 id="' + MODAL_TITLE_ID + '" class="' + titleClassName + '">\n                                          ' + config.modalTitle + '\n                                         </h1></div>' : '';
+    var title = config.modalTitle !== '' ? '<h1 id="' + MODAL_TITLE_ID + '" class="' + titleClassName + '">\n                                          ' + config.modalTitle + '\n                                         </h1>' : '';
     var button_close = '<button type="button" class="' + MODAL_BUTTON_JS_CLASS + ' ' + buttonCloseClassName + '" id="' + MODAL_BUTTON_JS_ID + '" ' + MODAL_BUTTON_CONTENT_BACK_ID + '="' + config.modalContentId + '" ' + MODAL_BUTTON_FOCUS_BACK_ID + '="' + config.modalFocusBackId + '"><span class="dashicons dashicons-no" aria-hidden="true"></span>\n                               ' + buttonCloseInner + '\n                              </button>';
     var content = config.modalText;
 
@@ -179,9 +181,10 @@
 	dialog.setAttribute( ATTR_LABELLEDBY, MODAL_TITLE_ID );
 	outerContent.setAttribute( 'role', 'document' );
 	outerContent.classList.add( modalClassWrapper );
-	outerContent.insertAdjacentHTML( 'afterBegin', button_close );
+	titleContainer.insertAdjacentHTML( 'afterBegin', title );
+	titleContainer.insertAdjacentHTML( 'afterBegin', button_close );
 	innerContent.classList.add( contentClassName );
-	innerContent.insertAdjacentHTML( 'afterBegin', title );
+	innerContent.insertAdjacentElement( 'afterbegin', titleContainer );
 	innerContent.insertAdjacentElement( 'beforeEnd', contentContainer );
 	outerContent.insertAdjacentElement( 'afterBegin', innerContent );
 	dialog.insertAdjacentElement( 'afterBegin', outerContent );