dropdown_button: Add A11y names for the menu trigger

crates/component/locales/ui.yml

@@ -162,6 +162,12 @@ ComboBox:
     zh-HK: "暫無數據"
     zh-TW: "沒有結果"
     it: "Nessun risultato"
+DropdownButton:
+  more_options:
+    en: More options
+    zh-CN: 更多选项
+    zh-HK: 更多選項
+    zh-TW: 更多選項
 Dock:
   Unnamed:
     en: Unnamed

crates/component/src/button/dropdown_button.rs

@@ -1,8 +1,9 @@
 use gpui::Corners;
 use gpui::{
     Anchor, App, Context, Edges, ElementId, InteractiveElement as _, IntoElement, ParentElement,
-    RenderOnce, StyleRefinement, Styled, Window, div, prelude::FluentBuilder,
+    RenderOnce, SharedString, StyleRefinement, Styled, Window, div, prelude::FluentBuilder,
 };
+use rust_i18n::t;
 
 use crate::{
     Disableable, Selectable, Sizable, Size, StyledExt as _,
@@ -30,6 +31,7 @@ pub struct DropdownButton {
         Option<Box<dyn Fn(PopupMenu, &mut Window, &mut Context<PopupMenu>) -> PopupMenu + 'static>>,
     selected: bool,
     disabled: bool,
+    menu_accessibility_label: Option<SharedString>,
     // The button props, applied to both halves. Unset means the inner
     // [`Button`] keeps whatever it was given.
     outline: bool,
@@ -48,6 +50,7 @@ impl DropdownButton {
             menu: None,
             selected: false,
             disabled: false,
+            menu_accessibility_label: None,
             outline: false,
             variant: None,
             size: None,
@@ -98,6 +101,16 @@ impl DropdownButton {
         self
     }
 
+    /// Set the name a screen reader announces for the menu trigger. Defaults
+    /// to the localized "More options".
+    ///
+    /// The trigger shows only a caret, so it has no visible label to read.
+    /// The inner [`Button`] names the action half.
+    pub fn menu_accessibility_label(mut self, label: impl Into<SharedString>) -> Self {
+        self.menu_accessibility_label = Some(label.into());
+        self
+    }
+
     /// Set the button to outline style.
     ///
     /// See also: [`Button::outline`]
@@ -193,6 +206,10 @@ impl RenderOnce for DropdownButton {
                 this.child(
                     Button::new("popup")
                         .dropdown_caret(true)
+                        .accessibility_label(
+                            self.menu_accessibility_label
+                                .unwrap_or_else(|| t!("DropdownButton.more_options").into()),
+                        )
                         .border_corners(Corners {
                             top_left: false,
                             top_right: true,

crates/kit/tests/components.rs

@@ -1,7 +1,7 @@
 mod common;
 use gpui_component::{
     Disableable, TitleBar,
-    button::Button,
+    button::{Button, DropdownButton},
     clipboard::Clipboard,
     input::{Input, InputState},
     popover::Popover,
@@ -131,6 +131,43 @@ fn clipboard_reports_default_and_explicit_accessibility_names(cx: &mut TestAppCo
     .unwrap();
 }
 
+struct NamedDropdownButtons;
+impl Render for NamedDropdownButtons {
+    fn render(&mut self, _: &mut Window, _: &mut Context<Self>) -> impl IntoElement {
+        div()
+            .child(
+                DropdownButton::new("save")
+                    .button(Button::new("save-action").label("Save"))
+                    .menu_accessibility_label("More save options")
+                    .dropdown_menu(|menu, _, _| menu),
+            )
+            .child(
+                DropdownButton::new("plain")
+                    .button(Button::new("plain-action").label("Run"))
+                    .dropdown_menu(|menu, _, _| menu),
+            )
+    }
+}
+
+#[gpui_kit::test]
+fn dropdown_button_names_its_menu_trigger(cx: &mut TestAppContext) {
+    cx.update(gpui_component::init);
+    let (handle, _) = common::open_window(cx, None, |_, cx| cx.new(|_| NamedDropdownButtons));
+    cx.update_window(handle.into(), |_, window, cx| {
+        window.draw(cx).clear(cx);
+        assert_eq!(
+            window.within("save").find("popup").label(),
+            Some("More save options")
+        );
+        assert_eq!(
+            window.within("plain").find("popup").label(),
+            Some("More options"),
+            "the caret-only trigger needs a name without a caller-provided label"
+        );
+    })
+    .unwrap();
+}
+
 struct ScrollFocus {
     focus: gpui_kit::FocusHandle,
 }

website/component/dropdown_button.md

@@ -9,6 +9,8 @@ A [DropdownButton] is a combination of a button and a trigger button. It allows
 
 Shared variant and size can be set on the DropdownButton. Action-specific options such as its label, icon, tooltip, loading state and click handler belong to the inner [Button].
 
+The menu trigger shows only a caret, so it has a localized "More options" accessible name by default. Use `menu_accessibility_label` when the context needs a more specific name, such as "More save options".
+
 ## Import
 
 ```rust

website/zh-CN/component/dropdown_button.md

@@ -9,6 +9,8 @@ description: DropdownButton 由一个主按钮和一个触发下拉菜单的按
 
 共享变体和尺寸可以设置在 DropdownButton 上。文案、图标、提示、加载状态和点击回调等动作自身的选项属于内层 [Button]。
 
+菜单触发按钮只显示一个下拉箭头，因此默认使用本地化的“更多选项”作为无障碍名称。如果需要更明确的名称，可用 `menu_accessibility_label` 指定，例如“更多保存选项”。
+
 ## 导入
 
 ```rust