a11y: Accessibility support for all components

Cargo.toml

@@ -32,11 +32,11 @@ gpui-component-macros = { path = "crates/macros", version = "0.5.1" }
 gpui-component-assets = { path = "crates/assets", version = "0.5.1" }
 story = { path = "crates/story" }
 
-gpui = { git = "https://github.com/zed-industries/zed", rev = "1d217ee39d381ac101b7cf49d3d22451ac1093fe" }
-gpui_platform = { git = "https://github.com/zed-industries/zed", rev = "1d217ee39d381ac101b7cf49d3d22451ac1093fe", features = ["font-kit", "x11", "wayland", "runtime_shaders"] }
-gpui_web = { git = "https://github.com/zed-industries/zed", rev = "1d217ee39d381ac101b7cf49d3d22451ac1093fe" }
-gpui_macros = { git = "https://github.com/zed-industries/zed", rev = "1d217ee39d381ac101b7cf49d3d22451ac1093fe" }
-reqwest_client = { git = "https://github.com/zed-industries/zed", rev = "1d217ee39d381ac101b7cf49d3d22451ac1093fe" }
+gpui = { git = "https://github.com/zed-industries/zed" }
+gpui_platform = { git = "https://github.com/zed-industries/zed", features = ["font-kit", "x11", "wayland", "runtime_shaders"] }
+gpui_web = { git = "https://github.com/zed-industries/zed" }
+gpui_macros = { git = "https://github.com/zed-industries/zed" }
+reqwest_client = { git = "https://github.com/zed-industries/zed" }
 sum-tree = { version = "0.2.0", package = "zed-sum-tree" }
 # reqwest = { version = "0.12.15-zed", package = "zed-reqwest" }
 reqwest = { git = "https://github.com/zed-industries/reqwest.git", rev = "c15662463bda39148ba154100dd44d3fba5873a4", default-features = false, features = [

crates/story/src/main.rs

@@ -1,5 +1,5 @@
 use gpui_component_assets::Assets;
-use gpui_component_story::{Gallery, init, create_new_window};
+use gpui_component_story::{Gallery, create_new_window, init};
 
 fn main() {
     let app = gpui_platform::application().with_assets(Assets);

crates/story/src/stories/button_story.rs

@@ -491,7 +491,7 @@ impl Render for ButtonStory {
                 section("With Dropdown Caret")
                     .max_w_lg()
                     .child(
-                        Button::new("button-outline-1")
+                        Button::new("button-dropdown-caret-primary")
                             .primary()
                             .dropdown_caret(true)
                             .label("Primary Button")
@@ -502,7 +502,7 @@ impl Render for ButtonStory {
                             .on_click(Self::on_click),
                     )
                     .child(
-                        Button::new("button-outline-2")
+                        Button::new("button-dropdown-caret-default")
                             .label("Default Button")
                             .dropdown_caret(true)
                             .disabled(disabled)
@@ -523,7 +523,7 @@ impl Render for ButtonStory {
                             .on_click(Self::on_click),
                     )
                     .child(
-                        Button::new("button-outline-5-ghost")
+                        Button::new("button-dropdown-caret-ghost")
                             .ghost()
                             .dropdown_caret(true)
                             .label("Ghost Button")
@@ -534,7 +534,7 @@ impl Render for ButtonStory {
                             .on_click(Self::on_click),
                     )
                     .child(
-                        Button::new("button-outline-5-link")
+                        Button::new("button-dropdown-caret-link")
                             .link()
                             .dropdown_caret(true)
                             .label("Link Button")
@@ -545,7 +545,7 @@ impl Render for ButtonStory {
                             .on_click(Self::on_click),
                     )
                     .child(
-                        Button::new("button-outline-5-text")
+                        Button::new("button-dropdown-caret-small")
                             .outline()
                             .small()
                             .dropdown_caret(true)
@@ -735,23 +735,23 @@ impl Render for ButtonStory {
                         .layout(Axis::Vertical)
                         .disabled(disabled)
                         .child(
-                            Button::new("button-one")
+                            Button::new("button-vertical-one")
                                 .label("One")
                                 .disabled(disabled)
                                 .selected(selected)
                                 .when(compact, |this| this.compact())
                                 .on_click(Self::on_click),
                         )
                         .child(
-                            Button::new("button-two")
+                            Button::new("button-vertical-two")
                                 .label("Two")
                                 .disabled(disabled)
                                 .selected(selected)
                                 .when(compact, |this| this.compact())
                                 .on_click(Self::on_click),
                         )
                         .child(
-                            Button::new("button-three")
+                            Button::new("button-vertical-three")
                                 .label("Three")
                                 .disabled(disabled)
                                 .selected(selected)

crates/ui/Cargo.toml

@@ -193,6 +193,7 @@ objc2-app-kit = { version = "0.3", features = [
     "NSMenu",
     "NSMenuItem",
     "NSView",
+    "NSWindow",
     "NSResponder",
     "NSEvent",
     "NSImage",

crates/ui/src/accordion.rs

@@ -2,7 +2,7 @@ use std::{cell::RefCell, collections::HashSet, rc::Rc, sync::Arc};
 
 use gpui::{
     AnyElement, App, ElementId, InteractiveElement as _, IntoElement, ParentElement, RenderOnce,
-    SharedString, StatefulInteractiveElement as _, Styled, Window, div,
+    Role, SharedString, StatefulInteractiveElement as _, Styled, Window, div,
     prelude::FluentBuilder as _, rems,
 };
 
@@ -240,6 +240,8 @@ impl RenderOnce for AccordionItem {
                 .child(
                     h_flex()
                         .id(self.index)
+                        .role(Role::Button)
+                        .aria_expanded(self.open)
                         .justify_between()
                         .gap_3()
                         .map(|this| match self.size {

crates/ui/src/alert.rs

@@ -2,8 +2,8 @@ use std::rc::Rc;
 
 use gpui::{
     App, ClickEvent, ElementId, Empty, Hsla, InteractiveElement, IntoElement, ParentElement as _,
-    RenderOnce, SharedString, StatefulInteractiveElement, StyleRefinement, Styled, Window, div,
-    prelude::FluentBuilder as _, px, rems, transparent_white,
+    RenderOnce, Role, SharedString, StatefulInteractiveElement, StyleRefinement, Styled, Window,
+    div, prelude::FluentBuilder as _, px, rems, transparent_white,
 };
 
 use crate::{
@@ -189,6 +189,7 @@ impl RenderOnce for Alert {
 
         h_flex()
             .id(self.id)
+            .role(Role::Alert)
             .w_full()
             .text_color(fg)
             .bg(bg)

crates/ui/src/breadcrumb.rs

@@ -2,7 +2,7 @@ use std::rc::Rc;
 
 use gpui::{
     div, prelude::FluentBuilder as _, App, ClickEvent, ElementId, InteractiveElement as _,
-    IntoElement, ParentElement, RenderOnce, SharedString, StatefulInteractiveElement,
+    IntoElement, ParentElement, RenderOnce, Role, SharedString, StatefulInteractiveElement,
     StyleRefinement, Styled, Window,
 };
 
@@ -92,6 +92,11 @@ impl RenderOnce for BreadcrumbItem {
     fn render(self, _: &mut Window, cx: &mut App) -> impl IntoElement {
         div()
             .id(self.id)
+            .role(if self.on_click.is_some() && !self.disabled {
+                Role::Link
+            } else {
+                Role::ListItem
+            })
             .child(self.label)
             .text_color(cx.theme().muted_foreground)
             .when(self.is_last, |this| this.text_color(cx.theme().foreground))

crates/ui/src/button/button.rs

@@ -10,8 +10,8 @@ use crate::{
 use gpui::{
     AnyElement, App, Background, ClickEvent, Corners, Div, Edges, ElementId, Hsla,
     InteractiveElement, Interactivity, IntoElement, MouseButton, ParentElement, Pixels, RenderOnce,
-    SharedString, Stateful, StatefulInteractiveElement as _, StyleRefinement, Styled, Window, div,
-    prelude::FluentBuilder as _, px, relative, transparent_white,
+    Role, SharedString, Stateful, StatefulInteractiveElement as _, StyleRefinement, Styled, Window,
+    div, prelude::FluentBuilder as _, px, relative, transparent_white,
 };
 
 #[derive(Default, Clone, Copy)]
@@ -461,6 +461,15 @@ impl RenderOnce for Button {
         };
 
         self.base
+            .role(if self.variant.is_link() {
+                Role::Link
+            } else {
+                Role::Button
+            })
+            .when_some(self.label.as_ref(), |this, label| {
+                this.aria_label(label.clone())
+            })
+            .aria_selected(self.selected)
             .when(!self.disabled, |this| {
                 this.track_focus(
                     &focus_handle

crates/ui/src/button/dropdown_button.rs

@@ -1,8 +1,7 @@
 use gpui::Corners;
 use gpui::{
-    Anchor, App, Context, Edges, ElementId, InteractiveElement as _, IntoElement,
-    ParentElement, RenderOnce, SharedString, StyleRefinement, Styled, Window, div,
-    prelude::FluentBuilder,
+    Anchor, App, Context, Edges, ElementId, InteractiveElement as _, IntoElement, ParentElement,
+    RenderOnce, SharedString, StyleRefinement, Styled, Window, div, prelude::FluentBuilder,
 };
 
 use crate::{

crates/ui/src/button/toggle.rs

@@ -2,8 +2,8 @@ use std::{cell::Cell, rc::Rc};
 
 use gpui::{
     AnyElement, App, Corners, Edges, ElementId, InteractiveElement, IntoElement, ParentElement,
-    RenderOnce, SharedString, StatefulInteractiveElement, StyleRefinement, Styled, Window, div,
-    prelude::FluentBuilder as _,
+    RenderOnce, Role, SharedString, StatefulInteractiveElement, StyleRefinement, Styled, Toggled,
+    Window, div, prelude::FluentBuilder as _,
 };
 use smallvec::{SmallVec, smallvec};
 
@@ -156,6 +156,12 @@ impl RenderOnce for Toggle {
 
         div()
             .id(self.id)
+            .role(Role::Button)
+            .aria_toggled(if checked { Toggled::True } else { Toggled::False })
+            .when_some(
+                self.tooltip.text.as_ref().map(|(text, _)| text.clone()),
+                |this, label| this.aria_label(label),
+            )
             .flex()
             .flex_row()
             .items_center()
@@ -309,6 +315,7 @@ impl RenderOnce for ToggleGroup {
 
         h_flex()
             .id(self.id)
+            .role(Role::Toolbar)
             .when(!self.segmented, |this| this.gap_2())
             .refine_style(&self.style)
             .children(self.items.into_iter().enumerate().map({

crates/ui/src/checkbox.rs

@@ -6,8 +6,8 @@ use crate::{
 };
 use gpui::{
     Animation, AnimationExt, AnyElement, App, Div, ElementId, InteractiveElement, IntoElement,
-    ParentElement, RenderOnce, SharedString, StatefulInteractiveElement, StyleRefinement, Styled,
-    Window, div, prelude::FluentBuilder as _, px, relative, rems, svg,
+    ParentElement, RenderOnce, Role, SharedString, StatefulInteractiveElement, StyleRefinement,
+    Styled, Toggled, Window, div, prelude::FluentBuilder as _, px, relative, rems, svg,
 };
 
 /// A Checkbox element.
@@ -222,6 +222,12 @@ impl RenderOnce for Checkbox {
         div().child(
             self.base
                 .id(self.id.clone())
+                .role(Role::CheckBox)
+                .aria_toggled(if checked { Toggled::True } else { Toggled::False })
+                .when_some(
+                    self.label.as_ref().map(|l| l.get_text(cx)),
+                    |this, label| this.aria_label(label),
+                )
                 .when(!self.disabled, |this| {
                     this.track_focus(
                         &focus_handle

crates/ui/src/combobox.rs

@@ -1,7 +1,7 @@
 use gpui::{
     AnyElement, App, Bounds, ClickEvent, Context, DismissEvent, Edges, ElementId, Entity,
     EventEmitter, FocusHandle, Focusable, Hsla, InteractiveElement, IntoElement, KeyBinding,
-    Length, MouseDownEvent, ParentElement, Pixels, Render, RenderOnce, SharedString,
+    Length, MouseDownEvent, ParentElement, Pixels, Render, RenderOnce, Role, SharedString,
     StatefulInteractiveElement, StyleRefinement, Styled, Window, anchored, deferred, div,
     prelude::FluentBuilder, px, rems,
 };
@@ -881,8 +881,12 @@ where
             }
         });
 
+        let is_open = self.state.read(cx).state.open;
+
         div()
             .id(self.id.clone())
+            .role(Role::ComboBox)
+            .aria_expanded(is_open)
             .key_context(CONTEXT)
             .when(!disabled, |this| {
                 this.track_focus(&focus_handle.tab_stop(true))

crates/ui/src/dialog/alert_dialog.rs

@@ -275,6 +275,7 @@ impl AlertDialog {
 
         self.base
             .button_props(button_props.clone())
+            .alert_dialog_role()
             .when(has_header, |this| {
                 this.header(
                     DialogHeader::new().child(

crates/ui/src/dialog/dialog.rs

@@ -3,8 +3,9 @@ use std::{rc::Rc, sync::LazyLock, time::Duration};
 use gpui::{
     Animation, AnimationExt as _, AnyElement, App, Bounds, BoxShadow, ClickEvent, Edges,
     FocusHandle, Hsla, InteractiveElement, IntoElement, KeyBinding, MouseButton, ParentElement,
-    Pixels, Point, RenderOnce, SharedString, StyleRefinement, Styled, Window, WindowControlArea,
-    actions, anchored, div, hsla, point, prelude::FluentBuilder, px,
+    Pixels, Point, RenderOnce, Role, SharedString, StatefulInteractiveElement as _, StyleRefinement,
+    Styled, Window, WindowControlArea, actions, anchored, div, hsla, point, prelude::FluentBuilder,
+    px,
 };
 use rust_i18n::t;
 
@@ -208,6 +209,7 @@ pub struct Dialog {
     pub(crate) footer: Option<AnyElement>,
     pub(crate) content_builder: Option<ContentBuilderFn>,
     pub(crate) props: DialogProps,
+    pub(crate) a11y_role: Role,
 
     button_props: DialogButtonProps,
 
@@ -239,6 +241,7 @@ impl Dialog {
             children: Vec::new(),
             layer_ix: 0,
             button_props: DialogButtonProps::default(),
+            a11y_role: Role::Dialog,
         }
     }
 
@@ -287,6 +290,11 @@ impl Dialog {
         self
     }
 
+    pub(crate) fn alert_dialog_role(mut self) -> Self {
+        self.a11y_role = Role::AlertDialog;
+        self
+    }
+
     /// Sets the callback for when the dialog is closed.
     ///
     /// Called after [`Self::on_ok`] or [`Self::on_cancel`] callback.
@@ -523,6 +531,7 @@ impl RenderOnce for Dialog {
                     .child(
                         v_flex()
                             .id(layer_ix)
+                            .role(self.a11y_role)
                             .track_focus(&self.focus_handle)
                             .focus_trap(format!("dialog-{}", layer_ix), &self.focus_handle)
                             .bg(cx.theme().tokens.background)

crates/ui/src/input/input.rs

@@ -3,8 +3,8 @@ use std::rc::Rc;
 use gpui::prelude::FluentBuilder as _;
 use gpui::{
     AnyElement, App, DefiniteLength, Edges, EdgesRefinement, Entity, Hsla, InteractiveElement as _,
-    IntoElement, MouseButton, ParentElement as _, Rems, RenderOnce, StyleRefinement, Styled,
-    TextAlign, Window, div, px, relative,
+    IntoElement, MouseButton, ParentElement as _, Rems, RenderOnce, Role,
+    StatefulInteractiveElement as _, StyleRefinement, Styled, TextAlign, Window, div, px, relative,
 };
 
 use crate::button::{Button, ButtonVariants as _};
@@ -289,6 +289,11 @@ impl RenderOnce for Input {
 
         div()
             .id(("input", self.state.entity_id()))
+            .role(if state.mode.is_multi_line() {
+                Role::MultilineTextInput
+            } else {
+                Role::TextInput
+            })
             .flex()
             .key_context(crate::input::CONTEXT)
             .track_focus(&state.focus_handle.clone())

crates/ui/src/input/number_input.rs

@@ -5,8 +5,9 @@ use gpui::Corners;
 use gpui::Window;
 use gpui::{AnyElement, App, Context, Edges, Entity, EventEmitter, FocusHandle, Focusable};
 use gpui::{
-    InteractiveElement, IntoElement, KeyBinding, ParentElement, RenderOnce, SharedString,
-    StyleRefinement, Styled, TextAlign, actions, prelude::FluentBuilder as _,
+    InteractiveElement, IntoElement, KeyBinding, ParentElement, RenderOnce, Role, SharedString,
+    StatefulInteractiveElement as _, StyleRefinement, Styled, TextAlign, actions,
+    prelude::FluentBuilder as _,
 };
 
 use crate::{
@@ -296,8 +297,12 @@ impl RenderOnce for NumberInput {
             });
         }
 
+        let numeric_value = self.state.read(cx).value().parse::<f64>().ok();
+
         h_flex()
             .id(("number-input", self.state.entity_id()))
+            .role(Role::SpinButton)
+            .when_some(numeric_value, |this, v| this.aria_numeric_value(v))
             .key_context(CONTEXT)
             .on_action(window.listener_for(&self.state, InputState::on_action_increment))
             .on_action(window.listener_for(&self.state, InputState::on_action_decrement))

crates/ui/src/lib.rs

@@ -11,6 +11,8 @@ mod icon;
 mod index_path;
 #[cfg(any(feature = "inspector", debug_assertions))]
 mod inspector;
+#[cfg(target_os = "macos")]
+mod macos_accessibility;
 mod root;
 mod styled;
 mod time;