Enable accessibility features for the button example

examples/ui/button.rs

@@ -1,13 +1,15 @@
 //! This example illustrates how to create a button that changes color and text based on its
 //! interaction state.
 
-use bevy::{color::palettes::basic::*, prelude::*, winit::WinitSettings};
+use bevy::{color::palettes::basic::*, input_focus::InputFocus, prelude::*, winit::WinitSettings};
 
 fn main() {
     App::new()
         .add_plugins(DefaultPlugins)
         // Only run the app when there is user input. This will significantly reduce CPU/GPU use.
         .insert_resource(WinitSettings::desktop_app())
+        // `InputFocus` must be set for accessibility to recognize the button.
+        .init_resource::<InputFocus>()
         .add_systems(Startup, setup)
         .add_systems(Update, button_system)
         .run();
@@ -18,31 +20,44 @@ const HOVERED_BUTTON: Color = Color::srgb(0.25, 0.25, 0.25);
 const PRESSED_BUTTON: Color = Color::srgb(0.35, 0.75, 0.35);
 
 fn button_system(
+    mut input_focus: ResMut<InputFocus>,
     mut interaction_query: Query<
         (
+            Entity,
             &Interaction,
             &mut BackgroundColor,
             &mut BorderColor,
+            &mut Button,
             &Children,
         ),
-        (Changed<Interaction>, With<Button>),
+        Changed<Interaction>,
     >,
     mut text_query: Query<&mut Text>,
 ) {
-    for (interaction, mut color, mut border_color, children) in &mut interaction_query {
+    for (entity, interaction, mut color, mut border_color, mut button, children) in
+        &mut interaction_query
+    {
         let mut text = text_query.get_mut(children[0]).unwrap();
+
         match *interaction {
             Interaction::Pressed => {
+                input_focus.set(entity);
                 **text = "Press".to_string();
                 *color = PRESSED_BUTTON.into();
                 border_color.0 = RED.into();
+
+                // The accessibility system's only update the button's state when the `Button` component is marked as changed.
+                button.set_changed();
             }
             Interaction::Hovered => {
+                input_focus.set(entity);
                 **text = "Hover".to_string();
                 *color = HOVERED_BUTTON.into();
                 border_color.0 = Color::WHITE;
+                button.set_changed();
             }
             Interaction::None => {
+                input_focus.clear();
                 **text = "Button".to_string();
                 *color = NORMAL_BUTTON.into();
                 border_color.0 = Color::BLACK;