Update Accessible Icon to Leptos 0.7

Author: geoffreygarrett

book/src/primitives/utilities/accessible-icon.md

@@ -4,72 +4,129 @@ Makes icons accessible by adding a label.
 
 ## Features
 
--   Quickly make any icon accessible by wrapping it and providing a meaningful label.
--   No visual difference, but announced correctly by screen readers.
+- Quickly make any icon accessible by wrapping it and providing a meaningful label.
+- No visual difference, but announced correctly by screen readers.
 
 ## Installation
 
-Install the component from your command line.
-
 {{#tabs global="framework" }}
 {{#tab name="Leptos" }}
 
 ```shell
 cargo add radix-leptos-accessible-icon
 ```
 
--   [View on crates.io](https://crates.io/crates/radix-leptos-accessible-icon)
--   [View on docs.rs](https://docs.rs/radix-leptos-accessible-icon/latest/radix_leptos_accessible_icon/)
--   [View source](https://github.com/RustForWeb/radix/tree/main/packages/primitives/leptos/accessible-icon)
+- [View on crates.io](https://crates.io/crates/radix-leptos-accessible-icon)
+- [View on docs.rs](https://docs.rs/radix-leptos-accessible-icon/latest/radix_leptos_accessible_icon/)
+- [View source](https://github.com/RustForWeb/radix/tree/main/packages/primitives/leptos/accessible-icon)
+
+{{#endtab }}
+{{#tab name="Yew" }}
+
+```shell
+# TODO: Implement an official Yew crate for accessible icons if missing
+# cargo add radix-yew-accessible-icon (when available)
+```
+
+- TODO: Provide crates.io, docs.rs, and source links when available.
 
 {{#endtab }}
 {{#endtabs }}
 
 ## Anatomy
 
-Import the component.
-
 {{#tabs global="framework" }}
 {{#tab name="Leptos" }}
 
 ```rust,ignore
 use leptos::*;
-use radix_leptos_accessible_icon::*;
+use radix_leptos_accessible_icon::primitive as AccessibleIcon;
 
 #[component]
 fn Anatomy() -> impl IntoView {
     view! {
-        <AccessibleIcon />
+        <AccessibleIcon::Root label="Close">
+            // Your icon element here (e.g., <svg>)
+            // aria-hidden="true", focusable="false" are applied automatically
+            <svg viewBox="0 0 24 24">
+                // path definitions...
+            </svg>
+        </AccessibleIcon::Root>
     }
 }
 ```
 
+{{#endtab }}
+{{#tab name="Yew" }}
+
+```rust,ignore
+// TODO: Provide a Yew example when the crate is available or supported
+use yew::prelude::*;
+
+// Possibly something like this in the future:
+// use radix_yew_accessible_icon::primitive as AccessibleIcon;
+```
+
 {{#endtab }}
 {{#endtabs }}
 
 ## API Reference
 
 ### Root
 
-Contains the icon to make accessible.
+Contains the icon you want to make accessible.
 
 {{#tabs global="framework" }}
 {{#tab name="Leptos" }}
 
-| Prop    | Type             | Default |
-| ------- | ---------------- | ------- |
-| `label` | `Signal<String>` | -       |
+| Prop       | Type                                     | Default | Description                                                                                                               |
+|------------|------------------------------------------|---------|---------------------------------------------------------------------------------------------------------------------------|
+| `label`    | `MaybeProp<String>`                      | –       | The accessible label for the icon. It will be visually hidden but announced to screen readers.                            |
+| `children` | `TypedChildren<impl IntoView + 'static>` | –       | Your icon (SVG or similar). Extra attributes like `aria-hidden="true"` and `focusable="false"` are automatically applied. |
+
+{{#endtab }}
+{{#tab name="Yew" }}
+
+| Prop  | Type | Default | Description           |
+|-------|------|---------|-----------------------|
+| label | TODO | -       | TODO for Yew support. |
+| child | TODO | -       | TODO for Yew support. |
 
 {{#endtab }}
 {{#endtabs }}
 
 ## Accessibility
 
-Most icons or icon systems come with no accessibility built-in. For example, the same visual **cross** icon may in fact mean **"close"** or **"delete"**.
-This component lets you give meaning to icons used throughout your app.
+Most icons or icon systems come with no accessibility built-in. For example, the same visual **cross** icon might mean *
+*"close"** or **"delete"**. By wrapping your icon in `<AccessibleIcon::Root>` (Leptos/Yew), you provide a meaningful
+label that screen readers will announce, while the icon itself is hidden from assistive technology via
+`aria-hidden="true"`.
+
+This is built with [Visually Hidden](../utilities/visually-hidden) so labels are hidden visually but still accessible to
+screen readers.
+
+## Example (Leptos)
+
+```rust,ignore
+use leptos::prelude::*;
+use radix_leptos_visually_hidden::primitive as VisuallyHidden;
+use radix_leptos_accessible_icon::primitive as AccessibleIcon;
+
+#[component]
+fn CloseIcon() -> impl IntoView {
+    view! {
+        <AccessibleIcon::Root label="Close">
+            <svg width="24" height="24" viewBox="0 0 24 24">
+                <path d="M6 6 L18 18 M6 18 L18 6" stroke="currentColor" stroke-width="2" />
+            </svg>
+        </AccessibleIcon::Root>
+    }
+}
+```
 
-This is built with [Visually Hidden](./visually-hidden.md).
+> **Yew**: TODO – Provide a working example if/when the Yew version is complete.
 
 ## See Also
 
--   [Radix documentation](https://www.radix-ui.com/primitives/docs/utilities/accessible-icon)
+- [Radix UI Accessible Icon documentation](https://www.radix-ui.com/primitives/docs/utilities/accessible-icon)
+- [Repository and more examples](https://github.com/RustForWeb/radix)

packages/primitives/leptos/accessible-icon/Cargo.toml

@@ -2,7 +2,6 @@
 name = "radix-leptos-accessible-icon"
 description = "Leptos port of Radix Accessible Icon."
 homepage = "https://radix.rustforweb.org/primitives/utilities/accessible-icon.html"
-
 authors.workspace = true
 edition.workspace = true
 license.workspace = true
@@ -11,4 +10,4 @@ version.workspace = true
 
 [dependencies]
 leptos.workspace = true
-radix-leptos-visually-hidden = { path = "../visually-hidden", version = "0.0.2" }
+radix-leptos-visually-hidden.workspace = true

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

@@ -1,37 +1,45 @@
-use leptos::{
-    attr::{
-        AriaHidden, Attr, NextAttribute, aria_hidden,
-        custom::{CustomAttr, custom_attribute},
-    },
-    prelude::*,
-};
-use radix_leptos_visually_hidden::VisuallyHidden;
+use leptos::attr::{aria_hidden, custom::custom_attribute};
+use leptos::prelude::*;
+use radix_leptos_visually_hidden::primitive as VisuallyHidden;
 
-pub type AccessibleIconAttrs = (
-    Attr<AriaHidden, &'static str>,
-    CustomAttr<&'static str, &'static str>,
-);
+/* -------------------------------------------------------------------------------------------------
+ * AccessibleIcon
+ * -----------------------------------------------------------------------------------------------*/
 
-pub fn use_accessible_icon() -> AccessibleIconAttrs {
-    aria_hidden("true").add_any_attr(custom_attribute("focusable", "false"))
-}
+#[allow(unused)]
+const NAME: &str = "AccessibleIcon";
 
+/// A minimal port of Radix UI’s AccessibleIcon to Leptos.
+///
+/// - Uses [`TypedChildren`](leptos::prelude::TypedChildren) so attributes can pass through via `add_any_attr`,
+///   since `ChildrenFragment` and `AnyView` don’t support this in Leptos 0.7.3.
+/// - Applies `aria-hidden="true"` and `focusable="false"` to hide the icon from screen readers (the label is announced).
+/// - Does not enforce a single child or clone/modify SVGs like React’s `cloneElement`.
 #[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.
-    #[prop(into)]
-    label: Signal<String>,
-    render: R,
-) -> impl IntoView
-where
-    R: Fn(AccessibleIconAttrs) -> IV,
-    IV: IntoView,
-{
-    let attrs = use_accessible_icon();
-
+#[allow(non_snake_case)]
+pub fn AccessibleIcon(
+    children: TypedChildren<impl IntoView + 'static>,
+    /// A label announced by screen readers, hidden visually.
+    #[prop(into, optional)] label: MaybeProp<String>,
+) -> impl IntoView {
+    let label = Signal::derive(move || label.get());
     view! {
-        {render(attrs)}
-        <VisuallyHidden>{label}</VisuallyHidden>
+        <>
+            {children
+                .into_inner()()
+                .add_any_attr(aria_hidden("true"))
+                .add_any_attr(custom_attribute("focusable", "false"))}
+            <Show when=move || label.get().is_some()>
+                <VisuallyHidden::Root>{label.get().unwrap_or_default()}</VisuallyHidden::Root>
+            </Show>
+        </>
     }
 }
+
+
+/* -----------------------------------------------------------------------------------------------*/
+
+pub mod primitive {
+    pub use super::*;
+    pub use AccessibleIcon as Root;
+}

stories/leptos/src/primitives/accessible_icon.rs

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