From 852d59752e209d4f3cdc38e164f5eeb31e164700 Mon Sep 17 00:00:00 2001 From: Tom Pridham Date: Sun, 12 Apr 2020 00:51:17 -0600 Subject: [PATCH] add some accessibility features to web widgets --- web/src/widget/checkbox.rs | 20 +++++++++++++++++--- web/src/widget/image.rs | 16 +++++++++++++++- web/src/widget/radio.rs | 31 +++++++++++++++++++++++++++++-- 3 files changed, 61 insertions(+), 6 deletions(-) diff --git a/web/src/widget/checkbox.rs b/web/src/widget/checkbox.rs index 5ebc26c8..10a46661 100644 --- a/web/src/widget/checkbox.rs +++ b/web/src/widget/checkbox.rs @@ -28,6 +28,7 @@ pub struct Checkbox { is_checked: bool, on_toggle: Rc Message>, label: String, + id: String, width: Length, style: Box, } @@ -51,6 +52,7 @@ impl Checkbox { is_checked, on_toggle: Rc::new(f), label: label.into(), + id: Default::default(), width: Length::Shrink, style: Default::default(), } @@ -71,6 +73,14 @@ impl Checkbox { self.style = style.into(); self } + + /// Sets the id of the [`Checkbox`]. + /// + /// [`Checkbox`]: struct.Checkbox.html + pub fn id(mut self, id: impl Into) -> Self { + self.id = id.into(); + self + } } impl Widget for Checkbox @@ -85,7 +95,10 @@ where ) -> dodrio::Node<'b> { use dodrio::builder::*; - let checkbox_label = bumpalo::format!(in bump, "{}", self.label); + let checkbox_label = + bumpalo::format!(in bump, "{}", self.label).into_bump_str(); + let checkbox_id = + bumpalo::format!(in bump, "{}", self.id).into_bump_str(); let event_bus = bus.clone(); let on_toggle = self.on_toggle.clone(); @@ -96,6 +109,7 @@ where let spacing_class = style_sheet.insert(bump, css::Rule::Spacing(5)); label(bump) + .attr("for", checkbox_id) .attr( "class", bumpalo::format!(in bump, "{} {}", row_class, spacing_class) @@ -110,6 +124,7 @@ where // TODO: Checkbox styling input(bump) .attr("type", "checkbox") + .attr("id", checkbox_id) .bool_attr("checked", self.is_checked) .on("click", move |_root, vdom, _event| { let msg = on_toggle(!is_checked); @@ -118,8 +133,7 @@ where vdom.schedule_render(); }) .finish(), - span(bump).children(vec![ - text(checkbox_label.into_bump_str())]).finish(), + text(checkbox_label), ]) .finish() } diff --git a/web/src/widget/image.rs b/web/src/widget/image.rs index 029ab352..a20bebea 100644 --- a/web/src/widget/image.rs +++ b/web/src/widget/image.rs @@ -22,6 +22,9 @@ pub struct Image { /// The image path pub handle: Handle, + /// The alt text of the image + pub alt: String, + /// The width of the image pub width: Length, @@ -36,6 +39,7 @@ impl Image { pub fn new>(handle: T) -> Self { Image { handle: handle.into(), + alt: Default::default(), width: Length::Shrink, height: Length::Shrink, } @@ -56,6 +60,14 @@ impl Image { self.height = height; self } + + /// Sets the alt text of the [`Image`]. + /// + /// [`Image`]: struct.Image.html + pub fn alt(mut self, alt: impl Into) -> Self { + self.alt = alt.into(); + self + } } impl Widget for Image { @@ -70,8 +82,10 @@ impl Widget for Image { let src = bumpalo::format!(in bump, "{}", match self.handle.data.as_ref() { Data::Path(path) => path.to_str().unwrap_or("") }); + let alt = bumpalo::format!(in bump, "{}", self.alt).into_bump_str(); - let mut image = img(bump).attr("src", src.into_bump_str()); + let mut image = + img(bump).attr("src", src.into_bump_str()).attr("alt", alt); match self.width { Length::Shrink => {} diff --git a/web/src/widget/radio.rs b/web/src/widget/radio.rs index 520b24cd..acbac3b6 100644 --- a/web/src/widget/radio.rs +++ b/web/src/widget/radio.rs @@ -35,6 +35,8 @@ pub struct Radio { is_selected: bool, on_click: Message, label: String, + id: String, + name: String, style: Box, } @@ -63,6 +65,8 @@ impl Radio { is_selected: Some(value) == selected, on_click: f(value), label: label.into(), + id: Default::default(), + name: Default::default(), style: Default::default(), } } @@ -74,6 +78,22 @@ impl Radio { self.style = style.into(); self } + + /// Sets the name attribute of the [`Radio`] button. + /// + /// [`Radio`]: struct.Radio.html + pub fn name(mut self, name: impl Into) -> Self { + self.name = name.into(); + self + } + + /// Sets the id of the [`Radio`] button. + /// + /// [`Radio`]: struct.Radio.html + pub fn id(mut self, id: impl Into) -> Self { + self.id = id.into(); + self + } } impl Widget for Radio @@ -88,7 +108,11 @@ where ) -> dodrio::Node<'b> { use dodrio::builder::*; - let radio_label = bumpalo::format!(in bump, "{}", self.label); + let radio_label = + bumpalo::format!(in bump, "{}", self.label).into_bump_str(); + let radio_name = + bumpalo::format!(in bump, "{}", self.name).into_bump_str(); + let radio_id = bumpalo::format!(in bump, "{}", self.id).into_bump_str(); let event_bus = bus.clone(); let on_click = self.on_click.clone(); @@ -96,16 +120,19 @@ where // TODO: Complete styling label(bump) .attr("style", "display: block; font-size: 20px") + .attr("for", radio_id) .children(vec![ input(bump) .attr("type", "radio") + .attr("id", radio_id) + .attr("name", radio_name) .attr("style", "margin-right: 10px") .bool_attr("checked", self.is_selected) .on("click", move |_root, _vdom, _event| { event_bus.publish(on_click.clone()); }) .finish(), - text(radio_label.into_bump_str()), + text(radio_label), ]) .finish() }