Add focus ring for search result accessibility.

Screen recording can be found as an attachment in the bug.

Bug: 1109293
Change-Id: Ief1092a0a1ee970900bc7b0baf24ab50667f8577
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2547393Reviewed-by: Yulun Wu <yulunwu@chromium.org>
Reviewed-by: Toni Baržić <tbarzic@chromium.org>
Reviewed-by: Ahmed Fakhry <afakhry@chromium.org>
Commit-Queue: Yulun Wu <yulunwu@chromium.org>
Cr-Commit-Position: refs/heads/master@{#833616}

ash/app_list/app_list_color_provider_impl.cc

@@ -186,6 +186,18 @@ SkColor AppListColorProviderImpl::GetSearchResultViewHighlightColor() const {
       SkColorSetA(gfx::kGoogleGrey900, 0x12));
 }
 
+SkColor AppListColorProviderImpl::GetFocusRingColor() const {
+  return DeprecatedGetControlsLayerColor(
+      AshColorProvider::ControlsLayerType::kControlBackgroundColorActive,
+      gfx::kGoogleBlue300);
+}
+
+SkColor AppListColorProviderImpl::GetFolderItemFocusRingColor() const {
+  return DeprecatedGetControlsLayerColor(
+      AshColorProvider::ControlsLayerType::kControlBackgroundColorActive,
+      gfx::kGoogleBlue600);
+}
+
 float AppListColorProviderImpl::GetFolderBackgrounBlurSigma() const {
   return static_cast<float>(AshColorProvider::LayerBlurSigma::kBlurDefault);
 }

ash/app_list/app_list_color_provider_impl.h

