Add accessible name for the eyedropper button.

This CL updates the eyedropper button from the color picker to
have the correct aria name and role.

Bug: 1141168
Change-Id: I6f10794027d26c38785ee47b51fb8b6f3ebe69d3
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2528303
Commit-Queue: Ionel Popescu <iopopesc@microsoft.com>
Reviewed-by: Kent Tamura <tkent@chromium.org>
Reviewed-by: Mason Freed <masonfreed@chromium.org>
Cr-Commit-Position: refs/heads/master@{#826673}

content/test/data/accessibility/html/input-color-with-popup-open-expected-mac.txt

@@ -6,7 +6,7 @@ AXWebArea AXRoleDescription='HTML content'
 ++++++++++AXGroup AXRoleDescription='group'
 ++++++++++++AXSlider AXDescription='Color well' AXRoleDescription='Color well with two-dimensional slider for selecting saturation and lightness' AXValue=227
 ++++++++++AXGroup AXRoleDescription='group'
-++++++++++++AXGroup AXRoleDescription='group'
+++++++++++++AXButton AXDescription='Eyedropper' AXRoleDescription='button'
 ++++++++++++AXGroup AXRoleDescription='group'
 ++++++++++++++AXSlider AXDescription='Hue slider' AXRoleDescription='slider' AXValue=116
 ++++++++++AXTextField AXDescription='Red channel' AXRoleDescription='text field' AXValue='255'

content/test/data/accessibility/html/input-color-with-popup-open-expected-uia-win.txt

@@ -7,7 +7,7 @@ Document
 ++++++++++++Group
 ++++++++++++++Slider Name='Color well' RangeValue.IsReadOnly=false RangeValue.LargeChange=0.00 RangeValue.SmallChange=0.00 RangeValue.Maximum=32016.00 RangeValue.Minimum=0.00 RangeValue.Value=227.00 Value.Value='X: 227, Y: 0'
 ++++++++++++Group IsControlElement=false
-++++++++++++++Group
+++++++++++++++Button Name='Eyedropper'
 ++++++++++++++Group
 ++++++++++++++++Slider Name='Hue slider' RangeValue.IsReadOnly=false RangeValue.LargeChange=0.00 RangeValue.SmallChange=0.00 RangeValue.Maximum=129.00 RangeValue.Minimum=0.00 RangeValue.Value=116.00 Value.Value='116'
 ++++++++++++Edit Name='Red channel' Value.Value='255'

content/test/data/accessibility/html/input-color-with-popup-open-expected-win.txt

@@ -6,7 +6,7 @@ ROLE_SYSTEM_DOCUMENT READONLY FOCUSABLE ia2_hypertext='<obj0>'
 ++++++++++IA2_ROLE_SECTION ia2_hypertext='<obj0>'
 ++++++++++++ROLE_SYSTEM_SLIDER name='Color well' value='X: 227, Y: 0' FOCUSABLE IA2_STATE_HORIZONTAL localized_extended_role='Color well with two-dimensional slider for selecting saturation and lightness'
 ++++++++++IA2_ROLE_SECTION ia2_hypertext='<obj0><obj1>'
-++++++++++++IA2_ROLE_SECTION FOCUSABLE
+++++++++++++ROLE_SYSTEM_PUSHBUTTON name='Eyedropper' FOCUSABLE
 ++++++++++++IA2_ROLE_SECTION ia2_hypertext='<obj0>'
 ++++++++++++++ROLE_SYSTEM_SLIDER name='Hue slider' value='116' FOCUSABLE IA2_STATE_HORIZONTAL
 ++++++++++ROLE_SYSTEM_TEXT name='Red channel' value='255' FOCUSABLE ia2_hypertext='255'

third_party/blink/public/strings/blink_strings.grd

@@ -339,6 +339,9 @@ below:
         <message name="IDS_AX_COLOR_EDIT_SATURATION" desc="Accessibility label of the saturation edit box in a color picker popup">
           Saturation
         </message>
+        <message name="IDS_AX_COLOR_EYEDROPPER" desc="Accessibility label of the eyedropper button in a color picker popup">
+          Eyedropper
+        </message>
         <message name="IDS_AX_COLOR_FORMAT_TOGGLER" desc="Accessibility label of the format toggler spinbutton in a color picker popup">
           Format toggler
         </message>

third_party/blink/public/strings/blink_strings_grd/IDS_AX_COLOR_EYEDROPPER.png.sha1

+7e14bad5d7b9f2747f83ce1cb1ca5fa986dbda22
\ No newline at end of file

third_party/blink/renderer/core/html/forms/color_chooser_popup_ui_controller.cc

@@ -142,6 +142,7 @@ void ColorChooserPopupUIController::WriteColorPickerDocument(
                        data);
   AddLocalizedProperty("axFormatTogglerLabel", IDS_AX_COLOR_FORMAT_TOGGLER,
                        data);
+  AddLocalizedProperty("axEyedropperLabel", IDS_AX_COLOR_EYEDROPPER, data);
 #else
   CHECK(false) << "We should never reach PagePopupClient code on Android";
 #endif

third_party/blink/renderer/core/html/forms/resources/color_picker.js

@@ -813,6 +813,8 @@ class EyeDropper extends HTMLElement {
     }
 
     this.setAttribute('tabIndex', 0);
+    this.setAttribute('role', 'button');
+    this.setAttribute('aria-label', global.params.axEyedropperLabel);
     this.addEventListener('click', this.onClick_);
     this.addEventListener('keydown', this.onKeyDown_);
   }