flags: add accessible label for search field

Currently the field is only labelled by its placeholder text, which
is not read by all screenreaders. This change gives it an explicit
accessible label instead.

Bug: 1083307
Change-Id: I7b79de41576c9a9c4caf33ef54a5009329d3d0f5
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2538531Reviewed-by: Eugene But <eugenebut@chromium.org>
Reviewed-by: Ted Choc <tedchoc@chromium.org>
Commit-Queue: Elly Fong-Jones <ellyjones@chromium.org>
Cr-Commit-Position: refs/heads/master@{#832153}

chrome/browser/ui/webui/flags_ui.cc

@@ -163,6 +163,7 @@ void FlagsUI::AddStrings(content::WebUIDataSource* source) {
   source->AddLocalizedString("reset", IDS_FLAGS_UI_PAGE_RESET);
   source->AddLocalizedString("reset-acknowledged",
                              IDS_FLAGS_UI_RESET_ACKNOWLEDGED);
+  source->AddLocalizedString("search-label", IDS_FLAGS_UI_SEARCH_LABEL);
   source->AddLocalizedString("search-placeholder",
                              IDS_FLAGS_UI_SEARCH_PLACEHOLDER);
   source->AddLocalizedString("title", IDS_FLAGS_UI_TITLE);
@@ -197,6 +198,7 @@ void FlagsDeprecatedUI::AddStrings(content::WebUIDataSource* source) {
   source->AddLocalizedString("reset", IDS_DEPRECATED_FEATURES_PAGE_RESET);
   source->AddLocalizedString("reset-acknowledged",
                              IDS_DEPRECATED_UI_RESET_ACKNOWLEDGED);
+  source->AddLocalizedString("search-label", IDS_FLAGS_UI_SEARCH_LABEL);
   source->AddLocalizedString("search-placeholder",
                              IDS_DEPRECATED_FEATURES_SEARCH_PLACEHOLDER);
   source->AddLocalizedString("title", IDS_DEPRECATED_FEATURES_TITLE);

components/flags_strings.grdp

@@ -6,6 +6,9 @@
   <message name="IDS_FLAGS_UI_SEARCH_PLACEHOLDER" translateable="false" desc="The placeholder for the search box on the about:flags page.">
     Search flags
   </message>
+  <message name="IDS_FLAGS_UI_SEARCH_LABEL" translateable="false" desc="The accessible label for the search box on the about:flags page.">
+    Search flags
+  </message>
   <message name="IDS_FLAGS_UI_TITLE" translateable="false" desc="The page title for the about:flags page.">
     Experiments
   </message>

components/flags_ui/resources/flags.html

@@ -30,8 +30,10 @@
   <div class="flex-container">
     <div class="flex">
       <div class="search-container">
-        <input type="text" id="search" placeholder="$i18n{search-placeholder}" tabindex="1"
-            autocomplete="off" spellcheck="false">
+        <input type="text" id="search"
+               aria-label="$i18n{search-label}"
+               placeholder="$i18n{search-placeholder}" tabindex="1"
+               autocomplete="off" spellcheck="false">
         <input type="button" class="clear-search" title="$i18n{clear-search}"
             tabindex="2">
       </div>

ios/chrome/browser/ui/webui/flags_ui.cc

@@ -230,6 +230,7 @@ void FlagsUI::AddFlagsIOSStrings(web::WebUIIOSDataSource* source) {
   source->AddLocalizedString("reset", IDS_FLAGS_UI_PAGE_RESET);
   source->AddLocalizedString("reset-acknowledged",
                              IDS_FLAGS_UI_RESET_ACKNOWLEDGED);
+  source->AddLocalizedString("search-label", IDS_FLAGS_UI_SEARCH_LABEL);
   source->AddLocalizedString("search-placeholder",
                              IDS_FLAGS_UI_SEARCH_PLACEHOLDER);
   source->AddLocalizedString("title", IDS_FLAGS_UI_TITLE);