Skip to content

Commit b12742b

Browse files
DanielleHuismanDanielleHuisman
committed
Cleanup
1 parent ce43b33 commit b12742b

File tree

4 files changed

+37
-116
lines changed

4 files changed

+37
-116
lines changed

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

Lines changed: 19 additions & 76 deletions
Original file line numberDiff line numberDiff line change
@@ -4,129 +4,72 @@ Makes icons accessible by adding a label.
44

55
## Features
66

7-
- Quickly make any icon accessible by wrapping it and providing a meaningful label.
8-
- No visual difference, but announced correctly by screen readers.
7+
- Quickly make any icon accessible by wrapping it and providing a meaningful label.
8+
- No visual difference, but announced correctly by screen readers.
99

1010
## Installation
1111

12+
Install the component from your command line.
13+
1214
{{#tabs global="framework" }}
1315
{{#tab name="Leptos" }}
1416

1517
```shell
1618
cargo add radix-leptos-accessible-icon
1719
```
1820

19-
- [View on crates.io](https://crates.io/crates/radix-leptos-accessible-icon)
20-
- [View on docs.rs](https://docs.rs/radix-leptos-accessible-icon/latest/radix_leptos_accessible_icon/)
21-
- [View source](https://github.com/RustForWeb/radix/tree/main/packages/primitives/leptos/accessible-icon)
22-
23-
{{#endtab }}
24-
{{#tab name="Yew" }}
25-
26-
```shell
27-
# TODO: Implement an official Yew crate for accessible icons if missing
28-
# cargo add radix-yew-accessible-icon (when available)
29-
```
30-
31-
- TODO: Provide crates.io, docs.rs, and source links when available.
21+
- [View on crates.io](https://crates.io/crates/radix-leptos-accessible-icon)
22+
- [View on docs.rs](https://docs.rs/radix-leptos-accessible-icon/latest/radix_leptos_accessible_icon/)
23+
- [View source](https://github.com/RustForWeb/radix/tree/main/packages/primitives/leptos/accessible-icon)
3224

3325
{{#endtab }}
3426
{{#endtabs }}
3527

3628
## Anatomy
3729

30+
Import the component.
31+
3832
{{#tabs global="framework" }}
3933
{{#tab name="Leptos" }}
4034

4135
```rust,ignore
4236
use leptos::*;
43-
use radix_leptos_accessible_icon::primitive as AccessibleIcon;
37+
use radix_leptos_accessible_icon::*;
4438
4539
#[component]
4640
fn Anatomy() -> impl IntoView {
4741
view! {
48-
<AccessibleIcon::Root label="Close">
49-
// Your icon element here (e.g., <svg>)
50-
// aria-hidden="true", focusable="false" are applied automatically
51-
<svg viewBox="0 0 24 24">
52-
// path definitions...
53-
</svg>
54-
</AccessibleIcon::Root>
42+
<AccessibleIcon />
5543
}
5644
}
5745
```
5846

59-
{{#endtab }}
60-
{{#tab name="Yew" }}
61-
62-
```rust,ignore
63-
// TODO: Provide a Yew example when the crate is available or supported
64-
use yew::prelude::*;
65-
66-
// Possibly something like this in the future:
67-
// use radix_yew_accessible_icon::primitive as AccessibleIcon;
68-
```
69-
7047
{{#endtab }}
7148
{{#endtabs }}
7249

7350
## API Reference
7451

7552
### Root
7653

77-
Contains the icon you want to make accessible.
54+
Contains the icon to make accessible.
7855

7956
{{#tabs global="framework" }}
8057
{{#tab name="Leptos" }}
8158

82-
| Prop | Type | Default | Description |
83-
|------------|------------------------------------------|---------|---------------------------------------------------------------------------------------------------------------------------|
84-
| `label` | `MaybeProp<String>` | – | The accessible label for the icon. It will be visually hidden but announced to screen readers. |
85-
| `children` | `TypedChildren<impl IntoView + 'static>` | – | Your icon (SVG or similar). Extra attributes like `aria-hidden="true"` and `focusable="false"` are automatically applied. |
86-
87-
{{#endtab }}
88-
{{#tab name="Yew" }}
89-
90-
| Prop | Type | Default | Description |
91-
|-------|------|---------|-----------------------|
92-
| label | TODO | - | TODO for Yew support. |
93-
| child | TODO | - | TODO for Yew support. |
59+
| Prop | Type | Default |
60+
| ------- | ---------------- | ------- |
61+
| `label` | `Signal<String>` | - |
9462

9563
{{#endtab }}
9664
{{#endtabs }}
9765

9866
## Accessibility
9967

100-
Most icons or icon systems come with no accessibility built-in. For example, the same visual **cross** icon might mean *
101-
*"close"** or **"delete"**. By wrapping your icon in `<AccessibleIcon::Root>` (Leptos/Yew), you provide a meaningful
102-
label that screen readers will announce, while the icon itself is hidden from assistive technology via
103-
`aria-hidden="true"`.
104-
105-
This is built with [Visually Hidden](../utilities/visually-hidden) so labels are hidden visually but still accessible to
106-
screen readers.
107-
108-
## Example (Leptos)
109-
110-
```rust,ignore
111-
use leptos::prelude::*;
112-
use radix_leptos_visually_hidden::primitive as VisuallyHidden;
113-
use radix_leptos_accessible_icon::primitive as AccessibleIcon;
114-
115-
#[component]
116-
fn CloseIcon() -> impl IntoView {
117-
view! {
118-
<AccessibleIcon::Root label="Close">
119-
<svg width="24" height="24" viewBox="0 0 24 24">
120-
<path d="M6 6 L18 18 M6 18 L18 6" stroke="currentColor" stroke-width="2" />
121-
</svg>
122-
</AccessibleIcon::Root>
123-
}
124-
}
125-
```
68+
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"**.
69+
This component lets you give meaning to icons used throughout your app.
12670

127-
> **Yew**: TODO – Provide a working example if/when the Yew version is complete.
71+
This is built with [Visually Hidden](./visually-hidden.md).
12872

12973
## See Also
13074

131-
- [Radix UI Accessible Icon documentation](https://www.radix-ui.com/primitives/docs/utilities/accessible-icon)
132-
- [Repository and more examples](https://github.com/RustForWeb/radix)
75+
- [Radix documentation](https://www.radix-ui.com/primitives/docs/utilities/accessible-icon)

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

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@
22
name = "radix-leptos-accessible-icon"
33
description = "Leptos port of Radix Accessible Icon."
44
homepage = "https://radix.rustforweb.org/primitives/utilities/accessible-icon.html"
5+
56
authors.workspace = true
67
edition.workspace = true
78
license.workspace = true
@@ -10,4 +11,4 @@ version.workspace = true
1011

1112
[dependencies]
1213
leptos.workspace = true
13-
radix-leptos-visually-hidden.workspace = true
14+
radix-leptos-visually-hidden = { path = "../visually-hidden", version = "0.0.2" }

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

Lines changed: 11 additions & 30 deletions
Original file line numberDiff line numberDiff line change
@@ -1,45 +1,26 @@
1-
use leptos::attr::{aria_hidden, custom::custom_attribute};
2-
use leptos::prelude::*;
3-
use radix_leptos_visually_hidden::primitive as VisuallyHidden;
1+
use leptos::{
2+
attr::{aria_hidden, custom::custom_attribute},
3+
prelude::*,
4+
};
5+
use radix_leptos_visually_hidden::VisuallyHidden;
46

5-
/* -------------------------------------------------------------------------------------------------
6-
* AccessibleIcon
7-
* -----------------------------------------------------------------------------------------------*/
8-
9-
#[allow(unused)]
10-
const NAME: &str = "AccessibleIcon";
11-
12-
/// A minimal port of Radix UI’s AccessibleIcon to Leptos.
13-
///
14-
/// - Uses [`TypedChildren`](leptos::prelude::TypedChildren) so attributes can pass through via `add_any_attr`,
15-
/// since `ChildrenFragment` and `AnyView` don’t support this in Leptos 0.7.3.
16-
/// - Applies `aria-hidden="true"` and `focusable="false"` to hide the icon from screen readers (the label is announced).
17-
/// - Does not enforce a single child or clone/modify SVGs like React’s `cloneElement`.
187
#[component]
19-
#[allow(non_snake_case)]
208
pub fn AccessibleIcon(
9+
/// 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.
10+
#[prop(into)]
11+
label: Signal<String>,
2112
children: TypedChildren<impl IntoView + 'static>,
22-
/// A label announced by screen readers, hidden visually.
23-
#[prop(into, optional)] label: MaybeProp<String>,
2413
) -> impl IntoView {
2514
let label = Signal::derive(move || label.get());
2615
view! {
2716
<>
2817
{children
2918
.into_inner()()
19+
// Accessibility
3020
.add_any_attr(aria_hidden("true"))
21+
// See: https://allyjs.io/tutorials/focusing-in-svg.html#making-svg-elements-focusable
3122
.add_any_attr(custom_attribute("focusable", "false"))}
32-
<Show when=move || label.get().is_some()>
33-
<VisuallyHidden::Root>{label.get().unwrap_or_default()}</VisuallyHidden::Root>
34-
</Show>
23+
<VisuallyHidden>{label.get()}</VisuallyHidden>
3524
</>
3625
}
3726
}
38-
39-
40-
/* -----------------------------------------------------------------------------------------------*/
41-
42-
pub mod primitive {
43-
pub use super::*;
44-
pub use AccessibleIcon as Root;
45-
}

‎stories/leptos/src/primitives/accessible_icon.rs‎

Lines changed: 5 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,13 @@
11
use leptos::prelude::*;
2-
use radix_leptos_accessible_icon::primitive as AccessibleIcon;
2+
use radix_leptos_accessible_icon::AccessibleIcon;
33

44
#[component]
55
pub fn Styled() -> impl IntoView {
66
view! {
77
<button r#type="button">
8-
<AccessibleIcon::Root
9-
label="Close"
10-
>
8+
<AccessibleIcon label="Close">
119
<CrossIcon />
12-
</AccessibleIcon::Root>
10+
</AccessibleIcon>
1311
</button>
1412
}
1513
}
@@ -19,11 +17,9 @@ pub fn Chromatic() -> impl IntoView {
1917
view! {
2018
<p>
2119
Some text with an inline accessible icon{" "}
22-
<AccessibleIcon::Root
23-
label="Close"
24-
>
20+
<AccessibleIcon label="Close">
2521
<CrossIcon attr:class="inline-block" />
26-
</AccessibleIcon::Root>
22+
</AccessibleIcon>
2723
</p>
2824
}
2925
}

0 commit comments

Comments
 (0)