add some accessibility features to web widgets

web/src/widget/checkbox.rs

@@ -28,6 +28,7 @@ pub struct Checkbox<Message> {
     is_checked: bool,
     on_toggle: Rc<dyn Fn(bool) -> Message>,
     label: String,
+    id: String,
     width: Length,
     style: Box<dyn StyleSheet>,
 }
@@ -51,6 +52,7 @@ impl<Message> Checkbox<Message> {
             is_checked,
             on_toggle: Rc::new(f),
             label: label.into(),
+            id: Default::default(),
             width: Length::Shrink,
             style: Default::default(),
         }
@@ -71,6 +73,14 @@ impl<Message> Checkbox<Message> {
         self.style = style.into();
         self
     }
+
+    /// Sets the id of the [`Checkbox`].
+    ///
+    /// [`Checkbox`]: struct.Checkbox.html
+    pub fn id(mut self, id: impl Into<String>) -> Self {
+        self.id = id.into();
+        self
+    }
 }
 
 impl<Message> Widget<Message> for Checkbox<Message>
@@ -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),
-                text(checkbox_label.into_bump_str())]).finish(),
             ])
             .finish()
     }

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<T: Into<Handle>>(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<String>) -> Self {
+        self.alt = alt.into();
+        self
+    }
 }
 
 impl<Message> Widget<Message> for Image {
@@ -70,8 +82,10 @@ impl<Message> Widget<Message> 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 => {}

web/src/widget/radio.rs

@@ -35,6 +35,8 @@ pub struct Radio<Message> {
     is_selected: bool,
     on_click: Message,
     label: String,
+    id: String,
+    name: String,
     style: Box<dyn StyleSheet>,
 }
 
@@ -63,6 +65,8 @@ impl<Message> Radio<Message> {
             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<Message> Radio<Message> {
         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<String>) -> 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<String>) -> Self {
+        self.id = id.into();
+        self
+    }
 }
 
 impl<Message> Widget<Message> for Radio<Message>
@@ -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()
     }