Fix the logo image in the "ui" UI example (#7894)

# Objective

The AccessKit PR removed the loading of the image logo from the UI
example.
It also added some alt text with `TextStyle::default()` as a child of
the logo image node.

If you give an image node a child, then its size is no longer determined
by the measurefunc that preserves its aspect ratio. Instead, its width
and height are determined by the constraints set on the node and the
size of the contents of the node. In this case, the image node is set to
have a width of 500 with no constraints on its height. So it looks at
its child node to determine what height it should take. Because the
child has `TextStyle::default` it allocates no space for the text, the
height of the image node is set to zero and the logo isn't drawn.

Fixes #8805

## Solution

Load the image, and set min_size and max_size constraints of 500 by 125
pixels.

Author: ickshonpe

examples/ui/ui.rs

@@ -270,19 +270,37 @@ fn setup(mut commands: Commands, asset_server: Res<AssetServer>) {
                 })
                 .with_children(|parent| {
                     // bevy logo (image)
-
+                    // A `NodeBundle` is used to display the logo the image as an `ImageBundle` can't automatically
+                    // size itself with a child node present.
                     parent
-                        .spawn(ImageBundle {
-                            style: Style {
-                                width: Val::Px(500.0),
+                        .spawn((
+                            NodeBundle {
+                                style: Style {
+                                    width: Val::Px(500.0),
+                                    height: Val::Px(125.0),
+                                    margin: UiRect::top(Val::VMin(5.)),
+                                    ..default()
+                                },
+                                // a `NodeBundle` is transparent by default, so to see the image we have to its color to `WHITE`
+                                background_color: Color::WHITE.into(),
                                 ..default()
                             },
-                            ..default()
-                        })
+                            UiImage::new(asset_server.load("branding/bevy_logo_dark_big.png")),
+                        ))
                         .with_children(|parent| {
                             // alt text
-                            parent
-                                .spawn(TextBundle::from_section("Bevy logo", TextStyle::default()));
+                            // This UI node takes up no space in the layout and the `Text` component is used by the accessiblity module
+                            // and is not rendered.
+                            parent.spawn((
+                                NodeBundle {
+                                    style: Style {
+                                        display: Display::None,
+                                        ..Default::default()
+                                    },
+                                    ..Default::default()
+                                },
+                                Text::from_section("Bevy logo", TextStyle::default()),
+                            ));
                         });
                 });
         });