Update Visually Hidden to Leptos 0.7

RustForWeb · Jan 8, 2025 · 54696c6 · 54696c6
1 parent 9a902c3
commit 54696c6
Show file tree

Hide file tree

Showing 2 changed files with 44 additions and 20 deletions.
diff --git a/Cargo.toml b/Cargo.toml
@@ -40,7 +40,7 @@ members = [
     # "packages/primitives/leptos/use-escape-keydown",
     # "packages/primitives/leptos/use-previous",
     # "packages/primitives/leptos/use-size",
-    # "packages/primitives/leptos/visually-hidden",
+    "packages/primitives/leptos/visually-hidden",
 
     # -- Yew Primitives --
     "packages/primitives/yew/*",
@@ -82,7 +82,6 @@ yew = "0.21.0"
 yew-router = "0.18.0"
 yew-struct-component = "0.1.4"
 yew-style = "0.1.4"
-radix-leptos-primitive = "0.0.2"
 
 # Subcrate packages (paths remain the same; you can comment out any subcrate not yet upgraded).
 # We centralize shared dependencies in [workspace.dependencies] for a single source of truth,
@@ -118,10 +117,9 @@ radix-leptos-primitive.path = "./packages/primitives/leptos/primitive"
 #radix-leptos-use-escape-keydown.path = "./packages/primitives/leptos/use-escape-keydown"
 #radix-leptos-use-previous.path = "./packages/primitives/leptos/use-previous"
 #radix-leptos-use-size.path = "./packages/primitives/leptos/use-size"
-#radix-leptos-visually-hidden.path = "./packages/primitives/leptos/visually-hidden"
+radix-leptos-visually-hidden.path = "./packages/primitives/leptos/visually-hidden"
 
 [patch.crates-io]
 yew = { git = "https://github.com/RustForWeb/yew.git", branch = "feature/use-composed-ref" }
 yew-router = { git = "https://github.com/RustForWeb/yew.git", branch = "feature/use-composed-ref" }
 leptos-node-ref = { git = "https://github.com/geoffreygarrett/leptos-utils", branch = "feature/any-node-ref" }
-radix-leptos-primitive = { git = "https://github.com/geoffreygarrett/radix", branch = "update/leptos-0.7-primitive" }
diff --git a/book/src/primitives/utilities/visually-hidden.md b/book/src/primitives/utilities/visually-hidden.md
@@ -4,7 +4,7 @@ Hides content from the screen in an accessible way.
 
 ## Features
 
--   Visually hides content while preserving it for assistive technology.
+- Visually hides content while preserving it for assistive technology.
 
 ## Installation
 
@@ -17,9 +17,9 @@ Install the component from your command line.
 cargo add radix-leptos-visually-hidden
 ```
 
--   [View on crates.io](https://crates.io/crates/radix-leptos-visually-hidden)
--   [View on docs.rs](https://docs.rs/radix-leptos-visually-hidden/latest/radix_leptos_visually_hidden/)
--   [View source](https://github.com/RustForWeb/radix/tree/main/packages/primitives/leptos/visually-hidden)
+- [View on crates.io](https://crates.io/crates/radix-leptos-visually-hidden)
+- [View on docs.rs](https://docs.rs/radix-leptos-visually-hidden/latest/radix_leptos_visually_hidden/)
+- [View source](https://github.com/RustForWeb/radix/tree/main/packages/primitives/leptos/visually-hidden)
 
 {{#endtab }}
 {{#tab name="Yew" }}
@@ -28,9 +28,9 @@ cargo add radix-leptos-visually-hidden
 cargo add radix-yew-visually-hidden
 ```
 
--   [View on crates.io](https://crates.io/crates/radix-yew-visually-hidden)
--   [View on docs.rs](https://docs.rs/radix-yew-visually-hidden/latest/radix_yew_visually_hidden/)
--   [View source](https://github.com/RustForWeb/radix/tree/main/packages/primitives/yew/visually-hidden)
+- [View on crates.io](https://crates.io/crates/radix-yew-visually-hidden)
+- [View on docs.rs](https://docs.rs/radix-yew-visually-hidden/latest/radix_yew_visually_hidden/)
+- [View source](https://github.com/RustForWeb/radix/tree/main/packages/primitives/yew/visually-hidden)
 
 {{#endtab }}
 {{#endtabs }}
@@ -49,7 +49,7 @@ use radix_leptos_visually_hidden::*;
 #[component]
 fn Anatomy() -> impl IntoView {
     view! {
-        <VisuallyHidden />
+        <VisuallyHidden>"Your hidden content here"</VisuallyHidden>
     }
 }
 ```
@@ -81,14 +81,19 @@ Anything you put inside this component will be hidden from the screen but will b
 {{#tabs global="framework" }}
 {{#tab name="Leptos" }}
 
-<i>No props.</i>
+| Prop       | Type                                       | Default | Description                                                                     |
+|------------|--------------------------------------------|---------|---------------------------------------------------------------------------------|
+| `children` | `TypedChildrenFn<impl IntoView + 'static>` | -       | The content to be visually hidden but still accessible to screen readers        |
+| `as_child` | `MaybeProp<bool>`                          | `false` | If `true`, the `Primitive` is rendered as the child element rather than wrapped |
+| `node_ref` | `AnyNodeRef`                               | -       | A reference to the underlying DOM node                                          |
 
 {{#endtab }}
 {{#tab name="Yew" }}
 
-| Prop       | Type                                               | Default |
-| ---------- | -------------------------------------------------- | ------- |
-| `as_child` | `Option<Callback<VisuallyHiddenChildProps, Html>>` | -       |
+| Prop       | Type                                               | Default | Description |
+|------------|----------------------------------------------------|---------|-------------|
+| `as_child` | `Option<Callback<VisuallyHiddenChildProps, Html>>` | -       | -           |
+| `children` | `TODO`                                             | -       | TODO        |
 
 {{#endtab }}
 {{#endtabs }}
@@ -124,9 +129,9 @@ use radix_yew_icons::GearIcon;
 use radix_yew_visually_hidden::*;
 use yew::prelude::*;
 
-#[component]
-fn Example() -> impl IntoView {
-    view! {
+#[function_component]
+fn Example() -> Html {
+    html! {
         <button>
             <GearIcon />
             <VisuallyHidden>{"Settings"}</VisuallyHidden>
@@ -142,6 +147,27 @@ fn Example() -> impl IntoView {
 
 This is useful in certain scenarios as an alternative to traditional labelling with `aria-label` or `aria-labelledby`.
 
+## Implementation Details
+
+The component uses the following CSS properties to hide content visually while keeping it accessible to screen readers:
+
+```css
+.visually-hidden {
+    position: absolute;
+    border: 0;
+    width: 1px;
+    height: 1px;
+    padding: 0;
+    margin: -1px;
+    overflow: hidden;
+    clip: rect(0, 0, 0, 0);
+    white-space: nowrap;
+    word-wrap: normal;
+}
+```
+
+These styles are based on Bootstrap's visually-hidden implementation.
+
 ## See Also
 
--   [Radix documentation](https://www.radix-ui.com/primitives/docs/utilities/visually-hidden)
+- [Radix documentation](https://www.radix-ui.com/primitives/docs/utilities/visually-hidden)