From 668c1373a0f9f7cb9a4c1bfaf11fc8b83fbd29ee Mon Sep 17 00:00:00 2001 From: Airike Jaska <95303654+airikej@users.noreply.github.com> Date: Mon, 15 Dec 2025 10:04:01 +0200 Subject: [PATCH 1/4] fix(file-dropzone): wcag fixes #54 --- .../file-dropzone/file-dropzone.module.scss | 5 ++ .../form/file-dropzone/file-dropzone.tsx | 77 ++++++++++++------- .../providers/label-provider/labels-map.ts | 21 +++++ 3 files changed, 74 insertions(+), 29 deletions(-) diff --git a/src/tedi/components/form/file-dropzone/file-dropzone.module.scss b/src/tedi/components/form/file-dropzone/file-dropzone.module.scss index a581df3cd..1985ac690 100644 --- a/src/tedi/components/form/file-dropzone/file-dropzone.module.scss +++ b/src/tedi/components/form/file-dropzone/file-dropzone.module.scss @@ -65,8 +65,13 @@ .tedi-file-dropzone__file-list { width: 100%; + padding-left: 0; margin-top: var(--layout-grid-gutters-04); list-style: none; + + .tedi-file-dropzone__file-list-item { + padding-left: 0 !important; + } } .tedi-file-dropzone__file-name { diff --git a/src/tedi/components/form/file-dropzone/file-dropzone.tsx b/src/tedi/components/form/file-dropzone/file-dropzone.tsx index e0631cc19..78558f97a 100644 --- a/src/tedi/components/form/file-dropzone/file-dropzone.tsx +++ b/src/tedi/components/form/file-dropzone/file-dropzone.tsx @@ -7,8 +7,8 @@ import { useLabels } from '../../../providers/label-provider'; import { Icon } from '../../base/icon/icon'; import ClosingButton from '../../buttons/closing-button/closing-button'; import { Card, CardContent } from '../../cards/card'; +import { List } from '../../content/list'; import { Col, Row } from '../../layout/grid'; -import { VerticalSpacing } from '../../layout/vertical-spacing'; import FeedbackText, { FeedbackTextProps } from '../feedback-text/feedback-text'; import FormLabel, { FormLabelProps } from '../form-label/form-label'; import styles from './file-dropzone.module.scss'; @@ -42,10 +42,12 @@ export const FileDropzone = (props: FileDropzoneProps): JSX.Element => { const { innerFiles, uploadErrorHelper, onFileChange, onFileRemove } = useFileUpload(props); const { getRootProps, getInputProps, isDragActive } = useDropzone({ + disabled, accept: props.accept ? { 'application/*': [props.accept] } : undefined, multiple: props.multiple, maxSize: props.maxSize ? props.maxSize * 1024 ** 2 : undefined, onDrop: (acceptedFiles) => { + if (disabled) return; const event = { target: { files: acceptedFiles }, } as unknown as React.ChangeEvent; @@ -65,8 +67,15 @@ export const FileDropzone = (props: FileDropzoneProps): JSX.Element => { return ( <> -
- +
+
@@ -78,36 +87,46 @@ export const FileDropzone = (props: FileDropzoneProps): JSX.Element => { ) : null} {!!innerFiles.length && ( - + {innerFiles.map((file: FileUploadFile) => ( - - + - - - {file.name}{' '} - {file.isValid === false && } - - - onFileRemove(file)} /> - - - - + + + + {file.name}{' '} + {file.isValid === false && } + + + onFileRemove(file)} /> + + + + + ))} - + )} +
+ {innerFiles.length === 0 + ? getLabel('file-dropzone.no-file') + : getLabel('file-dropzone.files-selected', innerFiles.length)} +
); }; diff --git a/src/tedi/providers/label-provider/labels-map.ts b/src/tedi/providers/label-provider/labels-map.ts index d712d2202..dc862e3fb 100644 --- a/src/tedi/providers/label-provider/labels-map.ts +++ b/src/tedi/providers/label-provider/labels-map.ts @@ -226,6 +226,27 @@ export const labelsMap = validateDefaultLabels({ en: 'Drop files here, or click to browse', ru: 'Перетащите файлы сюда или нажмите, чтобы выбрать', }, + 'file-dropzone.no-file': { + description: 'No file selected label for FileUpload or FileDropzone', + components: ['FileDropzone', 'FileUpload'], + et: 'Ühtegi faili pole valitud', + en: 'No file has been chosen', + ru: 'Файлы не выбраны', + }, + 'file-dropzone.selected-files': { + description: 'Selected files label for FileUpload or FileDropzone', + components: ['FileDropzone', 'FileUpload'], + et: 'Valitud failid', + en: 'Uploaded files', + ru: 'Загруженные файлы', + }, + 'file-dropzone.files-selected': { + description: 'Label for selected file count', + components: ['FileDropzone', 'FileUpload'], + et: (files: number) => `${files} faili valitud`, + en: (files: number) => `${files} files selected`, + ru: (files: number) => `${files} выбранных файлов`, + }, 'modal.close': { description: 'Label for modals close button', components: ['Modal'], From d665bea82daf59005c992c78ee840ae2f74649f4 Mon Sep 17 00:00:00 2001 From: Airike Jaska <95303654+airikej@users.noreply.github.com> Date: Mon, 15 Dec 2025 11:59:53 +0200 Subject: [PATCH 2/4] fix(file-dropzone): fix list indent override #54 --- .../form/file-dropzone/file-dropzone.module.scss | 7 +++---- 1 file changed, 3 insertions(+), 4 deletions(-) diff --git a/src/tedi/components/form/file-dropzone/file-dropzone.module.scss b/src/tedi/components/form/file-dropzone/file-dropzone.module.scss index 1985ac690..38a8ec56c 100644 --- a/src/tedi/components/form/file-dropzone/file-dropzone.module.scss +++ b/src/tedi/components/form/file-dropzone/file-dropzone.module.scss @@ -67,11 +67,10 @@ width: 100%; padding-left: 0; margin-top: var(--layout-grid-gutters-04); - list-style: none; +} - .tedi-file-dropzone__file-list-item { - padding-left: 0 !important; - } +.tedi-file-dropzone__file-list .tedi-file-dropzone__file-list-item { + padding-left: 0; } .tedi-file-dropzone__file-name { From 02266a7302575fac541e8d7e439f7ea24addca18 Mon Sep 17 00:00:00 2001 From: Airike Jaska <95303654+airikej@users.noreply.github.com> Date: Mon, 15 Dec 2025 12:05:32 +0200 Subject: [PATCH 3/4] fix(file-upload): fix failing test #54 --- src/tedi/components/form/file-dropzone/file-dropzone.spec.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/tedi/components/form/file-dropzone/file-dropzone.spec.tsx b/src/tedi/components/form/file-dropzone/file-dropzone.spec.tsx index 57176cd4c..0d905e2f0 100644 --- a/src/tedi/components/form/file-dropzone/file-dropzone.spec.tsx +++ b/src/tedi/components/form/file-dropzone/file-dropzone.spec.tsx @@ -130,7 +130,7 @@ describe('FileDropzone', () => { }); render(); - const removeButton = screen.getByRole('button', { name: /clear/i }); + const removeButton = screen.getByRole('button', { name: /remove/i }); fireEvent.click(removeButton); expect(onFileRemove).toHaveBeenCalledWith(file); From 10c1b9dd24d9e7a37aa99100c02c91b9a25a5215 Mon Sep 17 00:00:00 2001 From: Airike Jaska <95303654+airikej@users.noreply.github.com> Date: Mon, 12 Jan 2026 09:09:44 +0200 Subject: [PATCH 4/4] fix(file-dropzone): css & card padding improvements, selected files singular/plural handling #54 --- .../file-dropzone/file-dropzone.module.scss | 6 +++--- .../form/file-dropzone/file-dropzone.tsx | 9 +------- .../providers/label-provider/labels-map.ts | 21 ++++++++++++++++--- 3 files changed, 22 insertions(+), 14 deletions(-) diff --git a/src/tedi/components/form/file-dropzone/file-dropzone.module.scss b/src/tedi/components/form/file-dropzone/file-dropzone.module.scss index 38a8ec56c..becd48cf8 100644 --- a/src/tedi/components/form/file-dropzone/file-dropzone.module.scss +++ b/src/tedi/components/form/file-dropzone/file-dropzone.module.scss @@ -67,10 +67,10 @@ width: 100%; padding-left: 0; margin-top: var(--layout-grid-gutters-04); -} -.tedi-file-dropzone__file-list .tedi-file-dropzone__file-list-item { - padding-left: 0; + .tedi-file-dropzone__file-list-item { + padding-left: 0; + } } .tedi-file-dropzone__file-name { diff --git a/src/tedi/components/form/file-dropzone/file-dropzone.tsx b/src/tedi/components/form/file-dropzone/file-dropzone.tsx index 78558f97a..318c2cecd 100644 --- a/src/tedi/components/form/file-dropzone/file-dropzone.tsx +++ b/src/tedi/components/form/file-dropzone/file-dropzone.tsx @@ -99,14 +99,7 @@ export const FileDropzone = (props: FileDropzoneProps): JSX.Element => { borderless className={styles['tedi-file-dropzone__file-item']} > - + {file.name}{' '} diff --git a/src/tedi/providers/label-provider/labels-map.ts b/src/tedi/providers/label-provider/labels-map.ts index dc862e3fb..0c64d7ba6 100644 --- a/src/tedi/providers/label-provider/labels-map.ts +++ b/src/tedi/providers/label-provider/labels-map.ts @@ -243,9 +243,24 @@ export const labelsMap = validateDefaultLabels({ 'file-dropzone.files-selected': { description: 'Label for selected file count', components: ['FileDropzone', 'FileUpload'], - et: (files: number) => `${files} faili valitud`, - en: (files: number) => `${files} files selected`, - ru: (files: number) => `${files} выбранных файлов`, + et: (files: number) => (files === 1 ? `${files} fail valitud` : `${files} faili valitud`), + en: (files: number) => (files === 1 ? `${files} file selected` : `${files} files selected`), + ru: (files: number) => { + const lastDigit = files % 10; + const lastTwoDigits = files % 100; + const isSingular = lastDigit === 1 && lastTwoDigits !== 11; + const isFew = lastDigit >= 2 && lastDigit <= 4 && (lastTwoDigits < 12 || lastTwoDigits > 14); + + if (isSingular) { + return `${files} выбранный файл`; + } + + if (isFew) { + return `${files} выбранных файла`; + } + + return `${files} выбранных файлов`; + }, }, 'modal.close': { description: 'Label for modals close button',