A11y: Label "delete word" button in setting's custom dictionary.

Bug: 1008556
Change-Id: Ib07aacbba4c611620e64228ae538e02d58aecd75
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/1827384
Commit-Queue: Hector Carmona <hcarmona@chromium.org>
Auto-Submit: Hector Carmona <hcarmona@chromium.org>
Reviewed-by: Demetrios Papadopoulos <dpapad@chromium.org>
Cr-Commit-Position: refs/heads/master@{#702285}

chrome/app/settings_strings.grdp

@@ -2877,6 +2877,9 @@
     <message name="IDS_SETTINGS_LANGUAGES_ADD_DICTIONARY_WORD_LENGTH_ERROR" desc="Error message displayed to the user when the word is too long in the text input used to add a new word to the custom spell check dictionary.">
       Cannot exceed 99 letters
     </message>
+    <message name="IDS_SETTINGS_LANGUAGES_DELETE_DICTIONARY_WORD_BUTTON" desc="Message shown over the button to delete a custom word.">
+      Delete word
+    </message>
     <message name="IDS_SETTINGS_LANGUAGES_DICTIONARY_WORDS" desc="Header for the list of custom dictionary words used for spell check.">
       Custom words
     </message>

chrome/browser/resources/settings/languages_page/edit_dictionary_page.html

@@ -56,9 +56,12 @@
             scroll-target="[[subpageScrollTarget]]">
           <template>
             <div class="list-item">
-              <div class="word text-elide">[[item]]</div>
+              <div id$="word[[index]]" class="word text-elide">[[item]]</div>
               <cr-icon-button class="icon-clear" on-click="onRemoveWordTap_"
-                  tabindex$="[[tabIndex]]"></cr-icon-button>
+                  tabindex$="[[tabIndex]]"
+                  title="$i18n{deleteDictionaryWordButton}"
+                  aria-describedby$="word[[index]]">
+              </cr-icon-button>
             </div>
           </template>
         </iron-list>

chrome/browser/ui/webui/settings/settings_localized_strings_provider.cc

@@ -1613,6 +1613,8 @@ void AddLanguagesStrings(content::WebUIDataSource* html_source) {
      IDS_SETTINGS_LANGUAGES_ADD_DICTIONARY_WORD_DUPLICATE_ERROR},
     {"addDictionaryWordLengthError",
      IDS_SETTINGS_LANGUAGES_ADD_DICTIONARY_WORD_LENGTH_ERROR},
+    {"deleteDictionaryWordButton",
+     IDS_SETTINGS_LANGUAGES_DELETE_DICTIONARY_WORD_BUTTON},
     {"customDictionaryWords", IDS_SETTINGS_LANGUAGES_DICTIONARY_WORDS},
     {"noCustomDictionaryWordsFound",
      IDS_SETTINGS_LANGUAGES_DICTIONARY_WORDS_NONE},

chrome/test/data/webui/settings/a11y/edit_dictionary_a11y_test.js

@@ -2,9 +2,7 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
-/**
- * @fileoverview Define accessibility tests for the EDIT_DICTIONARY route.
- */
+/** @fileoverview Define accessibility tests for the EDIT_DICTIONARY route.  */
 
 // Disable since the EDIT_DICTIONARY route does not exist on Mac.
 GEN('#if !defined(OS_MACOSX)');
@@ -14,18 +12,44 @@ GEN_INCLUDE([
   'settings_accessibility_test.js',
 ]);
 
-AccessibilityTest.define('SettingsAccessibilityTest', {
+// eslint-disable-next-line no-var
+var EditDictionaryA11yTest = class extends SettingsAccessibilityTest {
+  /** @override */
+  get extraLibraries() {
+    return super.extraLibraries.concat([
+      '../../fake_chrome_event.js',
+      '../../test_browser_proxy.js',
+      '../../test_util.js',
+      '../fake_language_settings_private.js',
+      '../fake_settings_private.js',
+    ]);
+  }
+};
+
+function getDictionaryPage() {
+  const settingsUI = document.querySelector('settings-ui');
+  assertTrue(!!settingsUI);
+  const settingsMain = settingsUI.$.main;
+  assertTrue(!!settingsMain);
+  const settingsBasicPage = settingsMain.$$('settings-basic-page');
+  assertTrue(!!settingsBasicPage);
+  const languagesPage = settingsBasicPage.$$('settings-languages-page');
+  assertTrue(!!languagesPage);
+  const dictionaryPage = languagesPage.$$('settings-edit-dictionary-page');
+  assertTrue(!!dictionaryPage);
+  return dictionaryPage;
+}
+
+AccessibilityTest.define('EditDictionaryA11yTest', {
   /** @override */
   name: 'EDIT_DICTIONARY',
+
   /** @override */
   axeOptions: SettingsAccessibilityTest.axeOptions,
-  /** @override */
-  setup: function() {
-    settings.navigateTo(settings.routes.EDIT_DICTIONARY);
-    Polymer.dom.flush();
-  },
-  /** @override */
-  tests: {'Accessible with No Changes': function() {}},
+
+  /** @type {settings.FakeLanguageSettingsPrivate} */
+  languageSettingsPrivate_: null,
+
   /** @override */
   violationFilter:
       Object.assign({}, SettingsAccessibilityTest.violationFilter, {
@@ -39,7 +63,39 @@ AccessibilityTest.define('SettingsAccessibilityTest', {
           // TODO(crbug.com/808276): remove this exception when bug is fixed.
           return nodeResult.element.getAttribute('tabindex') == '0';
         },
-      })
+      }),
+
+  /** @override */
+  setup: async function() {
+    // Don't replace b/c each test case needs to use the same fake.
+    if (!this.languageSettingsPrivate_) {
+      this.languageSettingsPrivate_ =
+          new settings.FakeLanguageSettingsPrivate(),
+      settings.languageSettingsPrivateApiForTest =
+          this.languageSettingsPrivate_;
+    }
+
+    settings.navigateTo(settings.routes.EDIT_DICTIONARY);
+    Polymer.dom.flush();
+    await test_util.flushTasks();
+  },
+
+  /** @override */
+  tests: {
+    'Accessible with No Changes': function() {
+      const dictionaryPage = getDictionaryPage();
+      assertFalse(!!dictionaryPage.$$('#list'));
+    },
+
+    'Load data to list': function() {
+      const dictionaryPage = getDictionaryPage();
+
+      this.languageSettingsPrivate_.addSpellcheckWord('one');
+
+      assertTrue(!!dictionaryPage.$$('#list'));
+      assertEquals(1, dictionaryPage.$$('#list').items.length);
+    },
+  },
 });
 
-GEN('#endif // !defined(OS_MACOSX)');
+GEN('#endif  // !defined(OS_MACOSX)');