feedback: a11y - localize the aria label of the replace file button

Screenshot: http://screen/4krLmtsdFWZQZDT.png. Bug: b:185624798 Test: browser_tests --gtest_filter=OSFeedbackBrowserTest.* Change-Id: I6c80b820d1157b25b3ac741182f7c29c60d61462 Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/3781245 Reviewed-by: Gavin Williams <gavinwill@chromium.org> Commit-Queue: Xiangdong Kong <xiangdongkong@google.com> Cr-Commit-Position: refs/heads/main@{#1027487}
Denger-Network · Jul 23, 2022 · 2eabca8 · 2eabca8
1 parent cd12a00
commit 2eabca8
Show file tree

Hide file tree

Showing 5 changed files with 16 additions and 6 deletions.
diff --git a/ash/webui/os_feedback_ui/os_feedback_ui.cc b/ash/webui/os_feedback_ui/os_feedback_ui.cc
@@ -61,6 +61,7 @@ void AddLocalizedStrings(content::WebUIDataSource* source) {
       {"previewImageAriaLabel", IDS_FEEDBACK_TOOL_PREVIEW_IMAGE_ARIA_LABEL},
       {"addFileLabel", IDS_FEEDBACK_TOOL_ADD_FILE_LABEL},
       {"replaceFileLabel", IDS_FEEDBACK_TOOL_REPLACE_FILE_LABEL},
+      {"replaceFileArialLabel", IDS_FEEDBACK_TOOL_REPLACE_FILE_ARIA_LABEL},
       {"userEmailLabel", IDS_FEEDBACK_TOOL_USER_EMAIL_LABEL},
       {"shareDiagnosticDataLabel",
        IDS_FEEDBACK_TOOL_SHARE_DIAGNOSTIC_DATA_LABEL},

diff --git a/ash/webui/os_feedback_ui/resources/file_attachment.html b/ash/webui/os_feedback_ui/resources/file_attachment.html
@@ -92,7 +92,8 @@
   <input type="checkbox" id="selectFileCheckbox">
   <div id="replaceFileInfo">
     <div id="selectedFileName" class="overflow-text">[[selectedFileName_]]</div>
-    <button id="replaceFileLabel" class="file-input"
+    <button id="replaceFileButton" class="file-input"
+        aria-label="[[i18n('replaceFileArialLabel')]]"
         on-click="handleOpenFileInputClick_">
       [[i18n('replaceFileLabel')]]
     </button>

diff --git a/chrome/test/data/webui/chromeos/os_feedback_ui/file_attachment_test.js b/chrome/test/data/webui/chromeos/os_feedback_ui/file_attachment_test.js
@@ -67,7 +67,7 @@ export function fileAttachmentTestSuite() {
     // Verify the i18n string is added.
     assertTrue(page.i18nExists('addFileLabel'));
     // Verify the replace file label is in the page.
-    assertEquals('Replace', getElementContent('#replaceFileLabel'));
+    assertEquals('Replace', getElementContent('#replaceFileButton'));
     // The addFileContainer should be visible when no file is selected.
     assertTrue(isVisible(getElement('#addFileContainer')));
     // The replaceFileContainer should be invisible when no file is selected.
@@ -101,11 +101,11 @@ export function fileAttachmentTestSuite() {
 
   // Test that when the replace file label is clicked, the file dialog is
   // opened.
-  test('canOpenFileDialogByClickReplaceFileLabel', async () => {
+  test('canOpenFileDialogByClickReplaceFileButton', async () => {
     await initializePage();
     // Verify the add file label is in the page.
-    const replaceFileLabel = getElement('#replaceFileLabel');
-    assertTrue(!!replaceFileLabel);
+    const replaceFileButton = getElement('#replaceFileButton');
+    assertTrue(!!replaceFileButton);
     /**@type {!HTMLInputElement} */
     const fileDialog =
         /**@type {!HTMLInputElement} */ (getElement('#selectFileDialog'));
@@ -117,7 +117,7 @@ export function fileAttachmentTestSuite() {
       fileDialogClicked = true;
     });
 
-    replaceFileLabel.click();
+    replaceFileButton.click();
 
     await fileDialogClickPromise;
     assertTrue(fileDialogClicked);
@@ -149,6 +149,10 @@ export function fileAttachmentTestSuite() {
     assertFalse(isVisible(getElement('#addFileContainer')));
     // The replaceFileContainer should be visible.
     assertTrue(isVisible(getElement('#replaceFileContainer')));
+    // The aria label of the replace file button is set.
+    assertEquals('Replace file', getElement('#replaceFileButton').ariaLabel);
+    // Verify the i18n string is added.
+    assertTrue(page.i18nExists('replaceFileArialLabel'));
   });
 
   // Test that when there is not a file selected, getAttachedFile returns null.

diff --git a/chromeos/chromeos_strings.grd b/chromeos/chromeos_strings.grd
@@ -3422,6 +3422,9 @@ Try tapping the mic to ask me anything.
       <message name="IDS_FEEDBACK_TOOL_REPLACE_FILE_LABEL" desc="Label for replacing a file.">
         Replace
       </message>
+      <message name="IDS_FEEDBACK_TOOL_REPLACE_FILE_ARIA_LABEL" desc="Aria Label of the replace file button">
+        Replace file
+      </message>
       <message name="IDS_FEEDBACK_TOOL_ADD_FILE_LABEL" desc="Label for the field of adding a file">
         Add file
       </message>

diff --git a/chromeos/chromeos_strings_grd/IDS_FEEDBACK_TOOL_REPLACE_FILE_ARIA_LABEL.png.sha1 b/chromeos/chromeos_strings_grd/IDS_FEEDBACK_TOOL_REPLACE_FILE_ARIA_LABEL.png.sha1
@@ -0,0 +1 @@
+b6c67bd7f2be57a8632d56ef341cda6debacdb6e