@@ -46,6 +46,8 @@ class AppListColorProviderImpl : public AppListColorProvider {
   SkColor GetSeparatorColor() const override;
   SkColor GetSearchResultViewHighlightColor() const override;
   SkColor GetSearchResultViewInkDropColor() const override;
+  SkColor GetFocusRingColor() const override;
+  SkColor GetFolderItemFocusRingColor() const override;
   float GetFolderBackgrounBlurSigma() const override;
 
  private:

ash/app_list/test/test_app_list_color_provider.cc

@@ -132,6 +132,14 @@ SkColor TestAppListColorProvider::GetSearchResultViewInkDropColor() const {
   return SkColorSetA(SK_ColorWHITE, 0x17);
 }
 
+SkColor TestAppListColorProvider::GetFocusRingColor() const {
+  return gfx::kGoogleBlue300;
+}
+
+SkColor TestAppListColorProvider::GetFolderItemFocusRingColor() const {
+  return gfx::kGoogleBlue600;
+}
+
 float TestAppListColorProvider::GetFolderBackgrounBlurSigma() const {
   return 30.0f;
 }

ash/app_list/test/test_app_list_color_provider.h

@@ -46,6 +46,8 @@ class TestAppListColorProvider : public AppListColorProvider {
   SkColor GetSeparatorColor() const override;
   SkColor GetSearchResultViewHighlightColor() const override;
   SkColor GetSearchResultViewInkDropColor() const override;
+  SkColor GetFocusRingColor() const override;
+  SkColor GetFolderItemFocusRingColor() const override;
   float GetFolderBackgrounBlurSigma() const override;
 };
 

ash/app_list/views/app_list_item_view.cc

@@ -72,9 +72,6 @@ constexpr float kCardifyIconScale = 0.84f;
 // The drag and drop icon scaling up or down animation transition duration.
 constexpr int kDragDropAppIconScaleTransitionInMs = 200;
 
-// The color of the focus ring within a folder.
-constexpr SkColor kFolderGridFocusRingColor = gfx::kGoogleBlue600;
-
 // The color of an item selected via right-click context menu.
 constexpr SkColor kContextSelection =
     SkColorSetA(SK_ColorWHITE, 41);  // 16% opacity
@@ -691,9 +688,10 @@ void AppListItemView::PaintButtonContents(gfx::Canvas* canvas) {
     cc::PaintFlags flags;
     flags.setAntiAlias(true);
     if (delegate_->KeyboardTraversalEngaged()) {
-      flags.setColor(apps_grid_view_->is_in_folder()
-                         ? kFolderGridFocusRingColor
-                         : GetAppListConfig().grid_selected_color());
+      flags.setColor(
+          apps_grid_view_->is_in_folder()
+              ? AppListColorProvider::Get()->GetFolderItemFocusRingColor()
+              : AppListColorProvider::Get()->GetFocusRingColor());
       flags.setStyle(cc::PaintFlags::kStroke_Style);
       flags.setStrokeWidth(kFocusRingWidth);
     } else {

ash/app_list/views/expand_arrow_view.cc

@@ -75,7 +75,6 @@ constexpr int kAnimationIntervalInSec = 10;
 constexpr auto kCycleDuration = base::TimeDelta::FromMilliseconds(1000);
 constexpr auto kCycleInterval = base::TimeDelta::FromMilliseconds(500);
 
-constexpr SkColor kFocusRingColor = gfx::kGoogleBlue300;
 constexpr int kFocusRingWidth = 2;
 
 // THe bounds for the tap target of the expand arrow button.
@@ -198,7 +197,7 @@ void ExpandArrowView::PaintButtonContents(gfx::Canvas* canvas) {
   if (HasFocus()) {
     cc::PaintFlags focus_ring_flags;
     focus_ring_flags.setAntiAlias(true);
-    focus_ring_flags.setColor(kFocusRingColor);
+    focus_ring_flags.setColor(AppListColorProvider::Get()->GetFocusRingColor());
     focus_ring_flags.setStyle(cc::PaintFlags::Style::kStroke_Style);
     focus_ring_flags.setStrokeWidth(kFocusRingWidth);
 

ash/app_list/views/search_box_view.cc

@@ -65,8 +65,6 @@ constexpr int kSearchBoxFocusRingWidth = 2;
 // Padding between the focus ring and the search box view
 constexpr int kSearchBoxFocusRingPadding = 4;
 
-constexpr SkColor kSearchBoxFocusRingColor = gfx::kGoogleBlue300;
-
 constexpr int kSearchBoxFocusRingCornerRadius = 28;
 
 // Minimum amount of characters required to enable autocomplete.
@@ -210,7 +208,7 @@ void SearchBoxView::OnPaintBackground(gfx::Canvas* canvas) {
     bounds.Inset(-kSearchBoxFocusRingPadding, -kSearchBoxFocusRingPadding);
     cc::PaintFlags flags;
     flags.setAntiAlias(true);
-    flags.setColor(kSearchBoxFocusRingColor);
+    flags.setColor(AppListColorProvider::Get()->GetFocusRingColor());
     flags.setStyle(cc::PaintFlags::Style::kStroke_Style);
     flags.setStrokeWidth(kSearchBoxFocusRingWidth);
     canvas->DrawRoundRect(bounds, kSearchBoxFocusRingCornerRadius, flags);

ash/app_list/views/search_result_actions_view.cc

@@ -34,6 +34,8 @@ namespace {
 // Image buttons.
 constexpr int kImageButtonSizeDip = 40;
 constexpr int kActionButtonBetweenSpacing = 8;
+// The width of the focus ring.
+constexpr int kFocusRingWidth = 2;
 
 }  // namespace
 
@@ -62,7 +64,7 @@ class SearchResultImageButton : public views::ImageButton {
 
   void SetButtonImage(const gfx::ImageSkia& source, int icon_dimension);
 
-  int GetInkDropRadius() const;
+  int GetButtonRadius() const;
   const char* GetClassName() const override;
 
   SearchResultActionsView* parent_;
@@ -121,7 +123,7 @@ void SearchResultImageButton::OnGestureEvent(ui::GestureEvent* event) {
 std::unique_ptr<views::InkDropRipple>
 SearchResultImageButton::CreateInkDropRipple() const {
   const gfx::Point center = GetLocalBounds().CenterPoint();
-  const int ripple_radius = GetInkDropRadius();
+  const int ripple_radius = GetButtonRadius();
   gfx::Rect bounds(center.x() - ripple_radius, center.y() - ripple_radius,
                    2 * ripple_radius, 2 * ripple_radius);
   SkColor ripple_color =
@@ -152,11 +154,11 @@ void SearchResultImageButton::OnPaintBackground(gfx::Canvas* canvas) {
   if (HasFocus() || parent_->GetSelectedAction() == tag()) {
     cc::PaintFlags circle_flags;
     circle_flags.setAntiAlias(true);
-    circle_flags.setColor(
-        AppListColorProvider::Get()->GetSearchResultViewHighlightColor());
-    circle_flags.setStyle(cc::PaintFlags::kFill_Style);
-    canvas->DrawCircle(GetLocalBounds().CenterPoint(), GetInkDropRadius(),
-                       circle_flags);
+    circle_flags.setColor(AppListColorProvider::Get()->GetFocusRingColor());
+    circle_flags.setStyle(cc::PaintFlags::kStroke_Style);
+    circle_flags.setStrokeWidth(kFocusRingWidth);
+    canvas->DrawCircle(GetLocalBounds().CenterPoint(),
+                       GetButtonRadius() - kFocusRingWidth, circle_flags);
   }
 }
 
@@ -168,7 +170,7 @@ void SearchResultImageButton::SetButtonImage(const gfx::ImageSkia& source,
                gfx::Size(icon_dimension, icon_dimension)));
 }
 
-int SearchResultImageButton::GetInkDropRadius() const {
+int SearchResultImageButton::GetButtonRadius() const {
   return width() / 2;
 }
 

ash/app_list/views/search_result_suggestion_chip_view.cc

@@ -34,7 +34,6 @@ namespace ash {
 namespace {
 
 constexpr SkColor kRippleColor = SkColorSetA(gfx::kGoogleGrey100, 0x0F);
-constexpr SkColor kFocusRingColor = gfx::kGoogleBlue300;
 constexpr int kMaxTextWidth = 192;
 constexpr int kBlurRadius = 5;
 constexpr int kIconMarginDip = 8;
@@ -61,7 +60,7 @@ SearchResultSuggestionChipView::SearchResultSuggestionChipView(
                           base::Unretained(this)));
 
   SetInstallFocusRingOnFocus(true);
-  focus_ring()->SetColor(kFocusRingColor);
+  focus_ring()->SetColor(AppListColorProvider::Get()->GetFocusRingColor());
 
   SetInkDropMode(InkDropMode::ON);
   views::InstallPillHighlightPathGenerator(this);
@@ -126,9 +125,10 @@ void SearchResultSuggestionChipView::OnPaintBackground(gfx::Canvas* canvas) {
 
   // Focus Ring should only be visible when keyboard traversal is occurring.
   if (view_delegate_->KeyboardTraversalEngaged())
-    focus_ring()->SetColor(kFocusRingColor);
+    focus_ring()->SetColor(AppListColorProvider::Get()->GetFocusRingColor());
   else
-    focus_ring()->SetColor(SkColorSetA(kFocusRingColor, 0));
+    focus_ring()->SetColor(
+        SkColorSetA(AppListColorProvider::Get()->GetFocusRingColor(), 0));
 }
 
 void SearchResultSuggestionChipView::OnFocus() {

ash/app_list/views/search_result_tile_item_view.cc

@@ -41,6 +41,9 @@ namespace ash {
 
 namespace {
 
+// The width of the focus ring.
+constexpr int kFocusRingWidth = 2;
+
 constexpr int kSearchTileWidth = 80;
 constexpr int kSearchTileTopPadding = 4;
 constexpr int kSearchTitleSpacing = 7;
@@ -298,20 +301,19 @@ void SearchResultTileItemView::PaintButtonContents(gfx::Canvas* canvas) {
   gfx::Rect rect(GetContentsBounds());
   cc::PaintFlags flags;
   flags.setAntiAlias(true);
-  flags.setStyle(cc::PaintFlags::kFill_Style);
+  flags.setStyle(cc::PaintFlags::kStroke_Style);
+  flags.setStrokeWidth(kFocusRingWidth);
+  flags.setColor(AppListColorProvider::Get()->GetFocusRingColor());
+
   if (IsSuggestedAppTileShownInAppPage()) {
     rect.ClampToCenteredSize(AppListConfig::instance().grid_focus_size());
-    flags.setColor(
-        AppListColorProvider::Get()->GetSearchResultViewInkDropColor());
     canvas->DrawRoundRect(gfx::RectF(rect),
                           AppListConfig::instance().grid_focus_corner_radius(),
                           flags);
   } else {
     const int kLeftRightPadding = (rect.width() - kIconSelectedSize) / 2;
-    rect.Inset(kLeftRightPadding, 0);
-    rect.set_height(kIconSelectedSize);
-    flags.setColor(
-        AppListColorProvider::Get()->GetSearchResultViewInkDropColor());
+    rect.Inset(kLeftRightPadding, kFocusRingWidth);
+    rect.set_height(kIconSelectedSize - 2 * kFocusRingWidth);
     canvas->DrawRoundRect(gfx::RectF(rect), kIconSelectedCornerRadius, flags);
   }
 }

ash/app_list/views/search_result_view.cc

@@ -47,8 +47,8 @@ constexpr int kDetailsLineHeight = 16;
 
 // URL color.
 constexpr SkColor kUrlColor = gfx::kGoogleBlue600;
-// Search result border color.
-constexpr SkColor kResultBorderColor = SkColorSetARGB(0xFF, 0xE5, 0xE5, 0xE5);
+// The width of the focus bar.
+constexpr int kFocusBarWidth = 3;
 
 // Delta applied to font size of all AppListSearchResult titles.
 constexpr int kSearchResultTitleTextSizeDelta = 2;
@@ -271,17 +271,6 @@ void SearchResultView::PaintButtonContents(gfx::Canvas* canvas) {
       text_bounds,
       AppListColorProvider::Get()->GetSearchBoxCardBackgroundColor());
 
-  // Possibly call FillRect a second time (these colours are partially
-  // transparent, so the previous FillRect is not redundant).
-  if (selected() && !actions_view()->HasSelectedAction()) {
-    canvas->FillRect(
-        content_rect,
-        AppListColorProvider::Get()->GetSearchResultViewHighlightColor());
-  }
-
-  gfx::Rect border_bottom = gfx::SubtractRects(rect, content_rect);
-  canvas->FillRect(border_bottom, kResultBorderColor);
-
   if (title_text_ && details_text_) {
     gfx::Size title_size(text_bounds.width(), kTitleLineHeight);
     gfx::Size details_size(text_bounds.width(), kDetailsLineHeight);
@@ -304,6 +293,33 @@ void SearchResultView::PaintButtonContents(gfx::Canvas* canvas) {
     title_text_->SetDisplayRect(centered_title_rect);
     title_text_->Draw(canvas);
   }
+
+  // Possibly call FillRect a second time (these colours are partially
+  // transparent, so the previous FillRect is not redundant).
+  if (selected() && !actions_view()->HasSelectedAction()) {
+    // Fill search result view row item.
+    canvas->FillRect(
+        content_rect,
+        AppListColorProvider::Get()->GetSearchResultViewHighlightColor());
+
+    SkPath path;
+    gfx::Rect focus_ring_bounds = content_rect;
+    focus_ring_bounds.set_x(focus_ring_bounds.x() - kFocusBarWidth);
+    focus_ring_bounds.set_width(kFocusBarWidth * 2);
+    path.addRRect(SkRRect::MakeRectXY(RectToSkRect(focus_ring_bounds),
+                                      kFocusBarWidth, kFocusBarWidth));
+    canvas->ClipPath(path, true);
+
+    cc::PaintFlags flags;
+    flags.setAntiAlias(true);
+    flags.setColor(AppListColorProvider::Get()->GetFocusRingColor());
+    flags.setStyle(cc::PaintFlags::kStroke_Style);
+    flags.setStrokeWidth(kFocusBarWidth);
+    gfx::Point top_point = content_rect.origin();
+    gfx::Point bottom_point =
+        top_point + gfx::Vector2d(0, content_rect.height());
+    canvas->DrawLine(top_point, bottom_point, flags);
+  }
 }
 
 void SearchResultView::OnMouseEntered(const ui::MouseEvent& event) {

ash/public/cpp/app_list/app_list_color_provider.h

@@ -49,6 +49,9 @@ class ASH_PUBLIC_EXPORT AppListColorProvider {
   virtual SkColor GetSeparatorColor() const = 0;
   virtual SkColor GetSearchResultViewHighlightColor() const = 0;
   virtual SkColor GetSearchResultViewInkDropColor() const = 0;
+  virtual SkColor GetFocusRingColor() const = 0;
+  virtual SkColor GetFolderItemFocusRingColor() const = 0;
+
   virtual float GetFolderBackgrounBlurSigma() const = 0;
 
  protected:

ash/public/cpp/app_list/app_list_config.cc

@@ -314,7 +314,6 @@ AppListConfig::AppListConfig(AppListConfigType type)
       page_flip_zone_size_(20),
       grid_tile_spacing_in_folder_(8),
       blur_radius_(30),
-      grid_selected_color_(gfx::kGoogleBlue300),
       page_transition_duration_(base::TimeDelta::FromMilliseconds(250)),
       overscroll_page_transition_duration_(
           base::TimeDelta::FromMilliseconds(50)),
@@ -461,7 +460,6 @@ AppListConfig::AppListConfig(const AppListConfig& base_config,
                    scale_x,
                    inner_tile_scale_y)),
       blur_radius_(base_config.blur_radius_),
-      grid_selected_color_(base_config.grid_selected_color_),
       page_transition_duration_(base_config.page_transition_duration_),
       overscroll_page_transition_duration_(
           base_config.overscroll_page_transition_duration_),

ash/public/cpp/app_list/app_list_config.h

@@ -148,7 +148,6 @@ class ASH_PUBLIC_EXPORT AppListConfig {
     return grid_tile_spacing_in_folder_;
   }
   int blur_radius() const { return blur_radius_; }
-  SkColor grid_selected_color() const { return grid_selected_color_; }
   base::TimeDelta page_transition_duration() const {
     return page_transition_duration_;
   }
@@ -433,10 +432,6 @@ class ASH_PUBLIC_EXPORT AppListConfig {
   // The blur radius used in the app list.
   const int blur_radius_;
 
-  // The keyboard select color for grid views, which are on top of a black
-  // shield view for new design (12% white).
-  const SkColor grid_selected_color_;
-
   // Duration for page transition.
   const base::TimeDelta page_transition_duration_;