Visually Hidden - Rust Radix

Hides content from the screen in an accessible way.

Features

Visually hides content while preserving it for assistive technology.

Installation

Install the component from your command line.

cargo add radix-leptos-visually-hidden

cargo add radix-yew-visually-hidden

Anatomy

Import the component.

use leptos::*;
use radix_leptos_visually_hidden::*;

#[component]
fn Anatomy() -> impl IntoView {
    view! {
        <VisuallyHidden />
    }
}

use radix_yew_visually_hidden::*;
use yew::prelude::*;

#[function_component]
fn Anatomy() -> Html {
    html! {
        <VisuallyHidden />
    }
}

API Reference

Root

Anything you put inside this component will be hidden from the screen but will be announced by screen readers.

Prop	Type	Default
`as_child`	`MaybeProp<bool>`	`false`

Prop	Type	Default
`as_child`	`Option<Callback<VisuallyHiddenChildProps, Html>>`	-

Example

Use the visually hidden primitive.

use leptos::*;
use radix_leptos_icons::GearIcon;
use radix_leptos_visually_hidden::*;

#[component]
fn Example() -> impl IntoView {
    view! {
        <button>
            <GearIcon />
            <VisuallyHidden>Settings</VisuallyHidden>
        </button>
    }
}

use radix_yew_icons::GearIcon;
use radix_yew_visually_hidden::*;
use yew::prelude::*;

#[component]
fn Example() -> impl IntoView {
    view! {
        <button>
            <GearIcon />
            <VisuallyHidden>{"Settings"}</VisuallyHidden>
        </button>
    }
}

Accessibility

This is useful in certain scenarios as an alternative to traditional labelling with aria-label or aria-labelledby.