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 👍🏼🌐