messagebox

msgbox/msgbox.css

@@ -1,3 +1,8 @@
+:root {
+  --message-box-title: hsl(170, 40%, 69%);
+  --firebrick: hsl(0, 68%, 42%);
+}
+
 #message-box {
   top: 0;
   left: 0;
@@ -5,7 +10,7 @@
   bottom: 0;
   display: flex;
   position: fixed;
-  background-color: rgba(0, 0, 0, 0.45);
+  background-color: var(--black-alpha-45);
   animation: fadein .25s ease-in-out;
   z-index: 9999990;
   -moz-user-select: none;
@@ -21,8 +26,7 @@
   position: fixed;
   display: flex;
   flex-direction: column;
-  background-color: white;
-  box-shadow: 5px 5px 50px rgba(0, 0, 0, 0.225);
+  box-shadow: 5px 5px 50px var(--black-alpha-25);
   z-index: 9999991;
   -moz-user-select: text;
 }
@@ -57,7 +61,7 @@
 
 #message-box-title {
   font-weight: bold;
-  background-color: rgb(145, 208, 198);
+  background-color: var(--message-box-title);
   padding: .75rem 24px .75rem 52px;
   font-size: 1rem;
   position: relative;
@@ -79,8 +83,8 @@
 }
 
 #message-box.danger #message-box-title {
-  background-color: firebrick;
-  color: white;
+  background-color: var(--firebrick);
+  color: var(--white);
 }
 
 #message-box.danger #message-box-title::before {
@@ -92,11 +96,11 @@
 }
 
 #message-box.danger #message-box-close-icon svg {
-  fill: maroon;
+  fill: var(--maroon);
 }
 
 #message-box.danger #message-box-close-icon svg:hover {
-  fill: #600;
+  fill: var(--darker-maroon);
 }
 
 #message-box-close-icon {
@@ -117,6 +121,7 @@
   position: relative;
   flex-grow: 9;
   overflow-wrap: break-word;
+  outline: none;
 }
 
 #message-box-contents p:first-child {
@@ -129,7 +134,6 @@
 
 #message-box-buttons {
   padding: .75rem .375rem;
-  background-color: #f0f0f0;
   text-align: center;
 }
 

msgbox/msgbox.js

@@ -34,12 +34,7 @@ function messageBox({
   document.body.appendChild(messageBox.element);
 
   messageBox.originalFocus = document.activeElement;
-  // skip external links like feedback
-  while ((moveFocus(messageBox.element, 1) || {}).target === '_blank') {/*NOP*/}
-  // suppress focus outline when invoked via click
-  if (focusAccessibility.lastFocusedViaClick && document.activeElement) {
-    document.activeElement.dataset.focusedViaClick = '';
-  }
+  moveFocus(messageBox.element, 1);
 
   if (typeof onshow === 'function') {
     onshow(messageBox.element);
@@ -112,7 +107,7 @@ function messageBox({
     const id = 'message-box';
     messageBox.element =
       $create({id, className}, [
-        $create([
+        $create('div.main-bg', [
           $create(`#${id}-title`, title),
           $create(`#${id}-close-icon`, {onclick: messageBox.listeners.closeIcon},
             $create('SVG:svg.svg-icon', {viewBox: '0 0 20 20'},
@@ -120,7 +115,7 @@ function messageBox({
                 '5.45,16.23,3.77,14.55,8.31,10,3.77,5.45,5.45,3.77,10,8.31l4.55-4.55,1.69,1.69Z',
               }))),
           $create(`#${id}-contents`, tHTML(contents)),
-          $create(`#${id}-buttons`,
+          $create(`#${id}-buttons.truegray-alpha-2`,
             buttons.map((content, buttonIndex) => content &&
               $create('button', Object.assign({
                 buttonIndex,