feat(a11y): screen reader name and description support for button widgets

This commit is contained in:
Michael Aaron Murphy 2026-01-09 23:03:09 +01:00 committed by Michael Murphy
parent f6039597b7
commit b9c24d2421
6 changed files with 122 additions and 19 deletions

View file

@ -38,6 +38,10 @@ impl<Message> Button<'_, Message> {
Self {
id: Id::unique(),
label: Cow::Borrowed(""),
#[cfg(feature = "a11y")]
name: Cow::Borrowed(""),
#[cfg(feature = "a11y")]
description: Cow::Borrowed(""),
tooltip: Cow::Borrowed(""),
on_press: None,
width: Length::Shrink,
@ -151,7 +155,7 @@ impl<'a, Message: Clone + 'static> From<Button<'a, Message>> for Element<'a, Mes
);
}
let button = if builder.variant.vertical {
let mut button = if builder.variant.vertical {
crate::widget::column::with_children(content)
.padding(builder.padding)
.spacing(builder.spacing)
@ -167,6 +171,11 @@ impl<'a, Message: Clone + 'static> From<Button<'a, Message>> for Element<'a, Mes
.apply(super::custom)
};
#[cfg(feature = "a11y")]
{
button = button.name(builder.name).description(builder.description);
}
let button = button
.padding(0)
.id(builder.id)

View file

@ -33,6 +33,10 @@ impl<'a, Message> Button<'a, Message> {
Self {
id: Id::unique(),
label: Cow::Borrowed(""),
#[cfg(feature = "a11y")]
name: Cow::Borrowed(""),
#[cfg(feature = "a11y")]
description: Cow::Borrowed(""),
tooltip: Cow::Borrowed(""),
on_press: None,
width: Length::Shrink,
@ -79,12 +83,18 @@ where
.width(builder.width)
.height(builder.height);
super::custom_image_button(content, builder.variant.on_remove)
let mut button = super::custom_image_button(content, builder.variant.on_remove)
.padding(0)
.selected(builder.variant.selected)
.id(builder.id)
.on_press_maybe(builder.on_press)
.class(builder.class)
.into()
.class(builder.class);
#[cfg(feature = "a11y")]
{
button = button.name(builder.name).description(builder.description);
}
button.into()
}
}

View file

@ -34,6 +34,10 @@ impl<'a, Message> Button<'a, Message> {
Self {
id: Id::unique(),
label: label.into(),
#[cfg(feature = "a11y")]
name: Cow::Borrowed(""),
#[cfg(feature = "a11y")]
description: Cow::Borrowed(""),
tooltip: Cow::Borrowed(""),
on_press: None,
width: Length::Shrink,
@ -62,7 +66,7 @@ pub fn icon() -> Handle {
impl<'a, Message: Clone + 'static> From<Button<'a, Message>> for Element<'a, Message> {
fn from(mut builder: Button<'a, Message>) -> Element<'a, Message> {
let button: super::Button<'a, Message> = row::with_capacity(2)
let mut button: super::Button<'a, Message> = row::with_capacity(2)
.push({
// TODO: Avoid allocation
crate::widget::text(builder.label.to_string())
@ -89,6 +93,15 @@ impl<'a, Message: Clone + 'static> From<Button<'a, Message>> for Element<'a, Mes
.on_press_maybe(builder.on_press.take())
.class(builder.class);
#[cfg(feature = "a11y")]
{
if !builder.label.is_empty() {
button = button.name(builder.label);
}
button = button.description(builder.description);
}
if builder.tooltip.is_empty() {
button.into()
} else {

View file

@ -69,6 +69,16 @@ pub struct Builder<'a, Message, Variant> {
#[setters(into)]
label: Cow<'a, str>,
/// A name for screen reader support
#[cfg(feature = "a11y")]
#[setters(into)]
name: Cow<'a, str>,
/// A description for screen reader support
#[cfg(feature = "a11y")]
#[setters(into)]
description: Cow<'a, str>,
// Adds a tooltip to the button.
#[setters(into)]
tooltip: Cow<'a, str>,

View file

@ -63,6 +63,10 @@ impl<Message> Button<'_, Message> {
Self {
id: Id::unique(),
label: Cow::Borrowed(""),
#[cfg(feature = "a11y")]
name: Cow::Borrowed(""),
#[cfg(feature = "a11y")]
description: Cow::Borrowed(""),
tooltip: Cow::Borrowed(""),
on_press: None,
width: Length::Shrink,
@ -136,8 +140,10 @@ impl<'a, Message: Clone + 'static> From<Button<'a, Message>> for Element<'a, Mes
#[cfg(feature = "a11y")]
{
if !builder.label.is_empty() {
button = button.name(builder.label);
button = button.name(builder.label)
}
button = button.description(builder.description);
}
if builder.tooltip.is_empty() {