fix: add aria-label for removing attachment in new request form

[gosiexon-zen]

Description

Added aria-label with information how to remove the attachment while navigating with keyboard.
This A11y issue was reported here: GG-3796
Here is also explanation why we don't make the remove button accessible by tab navigation: https://zendesk.atlassian.net/browse/GG-3796?focusedCommentId=2055655

Screenshots

Checklist

• 📗 all commit messages follow the conventional commits standard
• ⬅️ changes are compatible with RTL direction
• ♿ Changes to the UI are tested for accessibility and compliant with WCAG 2.1.
• 📝 changes are tested in Chrome, Firefox, Safari and Edge
• 📱 changes are responsive and tested in mobile
• 👍 PR is approved by @zendesk/vikings

[kubraokcu]

👍🏼🙌🏼🌐

[Fredx87]

I added a couple of comments, and we also need to wrap the FileListItem components with the FileList component here as shown in the Garden examples: https://66bcf1412f3b1af56ce3fee1--zendeskgarden.netlify.app/components/file-upload#files

[Fredx87]

I think we don't need this title anymore

[Fredx87]

Nit: there is a typo in the key (attachemnts)

[jgorfine-zendesk]

Hi @gosiexon-zen, thanks so much for making this change. I just tested it out in my local Guide instance, and I believe it's working as expected:

Screen.Recording.2024-11-20.at.3.35.57.PM.mov

Is there any chance we could update the "Remove file" button (line 74 of FileListItem.tsx) so it includes the file name, like the label for the group does? That way, if a screen reader user uploads multiple files, they'll be able to tell the "Remove" buttons apart, when navigating the page via form controls.

• Current behavior: "Remove file"
• Preferred behavior: "Remove file: {{fileName}}"

[gosiexon-zen]

Hi @jgorfine-zendesk I applied your suggestions, but I think there should be Stop uploading {{fileName}} for the removing of the currently uploading files and Remove file: {{fileName}} for those which are already uploaded. Let me know if it is ok.

[kubraokcu]

Reapproving 👍🏼🌐

[jgorfine-zendesk]

Hi @gosiexon-zen, I've requested a couple more small changes, but, after that, we should be good to go. 🙂 (I'm approving this PR anyway because the requested changes are more of a nice-to-have than a must-have.)

Here's the current screen reader experience on VoiceOver x Safari:

Screen.Recording.2024-11-22.at.3.32.22.PM.mov

[jgorfine-zendesk]

Can we please add aria-describedby={undefined} here? That way, the screen reader won't read out the "Remove file" text from the tooltip after it reads out the name of the button.

Suggested change

	aria-label={t(
	"new-request-form.attachments.remove-file-arria-label",
	"Remove file: {{fileName}}",
	{ fileName }
	)}
	aria-label={t(
	"new-request-form.attachments.remove-file-arria-label",
	"Remove file: {{fileName}}",
	{ fileName }
	)}
	aria-describedby={undefined}

• Current screen reader announcement: Remove file: [file name], Remove file, button
• Expected screen reader announcement: Remove file: [file name], button

(The word "button" comes from it being an HTML button element.)

[gosiexon-zen]

Ok I applied suggestion

[jgorfine-zendesk]

Can we please add aria-describedby={undefined} to avoid a duplicate screen reader announcement here, too?

Suggested change

	aria-label={t(
	"new-request-form.attachments.stop-upload-aria-label",
	"Stop uploading {{fileName}}",
	{ fileName }
	)}
	aria-label={t(
	"new-request-form.attachments.stop-upload-aria-label",
	"Stop uploading {{fileName}}",
	{ fileName }
	)}
	aria-describedby={undefined}

• Current screen reader announcement: Stop uploading [file name], Stop uploading, button
• Expected screen reader announcement: Stop uploading [file name], button

(The word "button" comes from it being an HTML button element.)

[gosiexon-zen]

Ok I applied suggestion

[zd-svc-github-copenhagen-theme]

🎉 This PR is included in version 4.2.4 🎉

The release is available on GitHub release

Your semantic-release bot 📦🚀