Forms, a11y · Checkbox, Switch, Radio, RadioGroup, Slider and Select name their role, label and state (#3)

A slider's thumb reports its value, the bounds it can reach and its orientation; a select's trigger its value, placeholder and whether its list is open; a disabled control says so in its description.

src/forms/check.rs

@@ -2,8 +2,8 @@ use std::rc::Rc;
 
 use gpui::{
     Animation, AnimationExt, AnyElement, App, ElementId, InteractiveElement, IntoElement,
-    MouseButton, ParentElement, RenderOnce, SharedString, StatefulInteractiveElement, Styled,
-    Window, div, prelude::*,
+    MouseButton, ParentElement, RenderOnce, Role, SharedString, StatefulInteractiveElement, Styled,
+    Toggled, Window, div, prelude::*,
 };
 
 use super::{
@@ -11,7 +11,7 @@ use super::{
     options::{OnFlag, OnValues},
 };
 use crate::{
-    motion,
+    i18n, motion,
     primitives::{Icon, IconName, tab_stop},
     theme::{ActiveTheme, IconSize, Mix, Radius, TextSize},
 };
@@ -152,8 +152,19 @@ impl RenderOnce for Checkbox {
         } else {
             theme.colors.fg
         };
+        let toggled = match self.state {
+            CheckState::Off => Toggled::False,
+            CheckState::On => Toggled::True,
+            CheckState::Mixed => Toggled::Mixed,
+        };
         div()
             .id(self.id)
+            .role(Role::CheckBox)
+            .aria_toggled(toggled)
+            .when_some(self.label.clone(), |row, label| row.aria_label(label))
+            .when(self.disabled, |row| {
+                row.aria_description(i18n::text(cx, "state.unavailable", &[]))
+            })
             .track_focus(&focus)
             .flex()
             .items_center()

src/forms/radio.rs

@@ -2,8 +2,8 @@ use std::rc::Rc;
 
 use gpui::{
     Animation, AnimationExt, AnyElement, App, ElementId, FocusHandle, InteractiveElement,
-    IntoElement, MouseButton, ParentElement, RenderOnce, SharedString, StatefulInteractiveElement,
-    Styled, Window, div, prelude::*,
+    IntoElement, MouseButton, ParentElement, RenderOnce, Role, SharedString,
+    StatefulInteractiveElement, Styled, Window, div, prelude::*,
 };
 
 use super::{
@@ -11,7 +11,7 @@ use super::{
     options::{OnValue, Run, step},
 };
 use crate::{
-    motion,
+    i18n, motion,
     primitives::tab_stop,
     theme::{ActiveTheme, TextSize},
 };
@@ -127,6 +127,12 @@ impl RenderOnce for Radio {
         };
         div()
             .id(self.id)
+            .role(Role::RadioButton)
+            .aria_toggled(on.into())
+            .when_some(self.label.clone(), |row, label| row.aria_label(label))
+            .when(self.disabled, |row| {
+                row.aria_description(i18n::text(cx, "state.unavailable", &[]))
+            })
             .track_focus(&focus)
             .flex()
             .items_center()
@@ -242,6 +248,7 @@ impl RenderOnce for RadioGroup {
             .collect();
         div()
             .id(self.id)
+            .role(Role::RadioGroup)
             .flex()
             .when(self.horizontal, |group| group.flex_row().gap_4())
             .when(!self.horizontal, |group| group.flex_col().gap_2())

src/forms/select.rs

@@ -2,7 +2,7 @@ use std::rc::Rc;
 
 use gpui::{
     App, Bounds, Div, ElementId, Entity, FocusHandle, InteractiveElement, IntoElement,
-    KeyDownEvent, MouseButton, ParentElement, Pixels, RenderOnce, ScrollHandle, SharedString,
+    KeyDownEvent, MouseButton, ParentElement, Pixels, RenderOnce, Role, ScrollHandle, SharedString,
     Stateful, Styled, Window, canvas, div, prelude::*,
 };
 
@@ -13,6 +13,7 @@ use super::{
 };
 use crate::{
     data_display::Avatar,
+    i18n,
     primitives::{Icon, IconName, tab_stop},
     theme::{ActiveTheme, AvatarSize, ControlSize, IconSize, Radius},
     typography::Ellipsis,
@@ -197,6 +198,7 @@ pub(crate) fn listing(
         pick.clone(),
     );
     trigger
+        .aria_expanded(open)
         .on_mouse_down(MouseButton::Left, move |_, _, cx| {
             Picker::show(&toggle, !open, start, cx)
         })
@@ -325,6 +327,14 @@ impl RenderOnce for Select {
             window,
             cx,
         )
+        .role(Role::ComboBox)
+        .aria_placeholder(self.placeholder.clone())
+        .when_some(shown.as_ref(), |trigger, choice| {
+            trigger.aria_value(choice.label.clone())
+        })
+        .when(self.disabled, |trigger| {
+            trigger.aria_description(i18n::text(cx, "state.unavailable", &[]))
+        })
         .when_some(
             shown.as_ref().and_then(|choice| choice.icon),
             |trigger, icon| {

src/forms/slider.rs

@@ -2,12 +2,13 @@ use std::rc::Rc;
 
 use gpui::{
     AnyElement, App, Bounds, DragMoveEvent, ElementId, EmptyView, EntityId, InteractiveElement,
-    IntoElement, MouseButton, ParentElement, Pixels, Point, RenderOnce, StatefulInteractiveElement,
-    Styled, Window, canvas, div, prelude::*, relative,
+    IntoElement, MouseButton, Orientation, ParentElement, Pixels, Point, RenderOnce, Role,
+    StatefulInteractiveElement, Styled, Window, canvas, div, prelude::*, relative,
 };
 
 use super::options::OnNumber;
 use crate::{
+    i18n,
     primitives::tab_stop,
     theme::{ActiveTheme, Elevation},
 };
@@ -86,6 +87,13 @@ impl Track {
                 )
             })
             .collect();
+        let unavailable = self
+            .disabled
+            .then(|| i18n::text(cx, "state.unavailable", &[]));
+        let orientation = match vertical {
+            true => Orientation::Vertical,
+            false => Orientation::Horizontal,
+        };
         let theme = cx.theme();
         let colors = &theme.colors;
         let (thumb, line) = (theme.slider_thumb(), theme.slider_track());
@@ -143,8 +151,22 @@ impl Track {
             .map(|(k, at)| {
                 let focused = handles[k].is_focused(window);
                 let (commit, value) = (self.commit.clone(), self.values[k]);
+                let (floor, ceiling) = match (self.values.as_slice(), k) {
+                    ([_, high], 0) => (min, *high),
+                    ([low, _], _) => (*low, max),
+                    _ => (min, max),
+                };
                 div()
                     .id(("thumb", k))
+                    .role(Role::Slider)
+                    .aria_numeric_value(value)
+                    .aria_min_numeric_value(floor)
+                    .aria_max_numeric_value(ceiling)
+                    .aria_numeric_value_step(step)
+                    .aria_orientation(orientation)
+                    .when_some(unavailable.clone(), |thumb, text| {
+                        thumb.aria_description(text)
+                    })
                     .track_focus(&handles[k])
                     .absolute()
                     .size(thumb)

src/forms/switch.rs

@@ -2,13 +2,13 @@ use std::rc::Rc;
 
 use gpui::{
     Animation, AnimationExt, App, ElementId, InteractiveElement, IntoElement, MouseButton,
-    ParentElement, RenderOnce, SharedString, StatefulInteractiveElement, Styled, Window, div,
+    ParentElement, RenderOnce, Role, SharedString, StatefulInteractiveElement, Styled, Window, div,
     prelude::*, transparent_black,
 };
 
 use super::options::OnFlag;
 use crate::{
-    motion,
+    i18n, motion,
     primitives::tab_stop,
     theme::{ActiveTheme, Elevation, Mix, TextSize},
 };
@@ -119,6 +119,12 @@ impl RenderOnce for Switch {
         let (id, next, on_change) = (self.id.clone(), !self.on, self.on_change);
         div()
             .id(self.id)
+            .role(Role::Switch)
+            .aria_toggled(self.on.into())
+            .when_some(self.label.clone(), |row, label| row.aria_label(label))
+            .when(self.disabled, |row| {
+                row.aria_description(i18n::text(cx, "state.unavailable", &[]))
+            })
             .track_focus(&focus)
             .flex()
             .items_center()