feat(a11y): Added an event listener on the file, for availability #733
Conversation
WalkthroughThe changes introduce updates to the Changes
Sequence Diagram(s)sequenceDiagram
participant User
participant FileItem
User->>FileItem: Upload file
FileItem->>User: Update file status (using Symbols)
TipsChatThere are 3 ways to chat with CodeRabbit:
Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments. CodeRabbit Commands (Invoked using PR comments)
Other keywords and placeholders
CodeRabbit Configuration File (
|
egordidenko
force-pushed
the
feat/a11y-listener-event
branch
from
96b0a3f to
3cc91e2
Compare
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 0
Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Files selected for processing (2)
- blocks/FileItem/FileItem.js (4 hunks)
- blocks/UploadList/UploadList.js (1 hunks)
Additional comments not posted (4)
blocks/UploadList/UploadList.js (1)
204-204: LGTM!The addition of the
aria-live="polite"attribute enhances accessibility by ensuring that screen readers announce changes to theheaderTextin a non-intrusive manner.The code changes are approved.
blocks/FileItem/FileItem.js (3)
13-16: LGTM!The modification of
FileItemStateto use string descriptions for its symbols enhances readability and clarity.The code changes are approved.
58-58: LGTM!The addition of the
ariaLabelStatusFileproperty enhances accessibility by ensuring that screen readers can convey the current status of the file item to users.The code changes are approved.
294-294: LGTM!The dynamic binding of the
aria-labelto theariaLabelStatusFileproperty ensures that the status is communicated effectively to assistive technologies.The code changes are approved.
There was a problem hiding this comment.
Actionable comments posted: 0
Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Files selected for processing (35)
- blocks/FileItem/FileItem.js (4 hunks)
- locales/file-uploader/ar.js (1 hunks)
- locales/file-uploader/az.js (1 hunks)
- locales/file-uploader/ca.js (1 hunks)
- locales/file-uploader/cs.js (1 hunks)
- locales/file-uploader/da.js (1 hunks)
- locales/file-uploader/de.js (1 hunks)
- locales/file-uploader/el.js (1 hunks)
- locales/file-uploader/en.js (1 hunks)
- locales/file-uploader/es.js (1 hunks)
- locales/file-uploader/et.js (1 hunks)
- locales/file-uploader/fr.js (1 hunks)
- locales/file-uploader/he.js (1 hunks)
- locales/file-uploader/hy.js (1 hunks)
- locales/file-uploader/is.js (1 hunks)
- locales/file-uploader/it.js (1 hunks)
- locales/file-uploader/ja.js (1 hunks)
- locales/file-uploader/ka.js (1 hunks)
- locales/file-uploader/kk.js (1 hunks)
- locales/file-uploader/ko.js (1 hunks)
- locales/file-uploader/lv.js (1 hunks)
- locales/file-uploader/nb.js (1 hunks)
- locales/file-uploader/nl.js (1 hunks)
- locales/file-uploader/pl.js (1 hunks)
- locales/file-uploader/pt.js (1 hunks)
- locales/file-uploader/ro.js (1 hunks)
- locales/file-uploader/ru.js (1 hunks)
- locales/file-uploader/sk.js (1 hunks)
- locales/file-uploader/sr.js (1 hunks)
- locales/file-uploader/sv.js (1 hunks)
- locales/file-uploader/tr.js (1 hunks)
- locales/file-uploader/uk.js (1 hunks)
- locales/file-uploader/vi.js (1 hunks)
- locales/file-uploader/zh-TW.js (1 hunks)
- locales/file-uploader/zh.js (1 hunks)
Additional comments not posted (165)
locales/file-uploader/zh.js (5)
114-114: LGTM!The translation for 'finished' appears correct.
115-115: LGTM!The translation for 'failed' appears correct.
116-116: LGTM!The translation for 'uploading' appears correct.
117-117: LGTM!The translation for 'idle' appears correct.
118-118: LGTM!The translation for 'a11y-file-item-status' appears correct and follows the format for accessibility.
locales/file-uploader/zh-TW.js (5)
114-114: LGTM!The translation for 'finished' appears correct.
115-115: LGTM!The translation for 'failed' appears correct.
116-116: LGTM!The translation for 'uploading' appears correct.
117-117: LGTM!The translation for 'idle' appears correct.
118-118: LGTM!The translation for 'a11y-file-item-status' appears correct and follows the format for accessibility.
locales/file-uploader/ko.js (5)
113-113: LGTM!The translation for 'finished' appears correct.
114-114: LGTM!The translation for 'failed' appears correct.
115-115: LGTM!The translation for 'uploading' appears correct.
116-116: LGTM!The translation for 'idle' appears correct.
117-117: LGTM!The translation for 'a11y-file-item-status' appears correct and follows the format for accessibility.
locales/file-uploader/ja.js (5)
114-114: LGTM!The translation for "finished" is correct.
115-115: LGTM!The translation for "failed" is correct.
116-116: LGTM!The translation for "uploading" is correct.
117-117: LGTM!The translation for "idle" is correct.
118-118: LGTM!The translation for "File {{fileName}} in status {{status}}" is correct.
locales/file-uploader/he.js (5)
116-116: LGTM!The translation for "finished" is correct.
117-117: LGTM!The translation for "failed" is correct.
118-118: LGTM!The translation for "uploading" is correct.
119-119: LGTM!The translation for "idle" is correct.
120-120: LGTM!The translation for "File {{fileName}} in status {{status}}" is correct.
locales/file-uploader/en.js (5)
114-114: LGTM!The translation for "finished" is correct.
115-115: LGTM!The translation for "failed" is correct.
116-116: LGTM!The translation for "uploading" is correct.
117-117: LGTM!The translation for "idle" is correct.
118-118: LGTM!The translation for "File {{fileName}} in status {{status}}" is correct.
locales/file-uploader/ar.js (5)
122-122: LGTM!The translation for
finishedis correct and consistent with the existing localization format.
123-123: LGTM!The translation for
failedis correct and consistent with the existing localization format.
124-124: LGTM!The translation for
uploadingis correct and consistent with the existing localization format.
125-125: LGTM!The translation for
idleis correct and consistent with the existing localization format.
126-126: LGTM!The translation for
a11y-file-item-statusis correct and consistent with the existing localization format.locales/file-uploader/da.js (5)
115-115: LGTM!The translation for
finishedis correct and consistent with the existing localization format.
116-116: LGTM!The translation for
failedis correct and consistent with the existing localization format.
117-117: LGTM!The translation for
uploadingis correct and consistent with the existing localization format.
118-118: LGTM!The translation for
idleis correct and consistent with the existing localization format.
119-119: LGTM!The translation for
a11y-file-item-statusis correct and consistent with the existing localization format.locales/file-uploader/sv.js (5)
114-114: LGTM!The translation for
finishedis correct and consistent with the existing localization format.
115-115: LGTM!The translation for
failedis correct and consistent with the existing localization format.
116-116: LGTM!The translation for
uploadingis correct and consistent with the existing localization format.
117-117: LGTM!The translation for
idleis correct and consistent with the existing localization format.
118-118: LGTM!The translation for
a11y-file-item-statusis correct and consistent with the existing localization format.locales/file-uploader/nb.js (1)
114-118: LGTM!The added translations for file upload statuses and accessibility are correct and consistent with the existing format.
locales/file-uploader/vi.js (1)
114-118: LGTM!The added translations for file upload statuses and accessibility are correct and consistent with the existing format.
locales/file-uploader/et.js (1)
114-118: LGTM!The added translations for file upload statuses and accessibility are correct and consistent with the existing format.
locales/file-uploader/tr.js (5)
114-114: LGTM!The translation for
finishedis correct and consistent.
115-115: LGTM!The translation for
failedis correct and consistent.
116-116: LGTM!The translation for
uploadingis correct and consistent.
117-117: LGTM!The translation for
idleis correct and consistent.
118-118: LGTM!The translation for
a11y-file-item-statusis correct and consistent. The placeholders{{fileName}}and{{status}}are correctly used.locales/file-uploader/is.js (5)
114-114: LGTM!The translation for
finishedis correct and consistent.
115-115: LGTM!The translation for
failedis correct and consistent.
116-116: LGTM!The translation for
uploadingis correct and consistent.
117-117: LGTM!The translation for
idleis correct and consistent.
118-118: LGTM!The translation for
a11y-file-item-statusis correct and consistent. The placeholders{{fileName}}and{{status}}are correctly used.locales/file-uploader/az.js (5)
114-114: LGTM!The translation for
finishedis correct and consistent.
115-115: LGTM!The translation for
failedis correct and consistent.
116-116: LGTM!The translation for
uploadingis correct and consistent.
117-117: LGTM!The translation for
idleis correct and consistent.
118-118: LGTM!The translation for
a11y-file-item-statusis correct and consistent. The placeholders{{fileName}}and{{status}}are correctly used.locales/file-uploader/kk.js (5)
114-114: LGTM!The translation for
finishedis correct.
115-115: LGTM!The translation for
failedis correct.
116-116: LGTM!The translation for
uploadingis correct.
117-117: LGTM!The translation for
idleis correct.
118-118: LGTM!The translation for
a11y-file-item-statusis correct.locales/file-uploader/hy.js (5)
114-114: LGTM!The translation for
finishedis correct.
115-115: LGTM!The translation for
failedis correct.
116-116: LGTM!The translation for
uploadingis correct.
117-117: LGTM!The translation for
idleis correct.
118-118: LGTM!The translation for
a11y-file-item-statusis correct.locales/file-uploader/ka.js (5)
114-114: LGTM!The translation for
finishedis correct.
115-115: LGTM!The translation for
failedis correct.
116-116: LGTM!The translation for
uploadingis correct.
117-117: LGTM!The translation for
idleis correct.
118-118: LGTM!The translation for
a11y-file-item-statusis correct.locales/file-uploader/sr.js (5)
116-116: LGTM!The translation for
finishedis correctly added asgotovo.
117-117: LGTM!The translation for
failedis correctly added asnije uspelo.
118-118: LGTM!The translation for
uploadingis correctly added asotpremanje.
119-119: LGTM!The translation for
idleis correctly added asneaktivan.
120-120: LGTM!The translation for
a11y-file-item-statusis correctly added asDatoteka {{fileName}} u statusu {{status}}.locales/file-uploader/pl.js (5)
118-118: LGTM!The translation for
finishedis correctly added aszakończono.
119-119: LGTM!The translation for
failedis correctly added asniepowodzenie.
120-120: LGTM!The translation for
uploadingis correctly added aswysyłanie.
121-121: LGTM!The translation for
idleis correctly added asbezczynny.
122-122: LGTM!The translation for
a11y-file-item-statusis correctly added asPlik {{fileName}} w stanie {{status}}.locales/file-uploader/sk.js (5)
118-118: LGTM!The translation for
finishedis correctly added asdokončené.
119-119: LGTM!The translation for
failedis correctly added asneúspešné.
120-120: LGTM!The translation for
uploadingis correctly added asnahrávanie.
121-121: LGTM!The translation for
idleis correctly added asnečinný.
122-122: LGTM!The translation for
a11y-file-item-statusis correctly added asSúbor {{fileName}} v stave {{status}}.locales/file-uploader/cs.js (5)
119-119: LGTM!The translation for
finishedis correct and consistent.
120-120: LGTM!The translation for
failedis correct and consistent.
121-121: LGTM!The translation for
uploadingis correct and consistent.
122-122: LGTM!The translation for
idleis correct and consistent.
123-123: LGTM!The translation for
a11y-file-item-statusis correct and consistent.locales/file-uploader/lv.js (5)
116-116: LGTM!The translation for
finishedis correct and consistent.
117-117: LGTM!The translation for
failedis correct and consistent.
118-118: LGTM!The translation for
uploadingis correct and consistent.
119-119: LGTM!The translation for
idleis correct and consistent.
120-120: LGTM!The translation for
a11y-file-item-statusis correct and consistent.locales/file-uploader/ca.js (5)
117-117: LGTM!The translation for
finishedis correct and consistent.
118-118: LGTM!The translation for
failedis correct and consistent.
119-119: LGTM!The translation for
uploadingis correct and consistent.
120-120: LGTM!The translation for
idleis correct and consistent.
121-121: LGTM!The translation for
a11y-file-item-statusis correct and consistent.locales/file-uploader/nl.js (5)
115-115: LGTM!The translation for
finishedis correct.
116-116: LGTM!The translation for
failedis correct.
117-117: LGTM!The translation for
uploadingis correct.
118-118: LGTM!The translation for
idleis correct.
119-119: LGTM!The translation for
a11y-file-item-statusis correct.locales/file-uploader/pt.js (5)
117-117: LGTM!The translation for
finishedis correct.
118-118: LGTM!The translation for
failedis correct.
119-119: LGTM!The translation for
uploadingis correct.
120-120: LGTM!The translation for
idleis correct.
121-121: LGTM!The translation for
a11y-file-item-statusis correct.locales/file-uploader/ru.js (5)
118-118: LGTM!The translation for
finishedis correct.
119-119: LGTM!The translation for
failedis correct.
120-120: LGTM!The translation for
uploadingis correct.
121-121: LGTM!The translation for
idleis correct.
122-122: LGTM!The translation for
a11y-file-item-statusis correct.locales/file-uploader/de.js (5)
116-116: LGTM!The translation for
finishedis correct.
117-117: LGTM!The translation for
failedis correct.
118-118: LGTM!The translation for
uploadingis correct.
119-119: LGTM!The translation for
idleis correct.
120-120: LGTM!The translation for
a11y-file-item-statusis correct.locales/file-uploader/uk.js (5)
118-118: LGTM!The translation for
finishedis correct.
119-119: LGTM!The translation for
failedis correct.
120-120: LGTM!The translation for
uploadingis correct.
121-121: LGTM!The translation for
idleis correct.
122-122: LGTM!The translation for
a11y-file-item-statusis correct.locales/file-uploader/it.js (5)
117-117: LGTM!The translation for
finishedis correct.
118-118: LGTM!The translation for
failedis correct.
119-119: LGTM!The translation for
uploadingis correct.
120-120: LGTM!The translation for
idleis correct.
121-121: LGTM!The translation for
a11y-file-item-statusis correct.locales/file-uploader/es.js (5)
117-117: LGTM!The translation for
finishedtoterminadois correct.
118-118: LGTM!The translation for
failedtofallidois correct.
119-119: LGTM!The translation for
uploadingtosubiendois correct.
120-120: LGTM!The translation for
idletoinactivois correct.
121-121: LGTM!The translation for
a11y-file-item-statustoArchivo {{fileName}} en estado {{status}}is correct.locales/file-uploader/el.js (5)
116-116: LGTM!The translation for
finishedtoολοκληρώθηκεis correct.
117-117: LGTM!The translation for
failedtoαπέτυχεis correct.
118-118: LGTM!The translation for
uploadingtoανέβασμαis correct.
119-119: LGTM!The translation for
idletoανενεργόςis correct.
120-120: LGTM!The translation for
a11y-file-item-statustoΤο αρχείο {{fileName}} σε κατάσταση {{status}}is correct.locales/file-uploader/ro.js (5)
117-117: LGTM!The translation for
finishedtofinalizatis correct.
118-118: LGTM!The translation for
failedtoeșuatis correct.
119-119: LGTM!The translation for
uploadingtoîncărcareis correct.
120-120: LGTM!The translation for
idletoinactivis correct.
121-121: LGTM!The translation for
a11y-file-item-statustoFișierul {{fileName}} în status {{status}}is correct.locales/file-uploader/fr.js (5)
117-117: LGTM!The translation for
finishedis correct.The code changes are approved.
118-118: LGTM!The translation for
failedis correct.The code changes are approved.
119-119: LGTM!The translation for
uploadingis correct.The code changes are approved.
120-120: LGTM!The translation for
idleis correct.The code changes are approved.
121-121: LGTM!The translation for
a11y-file-item-statusis correct and follows the correct format for placeholders.The code changes are approved.
blocks/FileItem/FileItem.js (7)
13-13: LGTM!The change enhances the readability and clarity of the state constants.
The code changes are approved.
14-14: LGTM!The change enhances the readability and clarity of the state constants.
The code changes are approved.
15-15: LGTM!The change enhances the readability and clarity of the state constants.
The code changes are approved.
16-16: LGTM!The change enhances the readability and clarity of the state constants.
The code changes are approved.
58-58: LGTM!The addition of the
ariaLabelStatusFileproperty improves the accessibility of the component by ensuring that screen readers can convey the current status of the file item to users.The code changes are approved.
294-297: LGTM!The dynamic binding of
ariaLabelStatusFileensures that the status is communicated effectively to assistive technologies.The code changes are approved.
433-433: LGTM!The addition of the
aria-live="polite"attribute allows updates to the file name status to be announced by assistive technologies without interrupting the user.The code changes are approved.
egordidenko
force-pushed
the
feat/a11y-listener-event
branch
from
013e46f to
44486aa
Compare
There was a problem hiding this comment.
Actionable comments posted: 0
Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Files selected for processing (35)
- blocks/FileItem/FileItem.js (4 hunks)
- locales/file-uploader/ar.js (1 hunks)
- locales/file-uploader/az.js (1 hunks)
- locales/file-uploader/ca.js (1 hunks)
- locales/file-uploader/cs.js (1 hunks)
- locales/file-uploader/da.js (1 hunks)
- locales/file-uploader/de.js (1 hunks)
- locales/file-uploader/el.js (1 hunks)
- locales/file-uploader/en.js (1 hunks)
- locales/file-uploader/es.js (1 hunks)
- locales/file-uploader/et.js (1 hunks)
- locales/file-uploader/fr.js (1 hunks)
- locales/file-uploader/he.js (1 hunks)
- locales/file-uploader/hy.js (1 hunks)
- locales/file-uploader/is.js (1 hunks)
- locales/file-uploader/it.js (1 hunks)
- locales/file-uploader/ja.js (1 hunks)
- locales/file-uploader/ka.js (1 hunks)
- locales/file-uploader/kk.js (1 hunks)
- locales/file-uploader/ko.js (1 hunks)
- locales/file-uploader/lv.js (1 hunks)
- locales/file-uploader/nb.js (1 hunks)
- locales/file-uploader/nl.js (1 hunks)
- locales/file-uploader/pl.js (1 hunks)
- locales/file-uploader/pt.js (1 hunks)
- locales/file-uploader/ro.js (1 hunks)
- locales/file-uploader/ru.js (1 hunks)
- locales/file-uploader/sk.js (1 hunks)
- locales/file-uploader/sr.js (1 hunks)
- locales/file-uploader/sv.js (1 hunks)
- locales/file-uploader/tr.js (1 hunks)
- locales/file-uploader/uk.js (1 hunks)
- locales/file-uploader/vi.js (1 hunks)
- locales/file-uploader/zh-TW.js (1 hunks)
- locales/file-uploader/zh.js (1 hunks)
Files skipped from review due to trivial changes (7)
- locales/file-uploader/en.js
- locales/file-uploader/es.js
- locales/file-uploader/he.js
- locales/file-uploader/sk.js
- locales/file-uploader/sv.js
- locales/file-uploader/uk.js
- locales/file-uploader/vi.js
Files skipped from review as they are similar to previous changes (22)
- locales/file-uploader/ar.js
- locales/file-uploader/az.js
- locales/file-uploader/ca.js
- locales/file-uploader/cs.js
- locales/file-uploader/da.js
- locales/file-uploader/de.js
- locales/file-uploader/el.js
- locales/file-uploader/et.js
- locales/file-uploader/fr.js
- locales/file-uploader/hy.js
- locales/file-uploader/is.js
- locales/file-uploader/ja.js
- locales/file-uploader/ka.js
- locales/file-uploader/lv.js
- locales/file-uploader/nb.js
- locales/file-uploader/nl.js
- locales/file-uploader/pl.js
- locales/file-uploader/pt.js
- locales/file-uploader/ro.js
- locales/file-uploader/ru.js
- locales/file-uploader/sr.js
- locales/file-uploader/zh.js
Additional comments not posted (29)
locales/file-uploader/zh-TW.js (5)
114-114: LGTM!The translation for
finishedappears correct.
115-115: LGTM!The translation for
failedappears correct.
116-116: LGTM!The translation for
uploadingappears correct.
117-117: LGTM!The translation for
idleappears correct.
118-118: LGTM!The translation for
a11y-file-item-statusappears correct and follows the template format.locales/file-uploader/ko.js (5)
113-113: LGTM!The translation for
finishedappears correct.
114-114: LGTM!The translation for
failedappears correct.
115-115: LGTM!The translation for
uploadingappears correct.
116-116: LGTM!The translation for
idleappears correct.
117-117: LGTM!The translation for
a11y-file-item-statusappears correct and follows the template format.locales/file-uploader/tr.js (5)
114-114: LGTM!The translation for
finishedappears correct.
115-115: LGTM!The translation for
failedappears correct.
116-116: LGTM!The translation for
uploadingappears correct.
117-117: LGTM!The translation for
idleappears correct.
118-118: LGTM!The translation for
a11y-file-item-statusappears correct and follows the template format.locales/file-uploader/kk.js (5)
114-114: LGTM!The localization string for 'finished' is correctly translated.
115-115: LGTM!The localization string for 'failed' is correctly translated.
116-116: LGTM!The localization string for 'uploading' is correctly translated.
117-117: LGTM!The localization string for 'idle' is correctly translated.
118-118: LGTM!The localization string for 'a11y-file-item-status' is correctly translated and formatted.
locales/file-uploader/it.js (5)
117-117: LGTM!The localization string for 'finished' is correctly translated.
118-118: LGTM!The localization string for 'failed' is correctly translated.
119-119: LGTM!The localization string for 'uploading' is correctly translated.
120-120: LGTM!The localization string for 'idle' is correctly translated.
121-121: LGTM!The localization string for 'a11y-file-item-status' is correctly translated and formatted.
blocks/FileItem/FileItem.js (4)
13-16: LGTM!The modification of symbol values to use string descriptions improves readability and clarity.
58-58: LGTM!The addition of
ariaLabelStatusFileproperty improves accessibility by providing an accessible label for the file status.
294-297: LGTM!The usage of
ariaLabelStatusFilein_handleStatemethod ensures that the accessible label is updated based on the file state.
433-433: LGTM!The addition of
aria-liveattribute improves accessibility by allowing updates to the file name status to be announced by assistive technologies.
Description
Checklist
Summary by CodeRabbit
New Features
Bug Fixes