[Picture in Picture] Make controls focusable and add relevant text.

This makes the controls on the Picture-in-Picture window focusable. This
also adds accessible names and tooltip texts for each of the controls.

Since the play/pause button is a ToggleImageButton, when the button is
toggled it will switch between showing play or pause assets / text.

BUG: 836389
Change-Id: Ie95afc1d9096e0860427c2498ddf0d319adb8df8
Reviewed-on: https://chromium-review.googlesource.com/1068125
Commit-Queue: apacible <apacible@chromium.org>
Reviewed-by: Mounir Lamouri <mlamouri@chromium.org>
Reviewed-by: Carlos Pizano <cpu@chromium.org>
Cr-Commit-Position: refs/heads/master@{#560856}

chrome/app/generated_resources.grd

@@ -5695,9 +5695,21 @@ I don't think this site should be blocked!
       </message>
 
       <!-- Picture-in-Picture -->
-      <message name="IDS_PICTURE_IN_PICTURE_TITLE_TEXT" desc="Title of the picture-in-picture window. This appears in the system tray and window header.">
+      <message name="IDS_PICTURE_IN_PICTURE_TITLE_TEXT" desc="Title of the Picture-in-Picture window. This appears in the system tray and window header.">
         Picture-in-Picture
       </message>
+      <message name="IDS_PICTURE_IN_PICTURE_PAUSE_CONTROL_TEXT" desc="Text label of the pause control button. The button appears when the user hovers over the Picture-in-Picture window and the video is currently playing.">
+        Pause
+      </message>
+      <message name="IDS_PICTURE_IN_PICTURE_PLAY_CONTROL_TEXT" desc="Text label of the play control button. The button appears when the user hovers over the Picture-in-Picture window and the video is currently paused.">
+        Play
+      </message>
+      <message name="IDS_PICTURE_IN_PICTURE_CLOSE_CONTROL_TEXT" desc="Text label of the close control button. The button appears when the user hovers over the Picture-in-Picture window.">
+        Close
+      </message>
+      <message name="IDS_PICTURE_IN_PICTURE_PLAY_PAUSE_CONTROL_ACCESSIBLE_TEXT" desc="Accessible text label used for the controls button in the Picture-in-Picture window. The button toggles between play and pause controls.">
+        Toggle video to play or pause
+      </message>
 
       <!-- Load State -->
       <message name="IDS_LOAD_STATE_WAITING_FOR_SOCKET_SLOT" desc="Status text when Chrome is at its connection limit, and is waiting for a URL request to complete to free up a connection.">

chrome/browser/ui/views/overlay/overlay_window_views.cc

@@ -193,15 +193,15 @@ gfx::Rect OverlayWindowViews::CalculateAndUpdateBounds() {
 }
 
 void OverlayWindowViews::SetUpViews() {
-  // Set up views::View that slightly darkens the video so the media controls
-  // appear more prominently. This is especially important in cases with a
-  // very light background.
+  // views::View that slightly darkens the video so the media controls appear
+  // more prominently. This is especially important in cases with a very light
+  // background. --------------------------------------------------------------
   controls_background_view_->SetSize(GetBounds().size());
   controls_background_view_->SetPaintToLayer(ui::LAYER_SOLID_COLOR);
   GetControlsBackgroundLayer()->SetColor(SK_ColorBLACK);
   GetControlsBackgroundLayer()->SetOpacity(0.4f);
 
-  // Set up views::View that closes the window.
+  // views::View that closes the window. --------------------------------------
   close_controls_view_->SetSize(kCloseIconSize);
   close_controls_view_->SetImageAlignment(views::ImageButton::ALIGN_CENTER,
                                           views::ImageButton::ALIGN_MIDDLE);
@@ -209,7 +209,14 @@ void OverlayWindowViews::SetUpViews() {
       views::Button::STATE_NORMAL,
       gfx::CreateVectorIcon(views::kPictureInPictureCloseIcon, SK_ColorWHITE));
 
-  // Set up views::View that toggles play/pause.
+  // Accessibility.
+  close_controls_view_->SetFocusForPlatform();  // Make button focusable.
+  const base::string16 close_button_label(
+      l10n_util::GetStringUTF16(IDS_PICTURE_IN_PICTURE_CLOSE_CONTROL_TEXT));
+  close_controls_view_->SetAccessibleName(close_button_label);
+  close_controls_view_->SetTooltipText(close_button_label);
+
+  // views::View that toggles play/pause. -------------------------------------
   play_pause_controls_view_->SetSize(kPlayPauseIconSize);
   play_pause_controls_view_->SetImageAlignment(
       views::ImageButton::ALIGN_CENTER, views::ImageButton::ALIGN_MIDDLE);
@@ -224,6 +231,21 @@ void OverlayWindowViews::SetUpViews() {
                                              &pause_icon);
   play_pause_controls_view_->SetToggled(!controller_->IsPlayerActive());
 
+  // Accessibility.
+  play_pause_controls_view_->SetFocusForPlatform();  // Make button focusable.
+  const base::string16 play_pause_accessible_button_label(
+      l10n_util::GetStringUTF16(
+          IDS_PICTURE_IN_PICTURE_PLAY_PAUSE_CONTROL_ACCESSIBLE_TEXT));
+  play_pause_controls_view_->SetAccessibleName(
+      play_pause_accessible_button_label);
+  const base::string16 play_button_label(
+      l10n_util::GetStringUTF16(IDS_PICTURE_IN_PICTURE_PLAY_CONTROL_TEXT));
+  play_pause_controls_view_->SetTooltipText(play_button_label);
+  const base::string16 pause_button_label(
+      l10n_util::GetStringUTF16(IDS_PICTURE_IN_PICTURE_PAUSE_CONTROL_TEXT));
+  play_pause_controls_view_->SetToggledTooltipText(pause_button_label);
+
+  // --------------------------------------------------------------------------
   // Paint to ui::Layers to use in the OverlaySurfaceEmbedder.
   video_view_->SetPaintToLayer(ui::LAYER_TEXTURED);
   close_controls_view_->SetPaintToLayer(ui::LAYER_TEXTURED);