fix: add aria label for removing attachment

zendesk · Nov 14, 2024 · 452cc68 · 452cc68
1 parent a9a12f0
commit 452cc68
Show file tree

Hide file tree

Showing 7 changed files with 40,277 additions and 70 deletions.
diff --git a/assets/flash-notifications-bundle.js b/assets/flash-notifications-bundle.js
diff --git a/assets/new-request-form-bundle.js b/assets/new-request-form-bundle.js
diff --git a/assets/new-request-form-translations-bundle.js b/assets/new-request-form-translations-bundle.js
diff --git a/assets/shared-bundle.js b/assets/shared-bundle.js
diff --git a/assets/wysiwyg-bundle.js b/assets/wysiwyg-bundle.js
diff --git a/src/modules/new-request-form/fields/attachments/FileListItem.tsx b/src/modules/new-request-form/fields/attachments/FileListItem.tsx
@@ -55,7 +55,17 @@ export function FileListItem({
 
   return (
     <FileList.Item>
-      <File type="generic" title={fileName} onKeyDown={handleFileKeyDown}>
+      <File
+        type="generic"
+        title={fileName}
+        tabIndex={0}
+        aria-label={t(
+          "new-request-form.attachemnts.file",
+          "File: {{fileName}}, press delete to remove",
+          { fileName }
+        )}
+        onKeyDown={handleFileKeyDown}
+      >
         {file.status === "pending" ? (
           <>
             <FileNameWrapper>{fileName}</FileNameWrapper>

diff --git a/src/modules/new-request-form/translations/en-us.yml b/src/modules/new-request-form/translations/en-us.yml
@@ -101,6 +101,11 @@ parts:
       title: "[A11Y] Hidden label for screen readers for the upload attachment progress bar. {{fileName}} will be replaced by file name, e.g., [image.png]. Alternative English if you encounter declension issues: [Uploading the file {{fileName}}]"
       screenshot: "https://drive.google.com/file/d/1Y6yeqp3fbfJbuq7tT8VutsLa80GZju-V/view?usp=drive_link"
       value: "Uploading {{fileName}}"
+  - translation:
+      key: "new-request-form.attachemnts.file"
+      title: "[A11Y] Hidden label for screen readers informing how they can remove the file with keyboard navigation. {{fileName}} will be replaced by file name, e.g., [image.png]. Alternative English if you encounter declension issues: [Press Delete to remove the file {{fileName}}]"
+      screenshot: "https://drive.google.com/file/d/1JFVE2twzUkg-U6gGAs2EHqD-3jPvtJDA/view?usp=drive_link"
+      value: "File: {{fileName}}, press delete to remove"
   - translation:
       key: "new-request-form.submit"
       title: "Submit button for the New Request Form"