From 852d59752e209d4f3cdc38e164f5eeb31e164700 Mon Sep 17 00:00:00 2001 From: Tom Pridham Date: Sun, 12 Apr 2020 00:51:17 -0600 Subject: 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(-) (limited to 'web/src/widget') 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() } -- cgit From ffd195cdb543dfbff42327c516d6082cb2df51ef Mon Sep 17 00:00:00 2001 From: Héctor Ramón Jiménez Date: Wed, 1 Jul 2020 06:52:13 +0200 Subject: Fix empty `id` and `name` attributes in `iced_web` --- web/src/widget/checkbox.rs | 22 +++++++++++++--------- web/src/widget/radio.rs | 38 ++++++++++++++++++++++++-------------- 2 files changed, 37 insertions(+), 23 deletions(-) (limited to 'web/src/widget') diff --git a/web/src/widget/checkbox.rs b/web/src/widget/checkbox.rs index 10a46661..4d0c7c17 100644 --- a/web/src/widget/checkbox.rs +++ b/web/src/widget/checkbox.rs @@ -28,7 +28,7 @@ pub struct Checkbox { is_checked: bool, on_toggle: Rc Message>, label: String, - id: String, + id: Option, width: Length, style: Box, } @@ -52,7 +52,7 @@ impl Checkbox { is_checked, on_toggle: Rc::new(f), label: label.into(), - id: Default::default(), + id: None, width: Length::Shrink, style: Default::default(), } @@ -78,7 +78,7 @@ impl Checkbox { /// /// [`Checkbox`]: struct.Checkbox.html pub fn id(mut self, id: impl Into) -> Self { - self.id = id.into(); + self.id = Some(id.into()); self } } @@ -97,8 +97,6 @@ where 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(); @@ -108,8 +106,15 @@ where let spacing_class = style_sheet.insert(bump, css::Rule::Spacing(5)); - label(bump) - .attr("for", checkbox_id) + let (label, input) = if let Some(id) = &self.id { + let id = bumpalo::format!(in bump, "{}", id).into_bump_str(); + + (label(bump).attr("for", id), input(bump).attr("id", id)) + } else { + (label(bump), input(bump)) + }; + + label .attr( "class", bumpalo::format!(in bump, "{} {}", row_class, spacing_class) @@ -122,9 +127,8 @@ where ) .children(vec![ // TODO: Checkbox styling - input(bump) + input .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); diff --git a/web/src/widget/radio.rs b/web/src/widget/radio.rs index acbac3b6..fae67cd8 100644 --- a/web/src/widget/radio.rs +++ b/web/src/widget/radio.rs @@ -35,8 +35,8 @@ pub struct Radio { is_selected: bool, on_click: Message, label: String, - id: String, - name: String, + id: Option, + name: Option, style: Box, } @@ -65,8 +65,8 @@ impl Radio { is_selected: Some(value) == selected, on_click: f(value), label: label.into(), - id: Default::default(), - name: Default::default(), + id: None, + name: None, style: Default::default(), } } @@ -83,7 +83,7 @@ impl Radio { /// /// [`Radio`]: struct.Radio.html pub fn name(mut self, name: impl Into) -> Self { - self.name = name.into(); + self.name = Some(name.into()); self } @@ -91,7 +91,7 @@ impl Radio { /// /// [`Radio`]: struct.Radio.html pub fn id(mut self, id: impl Into) -> Self { - self.id = id.into(); + self.id = Some(id.into()); self } } @@ -110,22 +110,32 @@ where 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(); + let (label, input) = if let Some(id) = &self.id { + let id = bumpalo::format!(in bump, "{}", id).into_bump_str(); + + (label(bump).attr("for", id), input(bump).attr("id", id)) + } else { + (label(bump), input(bump)) + }; + + let input = if let Some(name) = &self.name { + let name = bumpalo::format!(in bump, "{}", name).into_bump_str(); + + dodrio::builder::input(bump).attr("name", name) + } else { + input + }; + // TODO: Complete styling - label(bump) + label .attr("style", "display: block; font-size: 20px") - .attr("for", radio_id) .children(vec![ - input(bump) + input .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| { -- cgit