dioxus_dnd/
a11y.rs

1#![doc = include_str!("../docs/api/accessibility.md")]
2
3use dioxus::prelude::*;
4
5use crate::core::use_dnd;
6
7/// Visually-hidden `aria-live="polite"` region voicing drag announcements.
8#[component]
9pub fn LiveRegion<T: Clone + PartialEq + 'static>(
10    /// Internal marker; never set this.
11    #[props(default)]
12    phantom: std::marker::PhantomData<T>,
13) -> Element {
14    let _ = phantom;
15    let dnd = use_dnd::<T>();
16    let text = dnd.announcement();
17
18    rsx! {
19        div {
20            aria_live: "polite",
21            aria_atomic: "true",
22            role: "status",
23            // Standard visually-hidden recipe: present to the accessibility
24            // tree, invisible on screen.
25            style: "position: absolute; width: 1px; height: 1px; padding: 0; \
26                    margin: -1px; overflow: hidden; clip: rect(0 0 0 0); \
27                    white-space: nowrap; border: 0;",
28            "{text}"
29        }
30    }
31}
32
33/// Headless move-up / move-down buttons - the most robust accessibility
34/// fallback of all: reordering with plain button presses, no drag gesture
35/// (pointer *or* keyboard-drag) required.
36///
37/// Renders two `button`s with ARIA labels, disabled at the list edges, and
38/// `data-reorder="up" | "down"` hooks for styling. Emits the same
39/// [`crate::sortable::SortEvent`] your drag path already handles, so one
40/// `on_sort` serves both inputs.
41///
42/// ```text
43/// SortableList {
44///     len: items.read().len(),
45///     render: move |ix: usize| rsx! {
46///         span { "{items.read()[ix]}" }
47///         ReorderButtons { index: ix, total: items.read().len(), on_sort }
48///     },
49///     on_sort,
50/// }
51/// ```
52#[component]
53pub fn ReorderButtons(
54    /// This row's index.
55    index: usize,
56    /// Total number of rows.
57    total: usize,
58    /// Accessible name of the item, used in the button labels.
59    #[props(default)]
60    label: Option<String>,
61    /// Fired with the same event shape as drag-reordering.
62    on_sort: EventHandler<crate::sortable::SortEvent>,
63    #[props(extends = span, extends = GlobalAttributes)] attributes: Vec<Attribute>,
64) -> Element {
65    let strings = crate::core::use_dnd_strings();
66    let name = label.unwrap_or_else(|| (strings.row)(index + 1));
67    let up_label = (strings.move_up)(&name);
68    let down_label = (strings.move_down)(&name);
69    let mut attributes = attributes;
70    crate::core::components::protect_attributes(&mut attributes, &["onpointerdown"]);
71
72    rsx! {
73        span {
74            // Pressing a button must not start (or capture the pointer for) an
75            // enclosing drag surface - e.g. a `SortableList` row these are
76            // rendered inside - or the row would grab pointer capture on
77            // pointerdown and swallow the button's click. Stop the gesture at
78            // the buttons so taps stay taps and the parent still drags elsewhere.
79            onpointerdown: move |evt: PointerEvent| evt.stop_propagation(),
80            ..attributes,
81            button {
82                r#type: "button",
83                "data-reorder": "up",
84                aria_label: "{up_label}",
85                disabled: index == 0,
86                onclick: move |evt| {
87                    evt.stop_propagation();
88                    if index > 0 {
89                        on_sort.call(crate::sortable::SortEvent { from: index, to: index - 1 });
90                    }
91                },
92                "↑"
93            }
94            button {
95                r#type: "button",
96                "data-reorder": "down",
97                aria_label: "{down_label}",
98                disabled: index + 1 >= total,
99                onclick: move |evt| {
100                    evt.stop_propagation();
101                    if index + 1 < total {
102                        on_sort.call(crate::sortable::SortEvent { from: index, to: index + 1 });
103                    }
104                },
105                "↓"
106            }
107        }
108    }
109}
110
111/// The reduced-motion override: when the user asks the OS for less motion,
112/// every animated element the crate marks with `data-dnd-motion` snaps
113/// instead of gliding. Near-zero rather than zero so `transitionend` still
114/// fires for anything listening.
115pub(crate) const REDUCED_MOTION_CSS: &str = "@media (prefers-reduced-motion: reduce) { \
116     [data-dnd-motion] { transition-duration: 0.01ms !important; } }";
117
118/// Marker context: the reduced-motion stylesheet already renders somewhere
119/// above, so nested animated components skip theirs.
120#[derive(Clone, Copy)]
121pub(crate) struct MotionCssProvided;
122
123/// One `<style>` with [`REDUCED_MOTION_CSS`] per subtree: the outermost
124/// animated component renders it and marks the context; anything below
125/// gets `None`. Sibling subtrees may each render one, which is harmless.
126///
127/// The element carries an inline `display: none`. The UA stylesheet hides
128/// `<style>` anyway, but at zero specificity: an app rule like
129/// `.list > * { display: flex }` would override it and paint the CSS
130/// source as visible text inside the list. An inline declaration outranks
131/// any selector, so the sheet stays invisible whatever the page styles.
132pub(crate) fn use_reduced_motion_css() -> Option<Element> {
133    let first = use_hook(|| {
134        if try_consume_context::<MotionCssProvided>().is_none() {
135            provide_context(MotionCssProvided);
136            true
137        } else {
138            false
139        }
140    });
141    first.then(|| {
142        rsx! {
143            style { style: "display: none;", {REDUCED_MOTION_CSS} }
144        }
145    })
146}
dioxus_dnd/a11y.rs

dioxus_dnd/
a11y.rs
