Fix keyboard navigation for the dialog and toast components (#47)

* implement focus trap

* fix escape modal

* integrate focus trap into dialog

* handle keyboard navigation for the toast component

* fix clippy

Author: ealmloff

Cargo.lock

@@ -17,7 +17,10 @@ pub(super) fn Demo() -> Element {
             onclick: move |_| open.set(true),
             "Show Alert Dialog"
         }
-        AlertDialogRoot { open: open(), on_open_change: move |v| open.set(v),
+        AlertDialogRoot {
+            open: open(),
+            on_open_change: move |v| open.set(v),
+            class: "alert-dialog-backdrop",
             AlertDialogContent { class: "alert-dialog",
                 AlertDialogTitle { "Delete item" }
                 AlertDialogDescription { "Are you sure you want to delete this item? This action cannot be undone." }

preview/src/components/alert_dialog/mod.rs

@@ -4,7 +4,21 @@
   inset: 0;
   background: rgba(0, 0, 0, 0.3);
   z-index: 1000;
-  animation: fadeIn 0.2s ease;
+  will-change: transform, opacity;
+}
+
+.alert-dialog-backdrop[data-state="closed"] {
+  pointer-events: none;
+  opacity: 0;
+  transform: scale(0.95) translateY(-2px);
+  transition: opacity 150ms ease-in, transform 150ms ease-in;
+}
+
+.alert-dialog-backdrop[data-state="open"] {
+  opacity: 1;
+  transform: scale(1) translateY(0);
+  transition: opacity 200ms ease-out,
+    transform 200ms cubic-bezier(0.16, 1, 0.3, 1);
 }
 
 /* Alert Dialog Container - improved for theme consistency */

preview/src/components/alert_dialog/style.css

@@ -1,5 +1,5 @@
 use dioxus::prelude::*;
-use dioxus_primitives::{dialog::{Dialog, DialogDescription, DialogTitle}};
+use dioxus_primitives::dialog::{DialogContent, DialogDescription, DialogRoot, DialogTitle};
 
 #[component]
 pub(super) fn Demo() -> Element {
@@ -16,23 +16,27 @@ pub(super) fn Demo() -> Element {
             onclick: move |_| open.set(true),
             "Show Dialog"
         }
-        Dialog {
-            class: "dialog",
+        DialogRoot {
+            class: "dialog-backdrop",
             open: open(),
             on_open_change: move |v| open.set(v),
-            button {
-                class: "dialog-close",
-                aria_label: "Close",
-                onclick: move |_| open.set(false),
-                "×"
-            }
-            DialogTitle {
-                class: "dialog-title",
-                "Item information"
-            }
-            DialogDescription {
-                class: "dialog-description",
-                "Here is some additional information about the item."
+            DialogContent {
+                class: "dialog",
+                button {
+                    class: "dialog-close",
+                    aria_label: "Close",
+                    tabindex: if open() { "0" } else { "-1" },
+                    onclick: move |_| open.set(false),
+                    "×"
+                }
+                DialogTitle {
+                    class: "dialog-title",
+                    "Item information"
+                }
+                DialogDescription {
+                    class: "dialog-description",
+                    "Here is some additional information about the item."
+                }
             }
         }
     }

preview/src/components/dialog/mod.rs

@@ -1,5 +1,30 @@
-/* Alert Dialog Container - improved for theme consistency */
+/* Dialog Backdrop */
+.dialog-backdrop {
+  position: fixed;
+  inset: 0;
+  background: rgba(0, 0, 0, 0.3);
+  z-index: 1000;
+  will-change: transform, opacity;
+}
+
+.dialog-backdrop[data-state="closed"] {
+  pointer-events: none;
+  opacity: 0;
+  transform: scale(0.95) translateY(-2px);
+  transition: opacity 150ms ease-in, transform 150ms ease-in;
+}
+
+.dialog-backdrop[data-state="open"] {
+  opacity: 1;
+  transform: scale(1) translateY(0);
+  transition: opacity 200ms ease-out,
+    transform 200ms cubic-bezier(0.16, 1, 0.3, 1);
+}
+
+/* Dialog Container - improved for theme consistency */
 .dialog {
+  display: flex;
+  flex-direction: column;
   text-align: center;
   position: fixed;
   top: 50%;
@@ -22,12 +47,6 @@
   box-sizing: border-box;
 }
 
-
-.dialog[open] {
-  display: flex;
-  flex-direction: column;
-}
-
 .dialog-title {
   font-size: 1.25rem;
   font-weight: 700;

preview/src/components/dialog/style.css

@@ -1,4 +1,4 @@
-The Toast component is used to display brief messages to the user, typically for notifications or alerts.
+The Toast component is used to display brief messages to the user, typically for notifications or alerts. The toast messages can be focused with the keyboard with the `f6` key.
 
 ## Component Structure
 

preview/src/components/toast/docs.md

@@ -33,12 +33,12 @@ fn ToastButton() -> Element {
                             description: Some(
                                 "Some info you need".to_string(),
                             ),
-                            duration: Some(Duration::from_secs(10)),
+                            duration: Some(Duration::from_secs(60)),
                             permanent: false,
                         }),
                     );
             },
-            "Info (10s)"
+            "Info (60s)"
         }
         style {
             ""

preview/src/components/toast/mod.rs

@@ -15,7 +15,10 @@
   margin-top: -4rem;
   overflow: hidden;
   transition: transform 0.2s ease, margin-top 0.2s ease, opacity 0.2s ease;
-  transform: scale(calc(100% - var(--toast-index) * 5%), calc(100% - var(--toast-index) * 2%));
+  transform: scale(
+    calc(100% - var(--toast-index) * 5%),
+    calc(100% - var(--toast-index) * 2%)
+  );
   box-sizing: border-box;
   z-index: calc(var(--toast-count) - var(--toast-index));
   opacity: calc(1 - var(--toast-hidden));
@@ -37,53 +40,79 @@
   }
 }
 
-.toast-container:not(:hover) .toast[data-toast-even]:not([data-top]) {
+.toast-container:not(:hover):not(:focus-within)
+  .toast[data-toast-even]:not([data-top]) {
   animation: slide-up-even 0.2s ease-out;
 }
-.toast-container:not(:hover) .toast[data-toast-odd]:not([data-top]) {
+.toast-container:not(:hover):not(:focus-within)
+  .toast[data-toast-odd]:not([data-top]) {
   animation: slide-up-odd 0.2s ease-out;
 }
 
 @keyframes slide-up-even {
   from {
-    transform: translateY(0.5rem) scale(calc(100% - var(--toast-index) * 5%), calc(100% - var(--toast-index) * 2%));
+    transform: translateY(0.5rem)
+      scale(
+        calc(100% - var(--toast-index) * 5%),
+        calc(100% - var(--toast-index) * 2%)
+      );
   }
   to {
     transform: translateY(0)
-      scale(calc(100% - var(--toast-index) * 5%), calc(100% - var(--toast-index) * 2%));
+      scale(
+        calc(100% - var(--toast-index) * 5%),
+        calc(100% - var(--toast-index) * 2%)
+      );
   }
 }
 
 @keyframes slide-up-odd {
   from {
-    transform: translateY(0.5rem) scale(calc(100% - var(--toast-index) * 5%), calc(100% - var(--toast-index) * 2%));
+    transform: translateY(0.5rem)
+      scale(
+        calc(100% - var(--toast-index) * 5%),
+        calc(100% - var(--toast-index) * 2%)
+      );
   }
   to {
     transform: translateY(0)
-      scale(calc(100% - var(--toast-index) * 5%), calc(100% - var(--toast-index) * 2%));
+      scale(
+        calc(100% - var(--toast-index) * 5%),
+        calc(100% - var(--toast-index) * 2%)
+      );
   }
 }
 
 .toast[data-top] {
   animation: slide-in 0.2s ease-out;
 }
 
-.toast-container:hover .toast[data-top] {
+.toast-container:hover .toast[data-top],
+.toast-container:focus-within .toast[data-top] {
   animation: slide-in 0 ease-out;
 }
 
 @keyframes slide-in {
   from {
-    transform: translateY(100%) scale(calc(110% - var(--toast-index) * 5%), calc(110% - var(--toast-index) * 2%));
+    transform: translateY(100%)
+      scale(
+        calc(110% - var(--toast-index) * 5%),
+        calc(110% - var(--toast-index) * 2%)
+      );
     opacity: 0;
   }
   to {
-    transform: translateY(0) scale(calc(100% - var(--toast-index) * 5%), calc(100% - var(--toast-index) * 2%));
+    transform: translateY(0)
+      scale(
+        calc(100% - var(--toast-index) * 5%),
+        calc(100% - var(--toast-index) * 2%)
+      );
     opacity: 1;
   }
 }
 
-.toast-container:hover .toast {
+.toast-container:hover .toast,
+.toast-container:focus-within .toast {
   margin-top: var(--toast-padding);
   transform: scale(calc(100%));
   opacity: 1;

preview/src/components/toast/style.css

@@ -15,3 +15,6 @@ dioxus-lib.workspace = true
 dioxus.workspace = true
 dioxus-time = "=0.1.0-alpha.1"
 tracing.workspace = true
+
+[build-dependencies]
+lazy-js-bundle = "0.6.2"

primitives/Cargo.toml

@@ -0,0 +1,7 @@
+fn main() {
+    // If any TS files change, re-run the build script
+    lazy_js_bundle::LazyTypeScriptBindings::new()
+        .with_watching("./src/ts")
+        .with_binding("./src/ts/focus-trap.ts", "./src/js/focus-trap.js")
+        .run();
+}