gd: Polish welcome dialog

This CL:
- adds launcher icon to replace the text.
- adds a11y properties.

Bug: b/316138331
Test: manual test
Demo: b/316138331#comment2
Change-Id: Iab477fef66691b815d09fc18782ed90e4284c56c
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/5347645
Commit-Queue: Cici Ruan <cuicuiruan@google.com>
Reviewed-by: Prameet Shah <phshah@chromium.org>
Cr-Commit-Position: refs/heads/main@{#1270411}

ash/ash_strings.grd

@@ -7568,6 +7568,9 @@ To shut down the device, press and hold the power button on the device again.
       <message name="IDS_ASH_GAME_DASHBOARD_WELCOME_DIALOG_SHORTCUT" translateable="false" desc="The text displayed in the welcome dialog to show how to toggle the Game Dashboard.">
         Press <ph name="LAUNCHER_KEY_NAME">$1<ex>Launcher</ex></ph> + g at anytime
       </message>
+      <message name="IDS_ASH_GAME_DASHBOARD_WELCOME_DIALOG_A11Y_LABEL" translateable="false" desc="The a11y label for the welcome dialog. Spoken by screen readers when the welcome dialog is a11y focused but not visually rendered.">
+        Welcome dialog
+      </message>
       <message name="IDS_ASH_GAME_DASHBOARD_WELCOME_DIALOG_SUB_LABEL" translateable="false" desc="The additional context added to the welcome dialog about the Game Dashboard.">
         Customize your gaming experience
       </message>

ash/ash_strings_grd/IDS_ASH_GAME_DASHBOARD_WELCOME_DIALOG_A11Y_LABEL.png.sha1

@@ -0,0 +1 @@
+0d7aab83cdf6b8a45a7541c8003a8c5926b18127

ash/game_dashboard/game_dashboard_context.cc

@@ -388,9 +388,10 @@ void GameDashboardContext::MaybeShowWelcomeDialog() {
   show_welcome_dialog_ = false;
   auto view = std::make_unique<GameDashboardWelcomeDialog>();
   GameDashboardWelcomeDialog* welcome_dialog_view = view.get();
+  // Activatable for accessibility screen reader.
   welcome_dialog_widget_ = CreateTransientChildWidget(
       game_window_, "GameDashboardWelcomeDialog", std::move(view),
-      /*activatable=*/views::Widget::InitParams::Activatable::kNo);
+      /*activatable=*/views::Widget::InitParams::Activatable::kDefault);
   welcome_dialog_widget_->AddObserver(this);
   MaybeUpdateWelcomeDialogBounds();
   welcome_dialog_widget_->Show();

ash/game_dashboard/game_dashboard_welcome_dialog.cc

@@ -5,6 +5,7 @@
 #include "ash/game_dashboard/game_dashboard_welcome_dialog.h"
 
 #include "ash/bubble/bubble_utils.h"
+#include "ash/resources/vector_icons/vector_icons.h"
 #include "ash/shell.h"
 #include "ash/strings/grit/ash_strings.h"
 #include "ash/style/typography.h"
@@ -17,6 +18,8 @@
 #include "ui/views/border.h"
 #include "ui/views/controls/image_view.h"
 #include "ui/views/controls/label.h"
+#include "ui/views/controls/styled_label.h"
+#include "ui/views/layout/box_layout_view.h"
 
 namespace ash {
 
@@ -36,10 +39,6 @@ constexpr int kPrimaryContainerBorder = 12;
 constexpr int kPrimaryLayoutInsideBorder = 8;
 // Padding between the `primary_container` and `shortcut_hint` rows.
 constexpr int kRowPadding = 20;
-// Radius of the container of the shortcut text.
-constexpr float kShortcutCornerRadius = 16.0f;
-// Padding surrounding the shortcut info text.
-constexpr int kShortcutTextBorder = 16;
 // Padding between the `title_container` and `icon_container`.
 constexpr int kTitleContainerPadding = 20;
 // Width of the container containing the text title and sub-label.
@@ -62,6 +61,11 @@ GameDashboardWelcomeDialog::GameDashboardWelcomeDialog() {
   SetBackground(views::CreateThemedRoundedRectBackground(
       cros_tokens::kCrosSysSystemBaseElevatedOpaque, kDialogCornerRadius));
 
+  SetAccessibilityProperties(
+      ax::mojom::Role::kDialog,
+      l10n_util::GetStringUTF16(
+          IDS_ASH_GAME_DASHBOARD_WELCOME_DIALOG_A11Y_LABEL));
+
   AddTitleAndIconRow();
   AddShortcutInfoRow();
 }
@@ -151,26 +155,50 @@ void GameDashboardWelcomeDialog::AddTitleAndIconRow() {
 // Dashboard shortcut. This creates the following:
 //
 // +----------------------------------------------------+
-// |                   shortcut_hint                    |
+// | |"Press" | |Launcher icon| |"+ g at anytime"|      |
 // +----------------------------------------------------+
 void GameDashboardWelcomeDialog::AddShortcutInfoRow() {
-  const std::u16string shortcut_key = l10n_util::GetStringUTF16(
-      Shell::Get()->keyboard_capability()->HasLauncherButtonOnAnyKeyboard()
-          ? IDS_ASH_SHORTCUT_MODIFIER_LAUNCHER
-          : IDS_ASH_SHORTCUT_MODIFIER_SEARCH);
-  auto* shortcut_hint = AddChildView(bubble_utils::CreateLabel(
-      TypographyToken::kCrosButton2,
+  // Styled label to include the inline icon.
+  auto* styled_label = AddChildView(std::make_unique<views::StyledLabel>());
+  size_t inline_icon_offset;
+  styled_label->SetText(
       l10n_util::GetStringFUTF16(IDS_ASH_GAME_DASHBOARD_WELCOME_DIALOG_SHORTCUT,
-                                 shortcut_key),
-      cros_tokens::kCrosSysPrimary));
-  shortcut_hint->SetMultiLine(true);
-  // TODO(b/316138331): Update max width to ensure it matches specs.
-  shortcut_hint->SizeToFit(kTitleTextMaxWidth);
-  shortcut_hint->SetHorizontalAlignment(gfx::ALIGN_LEFT);
-  shortcut_hint->SetBackground(views::CreateThemedRoundedRectBackground(
-      cros_tokens::kCrosSysSystemOnBase, kShortcutCornerRadius));
-  shortcut_hint->SetBorder(views::CreateEmptyBorder(
-      gfx::Insets::VH(kShortcutTextBorder, kShortcutTextBorder)));
+                                 u"", &inline_icon_offset));
+  styled_label->SetBackground(views::CreateThemedRoundedRectBackground(
+      cros_tokens::kCrosSysSystemOnBase, /*radius=*/16.0f));
+  styled_label->SetBorder(views::CreateEmptyBorder(gfx::Insets::VH(14, 18)));
+
+  const bool has_launcher_keyboard_button =
+      Shell::Get()->keyboard_capability()->HasLauncherButtonOnAnyKeyboard();
+  styled_label->SetAccessibleName(l10n_util::GetStringFUTF16(
+      IDS_ASH_GAME_DASHBOARD_WELCOME_DIALOG_SHORTCUT,
+      l10n_util::GetStringUTF16(has_launcher_keyboard_button
+                                    ? IDS_ASH_SHORTCUT_MODIFIER_LAUNCHER
+                                    : IDS_ASH_SHORTCUT_MODIFIER_SEARCH)));
+
+  // Text style.
+  views::StyledLabel::RangeStyleInfo text_style;
+  text_style.custom_font = TypographyProvider::Get()->ResolveTypographyToken(
+      TypographyToken::kCrosButton2);
+  text_style.override_color_id = cros_tokens::kCrosSysPrimary;
+  styled_label->AddStyleRange(gfx::Range(0u, inline_icon_offset), text_style);
+  styled_label->AddStyleRange(
+      gfx::Range(inline_icon_offset + 1u, styled_label->GetText().size()),
+      std::move(text_style));
+
+  // Inline icon.
+  auto icon = std::make_unique<views::ImageView>(ui::ImageModel::FromVectorIcon(
+      has_launcher_keyboard_button ? kGdLauncherIcon : kGdSearchIcon,
+      cros_tokens::kCrosSysPrimary, /*icon_size=*/16));
+  icon->SetBorder(views::CreateEmptyBorder(gfx::Insets::TLBR(0, 1, 0, 4)));
+  views::StyledLabel::RangeStyleInfo inline_icon_style;
+  inline_icon_style.custom_view = icon.get();
+  styled_label->AddStyleRange(
+      gfx::Range(inline_icon_offset, inline_icon_offset + 1u),
+      std::move(inline_icon_style));
+
+  // Add the icon into the styled label.
+  styled_label->AddCustomView(std::move(icon));
 }
 
 BEGIN_METADATA(GameDashboardWelcomeDialog)

ash/resources/vector_icons/BUILD.gn

@@ -134,10 +134,12 @@ aggregate_vector_icons("ash_vector_icons") {
     "gd_button_up_arrow.icon",
     "gd_game_controls.icon",
     "gd_help.icon",
+    "gd_launcher.icon",
     "gd_notification.icon",
     "gd_record_game.icon",
     "gd_screen_size_settings.icon",
     "gd_screenshot.icon",
+    "gd_search.icon",
     "gd_settings.icon",
     "gd_toolbar.icon",
     "gif.icon",

ash/resources/vector_icons/gd_launcher.icon

@@ -0,0 +1,18 @@
+// Copyright 2024 The Chromium Authors
+// Use of this source code is governed by a BSD-style license that can be
+// found in the LICENSE file.
+
+CANVAS_DIMENSIONS, 20,
+MOVE_TO, 10, 15,
+R_ARC_TO, 5, 5, 0, 1, 0, 0, -10,
+R_ARC_TO, 5, 5, 0, 0, 0, 0, 10,
+CLOSE,
+NEW_PATH,
+MOVE_TO, 10, 18.5f,
+R_ARC_TO, 8.5f, 8.5f, 0, 1, 0, 0, -17,
+R_ARC_TO, 8.5f, 8.5f, 0, 0, 0, 0, 17,
+CLOSE,
+R_MOVE_TO, 7, -8.5f,
+R_ARC_TO, 7, 7, 0, 1, 1, -14, 0,
+R_ARC_TO, 7, 7, 0, 0, 1, 14, 0,
+CLOSE

ash/resources/vector_icons/gd_search.icon

@@ -0,0 +1,19 @@
+// Copyright 2024 The Chromium Authors
+// Use of this source code is governed by a BSD-style license that can be
+// found in the LICENSE file.
+
+CANVAS_DIMENSIONS, 20,
+R_MOVE_TO, 17.49f, 16,
+R_LINE_TO, -3.73f, -3.73f,
+CUBIC_TO, 14.53f, 11.2f, 15, 9.91f, 15, 8.5f,
+ARC_TO, 6.5f, 6.5f, 0, 1, 0, 8.5f, 15,
+R_CUBIC_TO, 1.41f, 0, 2.7f, -0.47f, 3.77f, -1.24f,
+LINE_TO, 16, 17.49f,
+LINE_TO, 17.49f, 16,
+CLOSE,
+MOVE_TO, 4, 8.5f,
+CUBIC_TO, 4, 6.01f, 6.01f, 4, 8.5f, 4,
+CUBIC_TO_SHORTHAND, 13, 6.01f, 13, 8.5f,
+CUBIC_TO_SHORTHAND, 10.99f, 13, 8.5f, 13,
+CUBIC_TO_SHORTHAND, 4, 10.99f, 4, 8.5f,
+CLOSE