@stackoverflow/stacks 2.8.2 → 2.8.4

package/lib/components/modal/modal.ts

@@ -225,13 +225,14 @@ export class ModalController extends Stacks.StacksController {
         this.modalTarget.addEventListener(
             "s-modal:shown",
             () => {
-                const initialFocus =
-                    this.firstVisible(this.initialFocusTargets) ??
-                    this.firstVisible(this.getAllTabbables());
-
                 // Only set focus if focus is not already set on an element within the modal
                 if (!this.modalTarget.contains(document.activeElement)) {
-                    initialFocus?.focus();
+                    const initialFocus =
+                        this.firstVisible(this.initialFocusTargets) ??
+                        this.firstVisible(this.getAllTabbables()) ??
+                        this.modalTarget; //If there's nothing else, focus the modal itself
+
+                    initialFocus.focus();
                 }
             },
             { once: true }
@@ -242,9 +243,21 @@ export class ModalController extends Stacks.StacksController {
      * Returns keyboard focus to the modal if it has left or is about to leave.
      */
     private keepFocusWithinModal(e: KeyboardEvent) {
-        // If somehow the user has tabbed out of the modal or if focus started outside the modal, push them to the first item.
+        if (e.key !== "Tab") {
+            return;
+        }
+
+        //Tab key was pressed, figure out what to focus next
+        const tabbables = this.getAllTabbables();
+        if (tabbables.length === 0) {
+            // Nothing focusable found in the modal. Stop the user from tabbing to something outside the modal
+            e.preventDefault();
+            return;
+        }
+
+        // If somehow the user has tabbed out of the modal, push them to the first item.
         if (!this.modalTarget.contains(<Element>e.target)) {
-            const focusTarget = this.firstVisible(this.getAllTabbables());
+            const focusTarget = this.firstVisible(tabbables);
             if (focusTarget) {
                 e.preventDefault();
                 focusTarget.focus();
@@ -253,24 +266,20 @@ export class ModalController extends Stacks.StacksController {
             return;
         }
 
-        // If we observe a tab keydown and we're on an edge, cycle the focus to the other side.
-        if (e.key === "Tab") {
-            const tabbables = this.getAllTabbables();
-
-            const firstTabbable = this.firstVisible(tabbables);
-            const lastTabbable = this.lastVisible(tabbables);
-
-            if (firstTabbable && lastTabbable) {
-                if (firstTabbable === lastTabbable) {
-                    e.preventDefault();
-                    firstTabbable.focus();
-                } else if (e.shiftKey && e.target === firstTabbable) {
-                    e.preventDefault();
-                    lastTabbable.focus();
-                } else if (!e.shiftKey && e.target === lastTabbable) {
-                    e.preventDefault();
-                    firstTabbable.focus();
-                }
+        // Keep focusable cycling within the modal by looping through elements within the modal
+        const firstTabbable = this.firstVisible(tabbables);
+        const lastTabbable = this.lastVisible(tabbables);
+
+        if (firstTabbable && lastTabbable) {
+            if (firstTabbable === lastTabbable) {
+                e.preventDefault();
+                firstTabbable.focus();
+            } else if (e.shiftKey && e.target === firstTabbable) {
+                e.preventDefault();
+                lastTabbable.focus();
+            } else if (!e.shiftKey && e.target === lastTabbable) {
+                e.preventDefault();
+                firstTabbable.focus();
             }
         }
     }

package/lib/components/notice/notice.less

@@ -16,6 +16,10 @@
         --_no-btn-fc: ~"var(--@{colorName}-500)";
         --_no-code-bc: ~"var(--@{colorName}-300)";
         --_no-code-bg: ~"var(--@{colorName}-200)";
+
+        .highcontrast-mode({
+            --_no-bc: ~"var(--@{colorName}-400)";
+        });
     }
 
     & when (@modifier = important) {
@@ -54,10 +58,6 @@
     --_no-code-fc: var(--_no-fc);
 
     // CONTEXTUAL STYLES
-    .dark-mode({
-        --_no-bc: var(--_no-bg);
-    });
-
     .highcontrast-mode({
         &,
         &.@{baseClass}__danger,
@@ -74,6 +74,8 @@
                 --_no-code-fc: var(--white);
             }
         }
+
+        --_no-bc: var(--black-400);
     });
 
     // MODIFIERS

package/package.json

@@ -5,7 +5,7 @@
         "type": "git",
         "url": "https://github.com/StackExchange/Stacks.git"
     },
-    "version": "2.8.2",
+    "version": "2.8.4",
     "files": [
         "dist",
         "lib",