Update Accessible Icon to Leptos 0.7 (#405)

RustForWeb · Jan 5, 2025 · 7f3ddc6 · 7f3ddc6
1 parent de37ffa
commit 7f3ddc6
Show file tree

Hide file tree

Showing 9 changed files with 68 additions and 53 deletions.
diff --git a/Cargo.lock b/Cargo.lock
diff --git a/Cargo.toml b/Cargo.toml
@@ -14,6 +14,7 @@ members = [
     "packages/colors",
     "packages/icons/dioxus",
     "packages/icons/yew",
+    "packages/primitives/leptos/accessible-icon",
     "packages/primitives/leptos/id",
     "packages/primitives/leptos/label",
     "packages/primitives/leptos/visually-hidden",

diff --git a/book/src/primitives/utilities/accessible-icon.md b/book/src/primitives/utilities/accessible-icon.md
@@ -56,9 +56,9 @@ Contains the icon to make accessible.
 {{#tabs global="framework" }}
 {{#tab name="Leptos" }}
 
-| Prop    | Type                  | Default |
-| ------- | --------------------- | ------- |
-| `label` | `MaybeSignal<String>` | -       |
+| Prop    | Type             | Default |
+| ------- | ---------------- | ------- |
+| `label` | `Signal<String>` | -       |
 
 {{#endtab }}
 {{#endtabs }}

diff --git a/book/src/primitives/utilities/visually-hidden.md b/book/src/primitives/utilities/visually-hidden.md
@@ -81,9 +81,7 @@ Anything you put inside this component will be hidden from the screen but will b
 {{#tabs global="framework" }}
 {{#tab name="Leptos" }}
 
-| Prop       | Type              | Default |
-| ---------- | ----------------- | ------- |
-| `as_child` | `MaybeProp<bool>` | `false` |
+<i>No props.</i>
 
 {{#endtab }}
 {{#tab name="Yew" }}
@@ -112,7 +110,7 @@ fn Example() -> impl IntoView {
     view! {
         <button>
             <GearIcon />
-            <VisuallyHidden>Settings</VisuallyHidden>
+            <VisuallyHidden>"Settings"</VisuallyHidden>
         </button>
     }
 }

diff --git a/packages/primitives/leptos/accessible-icon/src/accessible_icon.rs b/packages/primitives/leptos/accessible-icon/src/accessible_icon.rs
@@ -1,36 +1,38 @@
-use leptos::*;
+use leptos::{
+    attr::{
+        aria_hidden,
+        custom::{custom_attribute, CustomAttr},
+        AriaHidden, Attr, NextAttribute,
+    },
+    prelude::*,
+};
 use radix_leptos_visually_hidden::VisuallyHidden;
 
+pub type AccessibleIconAttrs = (
+    Attr<AriaHidden, &'static str>,
+    CustomAttr<&'static str, &'static str>,
+);
+
+pub fn use_accessible_icon() -> AccessibleIconAttrs {
+    aria_hidden("true").add_any_attr(custom_attribute("focusable", "false"))
+}
+
 #[component]
-pub fn AccessibleIcon(
+pub fn AccessibleIcon<R, IV>(
     /// The accessible label for the icon. This label will be visually hidden but announced to screen reader users,
     /// similar to `alt` text for `img` tags.
     #[prop(into)]
-    label: MaybeSignal<String>,
-    #[prop(optional)] children: Option<ChildrenFn>,
-) -> impl IntoView {
-    let label = Signal::derive(move || label.get());
+    label: Signal<String>,
+    render: R,
+) -> impl IntoView
+where
+    R: Fn(AccessibleIconAttrs) -> IV,
+    IV: IntoView,
+{
+    let attrs = use_accessible_icon();
 
     view! {
-        {children.map(|children| map_children(children().as_children()))}
+        {render(attrs)}
         <VisuallyHidden>{label}</VisuallyHidden>
     }
 }
-
-fn map_children(children: &[View]) -> View {
-    children
-        .iter()
-        .map(|child| match child {
-            View::Element(element) => element
-                .clone()
-                .into_html_element()
-                // Accessibility
-                .attr("aria-hidden", "true")
-                // See: https://allyjs.io/tutorials/focusing-in-svg.html#making-svg-elements-focusable
-                .attr("focusable", "false")
-                .into_view(),
-            View::Component(component) => map_children(&component.children),
-            _ => child.into_view(),
-        })
-        .collect_view()
-}
diff --git a/stories/leptos/Cargo.toml b/stories/leptos/Cargo.toml
@@ -15,7 +15,7 @@ console_error_panic_hook.workspace = true
 leptos = { workspace = true, features = ["csr"] }
 leptos_router.workspace = true
 log.workspace = true
-# radix-leptos-accessible-icon = { path = "../../packages/primitives/leptos/accessible-icon" }
+radix-leptos-accessible-icon = { path = "../../packages/primitives/leptos/accessible-icon" }
 # radix-leptos-arrow = { path = "../../packages/primitives/leptos/arrow" }
 # radix-leptos-aspect-ratio = { path = "../../packages/primitives/leptos/aspect-ratio" }
 # radix-leptos-avatar = { path = "../../packages/primitives/leptos/avatar" }

diff --git a/stories/leptos/src/app.rs b/stories/leptos/src/app.rs
@@ -8,7 +8,7 @@ use leptos_router::{
 //     accessible_icon, arrow, aspect_ratio, avatar, checkbox, collection, focus_scope, label, menu,
 //     popper, portal, presence, progress, separator, slot, switch, toggle, visually_hidden,
 // };
-use crate::primitives::{label, visually_hidden};
+use crate::primitives::{accessible_icon, label, visually_hidden};
 
 #[component]
 fn NavLink<H>(href: H, children: Children) -> impl IntoView
@@ -39,14 +39,14 @@ pub fn App() -> impl IntoView {
                     <li>
                         <NavLink href="/">Index</NavLink>
                     </li>
-                    // <li>
-                    //     Accessible Icon
+                    <li>
+                        Accessible Icon
 
-                    //     <ul class="list-none m-0 ms-4 p-0">
-                    //         <li><NavLink href="/accessible-icon/styled">Styled</NavLink></li>
-                    //         <li><NavLink href="/accessible-icon/chromatic">Chromatic</NavLink></li>
-                    //     </ul>
-                    // </li>
+                        <ul class="list-none m-0 ms-4 p-0">
+                            <li><NavLink href="/accessible-icon/styled">Styled</NavLink></li>
+                            <li><NavLink href="/accessible-icon/chromatic">Chromatic</NavLink></li>
+                        </ul>
+                    </li>
                     // <li>
                     //     Arrow
 
@@ -211,8 +211,8 @@ pub fn App() -> impl IntoView {
                 <Routes fallback=|| "Not found.".into_view()>
                     <Route path=path!("/") view=Index />
 
-                    // <Route path="/accessible-icon/styled" view=accessible_icon::Styled />
-                    // <Route path="/accessible-icon/chromatic" view=accessible_icon::Chromatic />
+                    <Route path=path!("/accessible-icon/styled") view=accessible_icon::Styled />
+                    <Route path=path!("/accessible-icon/chromatic") view=accessible_icon::Chromatic />
 
                     // <Route path="/arrow/styled" view=arrow::Styled />
                     // <Route path="/arrow/custom-sizes" view=arrow::CustomSizes />

diff --git a/stories/leptos/src/primitives.rs b/stories/leptos/src/primitives.rs
@@ -1,4 +1,4 @@
-// pub mod accessible_icon;
+pub mod accessible_icon;
 // pub mod arrow;
 // pub mod aspect_ratio;
 // pub mod avatar;

diff --git a/stories/leptos/src/primitives/accessible_icon.rs b/stories/leptos/src/primitives/accessible_icon.rs
@@ -1,13 +1,16 @@
-use leptos::*;
+use leptos::prelude::*;
 use radix_leptos_accessible_icon::*;
 
 #[component]
 pub fn Styled() -> impl IntoView {
     view! {
         <button type="button">
-            <AccessibleIcon label="Close">
-                <CrossIcon />
-            </AccessibleIcon>
+            <AccessibleIcon
+                label="Close"
+                render=|attrs| view! {
+                    <CrossIcon {..attrs} />
+                }
+            />
         </button>
     }
 }
@@ -17,19 +20,21 @@ pub fn Chromatic() -> impl IntoView {
     view! {
         <p>
             Some text with an inline accessible icon{" "}
-            <AccessibleIcon label="Close">
-                <CrossIcon attr:class="inline-block" />
-            </AccessibleIcon>
+            <AccessibleIcon
+                label="Close"
+                render=|attrs| view! {
+                    <CrossIcon {..attrs} attr:class="inline-block" />
+                }
+            />
         </p>
     }
 }
 
 #[component]
-fn CrossIcon(#[prop(attrs)] attrs: Vec<(&'static str, Attribute)>) -> impl IntoView {
+fn CrossIcon() -> impl IntoView {
     view! {
         <svg viewBox="0 0 32 32" width=24 height=24 fill="none" stroke="currentColor">
             <path d="M2 30 L30 2 M30 30 L2 2" />
         </svg>
     }
-    .attrs(attrs)
 }