From b5d5e2d5b050206ff66da4b0864912ac1f517ede Mon Sep 17 00:00:00 2001
From: Alaa Yahia <6881345+alaa-yahia@users.noreply.github.com>
Date: Wed, 29 May 2024 11:46:39 +0300
Subject: [PATCH] feat(FileListItem): accessibility improvements for
 FileListItem (#1474)

---
 .../src/file-list/file-list-item.js           | 179 ++++++++++--------
 1 file changed, 98 insertions(+), 81 deletions(-)

diff --git a/components/file-input/src/file-list/file-list-item.js b/components/file-input/src/file-list/file-list-item.js
index eae111a07d..71eaa160a4 100644
--- a/components/file-input/src/file-list/file-list-item.js
+++ b/components/file-input/src/file-list/file-list-item.js
@@ -14,91 +14,108 @@ const FileListItem = ({
     onCancel,
     cancelText,
     dataTest,
-}) => (
-    <p className={cx('selected-file', className)} data-test={dataTest}>
-        <span className="icon">
-            {loading ? (
-                <CircularLoader extrasmall />
-            ) : (
-                <IconAttachment16 color={colors.grey700} />
-            )}
-        </span>
+}) => {
+    const handleKeyDown = (event) => {
+        if (!onRemove) {
+            return
+        }
+        if (
+            event.key === 'Enter' ||
+            event.key === 'Backspace' ||
+            event.key === 'Delete'
+        ) {
+            onRemove({}, event)
+        }
+    }
 
-        <span className="text">
-            <span className="label">{label}</span>
+    return (
+        <p className={cx('selected-file', className)} data-test={dataTest}>
+            <span className="icon">
+                {loading ? (
+                    <CircularLoader extrasmall />
+                ) : (
+                    <IconAttachment16 color={colors.grey700} />
+                )}
+            </span>
 
-            {loading && onCancel && cancelText && (
-                <span
-                    className="action"
-                    onClick={(event) => onCancel({}, event)}
-                    data-test={`${dataTest}-cancel`}
-                >
-                    {cancelText}
-                </span>
-            )}
+            <span className="text">
+                <span className="label">{label}</span>
 
-            {!loading && (
-                <span
-                    className="action"
-                    onClick={(event) => onRemove({}, event)}
-                    data-test={`${dataTest}-remove`}
-                >
-                    {removeText}
-                </span>
-            )}
-        </span>
+                {loading && onCancel && cancelText && (
+                    <span
+                        className="action"
+                        onClick={(event) => onCancel({}, event)}
+                        data-test={`${dataTest}-cancel`}
+                    >
+                        {cancelText}
+                    </span>
+                )}
 
-        <style jsx>{`
-            p {
-                display: flex;
-                margin: 0;
-                padding-top: ${spacers.dp4};
-            }
-            span {
-                display: inline-block;
-            }
-            .icon {
-                margin-inline-end: 4px;
-                flex-grow: 0;
-                flex-shrink: 0;
-                display: flex;
-                padding-top: 1px;
-            }
-            .text {
-                flex-grow: 1;
-                flex-shrink: 1;
-            }
-            .label {
-                font-size: 14px;
-                color: ${colors.grey900};
-                word-break: break-all;
-            }
-            .label::after {
-                content: ' ';
-                display: inline-block;
-                width: 12px;
-            }
-            .action {
-                font-size: 12px;
-                line-height: 12px;
-                margin-top: 0;
-                text-decoration: underline;
-                cursor: pointer;
-                color: ${colors.grey700};
-            }
-            .action:hover {
-                color: ${colors.red700};
-            }
-            .action:active {
-                color: ${colors.red800};
-            }
-            .action:focus {
-                outline: 3px solid ${theme.focus};
-                outline-offset: 2px;
-            }
-        `}</style>
-    </p>
-)
+                {!loading && (
+                    <span
+                        className="action"
+                        onClick={(event) => onRemove({}, event)}
+                        data-test={`${dataTest}-remove`}
+                        tabIndex={0}
+                        onKeyDown={handleKeyDown}
+                    >
+                        {removeText}
+                    </span>
+                )}
+            </span>
+
+            <style jsx>{`
+                p {
+                    display: flex;
+                    margin: 0;
+                    padding-top: ${spacers.dp4};
+                }
+                span {
+                    display: inline-block;
+                }
+                .icon {
+                    margin-inline-end: 4px;
+                    flex-grow: 0;
+                    flex-shrink: 0;
+                    display: flex;
+                    padding-top: 1px;
+                }
+                .text {
+                    flex-grow: 1;
+                    flex-shrink: 1;
+                }
+                .label {
+                    font-size: 14px;
+                    color: ${colors.grey900};
+                    word-break: break-all;
+                }
+                .label::after {
+                    content: ' ';
+                    display: inline-block;
+                    width: 12px;
+                }
+                .action {
+                    font-size: 12px;
+                    line-height: 12px;
+                    margin-top: 0;
+                    text-decoration: underline;
+                    cursor: pointer;
+                    color: ${colors.grey700};
+                }
+                .action:hover {
+                    color: ${colors.red700};
+                }
+                .action:active {
+                    color: ${colors.red800};
+                }
+                .action:focus {
+                    outline: 3px solid ${theme.focus};
+                    outline-offset: 2px;
+                }
+            `}</style>
+        </p>
+    )
+}
 
 FileListItem.defaultProps = {
     dataTest: 'dhis2-uicore-filelistitem',