Add a simple directional UI navigation example

Cargo.toml

@@ -4012,6 +4012,17 @@ doc-scrape-examples = true
 
 [package.metadata.example.tab_navigation]
 name = "Tab Navigation"
-description = "Demonstration of Tab Navigation"
+description = "Demonstration of Tab Navigation between UI elements"
+category = "UI (User Interface)"
+wasm = true
+
+[[example]]
+name = "directional_navigation"
+path = "examples/ui/directional_navigation.rs"
+doc-scrape-examples = true
+
+[package.metadata.example.directional_navigation]
+name = "Directional Navigation"
+description = "Demonstration of Directional Navigation between UI elements"
 category = "UI (User Interface)"
 wasm = true

crates/bevy_input_focus/src/lib.rs

@@ -114,7 +114,9 @@ impl InputFocus {
 /// By contrast, a console-style UI intended to be navigated with a gamepad may always have the focus indicator visible.
 ///
 /// To easily access information about whether focus indicators should be shown for a given entity, use the [`IsFocused`] trait.
-#[derive(Clone, Debug, Resource)]
+///
+/// By default, this resource is set to `false`.
+#[derive(Clone, Debug, Resource, Default)]
 #[cfg_attr(feature = "bevy_reflect", derive(Reflect), reflect(Debug, Resource))]
 pub struct InputFocusVisible(pub bool);
 
@@ -174,8 +176,8 @@ pub struct InputDispatchPlugin;
 impl Plugin for InputDispatchPlugin {
     fn build(&self, app: &mut App) {
         app.add_systems(Startup, set_initial_focus)
-            .insert_resource(InputFocus(None))
-            .insert_resource(InputFocusVisible(false))
+            .init_resource::<InputFocus>()
+            .init_resource::<InputFocusVisible>()
             .add_systems(
                 PreUpdate,
                 (

crates/bevy_winit/src/accessibility.rs

@@ -198,6 +198,14 @@ fn update_accessibility_nodes(
         return;
     };
     if focus.is_changed() || !nodes.is_empty() {
+        // Don't panic if the focused entity does not currently exist
+        // It's probably waiting to be spawned
+        if let Some(focused_entity) = focus.0 {
+            if !node_entities.contains(focused_entity) {
+                return;
+            }
+        }
+
         adapter.update_if_active(|| {
             update_adapter(
                 nodes,

examples/README.md

@@ -512,6 +512,7 @@ Example | Description
 [Box Shadow](../examples/ui/box_shadow.rs) | Demonstrates how to create a node with a shadow
 [Button](../examples/ui/button.rs) | Illustrates creating and updating a button
 [CSS Grid](../examples/ui/grid.rs) | An example for CSS Grid layout
+[Directional Navigation](../examples/ui/directional_navigation.rs) | Demonstration of Directional Navigation between UI elements
 [Display and Visibility](../examples/ui/display_and_visibility.rs) | Demonstrates how Display and Visibility work in the UI.
 [Flex Layout](../examples/ui/flex_layout.rs) | Demonstrates how the AlignItems and JustifyContent properties can be composed to layout nodes and position text
 [Font Atlas Debug](../examples/ui/font_atlas_debug.rs) | Illustrates how FontAtlases are populated (used to optimize text rendering internally)
@@ -523,7 +524,7 @@ Example | Description
 [Render UI to Texture](../examples/ui/render_ui_to_texture.rs) | An example of rendering UI as a part of a 3D world
 [Scroll](../examples/ui/scroll.rs) | Demonstrates scrolling UI containers
 [Size Constraints](../examples/ui/size_constraints.rs) | Demonstrates how the to use the size constraints to control the size of a UI node.
-[Tab Navigation](../examples/ui/tab_navigation.rs) | Demonstration of Tab Navigation
+[Tab Navigation](../examples/ui/tab_navigation.rs) | Demonstration of Tab Navigation between UI elements
 [Text](../examples/ui/text.rs) | Illustrates creating and updating text
 [Text Debug](../examples/ui/text_debug.rs) | An example for debugging text layout
 [Text Wrap Debug](../examples/ui/text_wrap_debug.rs) | Demonstrates text wrapping