Update Accessible Icon for Leptos 0.7

packages/primitives/leptos/accessible-icon/src/accessible_icon.rs

@@ -1,37 +1,26 @@
 use leptos::{
-    attr::{
-        AriaHidden, Attr, NextAttribute, aria_hidden,
-        custom::{CustomAttr, custom_attribute},
-    },
+    attr::{aria_hidden, custom::custom_attribute},
     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<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.
+pub fn AccessibleIcon(
+    /// 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: Signal<String>,
-    render: R,
-) -> impl IntoView
-where
-    R: Fn(AccessibleIconAttrs) -> IV,
-    IV: IntoView,
-{
-    let attrs = use_accessible_icon();
-
+    children: TypedChildren<impl IntoView + 'static>,
+) -> impl IntoView {
+    let label = Signal::derive(move || label.get());
     view! {
-        {render(attrs)}
-        <VisuallyHidden>{label}</VisuallyHidden>
+        <>
+            {children
+                .into_inner()()
+                // Accessibility
+                .add_any_attr(aria_hidden("true"))
+                // See: https://allyjs.io/tutorials/focusing-in-svg.html#making-svg-elements-focusable
+                .add_any_attr(custom_attribute("focusable", "false"))}
+            <VisuallyHidden>{label.get()}</VisuallyHidden>
+        </>
     }
 }

stories/leptos/src/primitives/accessible_icon.rs

@@ -1,16 +1,13 @@
 use leptos::prelude::*;
-use radix_leptos_accessible_icon::*;
+use radix_leptos_accessible_icon::AccessibleIcon;
 
 #[component]
 pub fn Styled() -> impl IntoView {
     view! {
-        <button type="button">
-            <AccessibleIcon
-                label="Close"
-                render=|attrs| view! {
-                    <CrossIcon {..attrs} />
-                }
-            />
+        <button r#type="button">
+            <AccessibleIcon label="Close">
+                <CrossIcon />
+            </AccessibleIcon>
         </button>
     }
 }
@@ -20,12 +17,9 @@ pub fn Chromatic() -> impl IntoView {
     view! {
         <p>
             Some text with an inline accessible icon{" "}
-            <AccessibleIcon
-                label="Close"
-                render=|attrs| view! {
-                    <CrossIcon {..attrs} attr:class="inline-block" />
-                }
-            />
+            <AccessibleIcon label="Close">
+                <CrossIcon attr:class="inline-block" />
+            </AccessibleIcon>
         </p>
     }
 }