settings_ui: Keyboard navigation (#39652)

Closes #ISSUE

Release Notes:

- N/A *or* Added/Fixed/Improved ...

---------

Co-authored-by: Mikayla <mikayla@zed.dev>

crates/ui/src/components/button/button.rs

@@ -402,6 +402,11 @@ impl ButtonCommon for Button {
         self.base = self.base.layer(elevation);
         self
     }
+
+    fn track_focus(mut self, focus_handle: &gpui::FocusHandle) -> Self {
+        self.base = self.base.track_focus(focus_handle);
+        self
+    }
 }
 
 impl RenderOnce for Button {

crates/ui/src/components/button/button_like.rs

@@ -1,6 +1,6 @@
 use documented::Documented;
 use gpui::{
-    AnyElement, AnyView, ClickEvent, CursorStyle, DefiniteLength, Hsla, MouseButton,
+    AnyElement, AnyView, ClickEvent, CursorStyle, DefiniteLength, FocusHandle, Hsla, MouseButton,
     MouseClickEvent, MouseDownEvent, MouseUpEvent, Rems, StyleRefinement, relative,
     transparent_black,
 };
@@ -41,6 +41,8 @@ pub trait ButtonCommon: Clickable + Disableable {
     fn tab_index(self, tab_index: impl Into<isize>) -> Self;
 
     fn layer(self, elevation: ElevationIndex) -> Self;
+
+    fn track_focus(self, focus_handle: &FocusHandle) -> Self;
 }
 
 #[derive(Debug, PartialEq, Eq, PartialOrd, Ord, Hash, Clone, Copy, Default)]
@@ -405,6 +407,7 @@ pub struct ButtonLike {
     on_click: Option<Box<dyn Fn(&ClickEvent, &mut Window, &mut App) + 'static>>,
     on_right_click: Option<Box<dyn Fn(&ClickEvent, &mut Window, &mut App) + 'static>>,
     children: SmallVec<[AnyElement; 2]>,
+    focus_handle: Option<FocusHandle>,
 }
 
 impl ButtonLike {
@@ -428,6 +431,7 @@ impl ButtonLike {
             on_right_click: None,
             layer: None,
             tab_index: None,
+            focus_handle: None,
         }
     }
 
@@ -549,6 +553,11 @@ impl ButtonCommon for ButtonLike {
         self.layer = Some(elevation);
         self
     }
+
+    fn track_focus(mut self, focus_handle: &gpui::FocusHandle) -> Self {
+        self.focus_handle = Some(focus_handle.clone());
+        self
+    }
 }
 
 impl VisibleOnHover for ButtonLike {
@@ -575,6 +584,9 @@ impl RenderOnce for ButtonLike {
             .h_flex()
             .id(self.id.clone())
             .when_some(self.tab_index, |this, tab_index| this.tab_index(tab_index))
+            .when_some(self.focus_handle, |this, focus_handle| {
+                this.track_focus(&focus_handle)
+            })
             .font_ui(cx)
             .group("")
             .flex_none()

crates/ui/src/components/button/icon_button.rs

@@ -173,6 +173,11 @@ impl ButtonCommon for IconButton {
         self.base = self.base.layer(elevation);
         self
     }
+
+    fn track_focus(mut self, focus_handle: &gpui::FocusHandle) -> Self {
+        self.base = self.base.track_focus(focus_handle);
+        self
+    }
 }
 
 impl VisibleOnHover for IconButton {

crates/ui/src/components/button/toggle_button.rs

@@ -132,6 +132,11 @@ impl ButtonCommon for ToggleButton {
         self.base = self.base.layer(elevation);
         self
     }
+
+    fn track_focus(mut self, focus_handle: &gpui::FocusHandle) -> Self {
+        self.base = self.base.track_focus(focus_handle);
+        self
+    }
 }
 
 impl RenderOnce for ToggleButton {