fix: fixed a11y issues (#16564)

carbon-design-system · Jun 13, 2024 · 1d72445 · 1d72445
1 parent c35d1c7
commit 1d72445
Showing 1 changed file with 12 additions and 4 deletions.
diff --git a/packages/react/src/components/FileUploader/FileUploaderItem.tsx b/packages/react/src/components/FileUploader/FileUploaderItem.tsx
@@ -98,6 +98,10 @@ function FileUploaderItem({
     ? `${prefix}--file-filename-container-wrap-invalid`
     : `${prefix}--file-filename-container-wrap`;
 
+  const filterSpaceName = (name: string | undefined) => {
+    return name?.replace(/\s+/g, '');
+  };
+
   const isEllipsisActive = (element: any) => {
     setIsEllipsisApplied(element.offsetWidth < element.scrollWidth);
     return element.offsetWidth < element.scrollWidth;
@@ -121,7 +125,7 @@ function FileUploaderItem({
                 as="p"
                 title={name}
                 className={`${prefix}--file-filename-button`}
-                id={name}>
+                id={filterSpaceName(name)}>
                 {name}
               </Text>
             </button>
@@ -132,7 +136,7 @@ function FileUploaderItem({
           as="p"
           title={name}
           className={`${prefix}--file-filename`}
-          id={name}>
+          id={filterSpaceName(name)}>
           {name}
         </Text>
       )}
@@ -144,7 +148,11 @@ function FileUploaderItem({
             iconDescription={iconDescription}
             status={status}
             invalid={invalid}
-            aria-describedby={`${name}-id-error`}
+            aria-describedby={
+              invalid && errorSubject
+                ? `${filterSpaceName(name)}-id-error`
+                : undefined
+            }
             onKeyDown={(evt) => {
               if (matches(evt as unknown as Event, [keys.Enter, keys.Space])) {
                 if (status === 'edit') {
@@ -165,7 +173,7 @@ function FileUploaderItem({
         <div
           className={`${prefix}--form-requirement`}
           role="alert"
-          id={`${name}-id-error`}>
+          id={`${filterSpaceName(name)}-id-error`}>
           <Text as="div" className={`${prefix}--form-requirement__title`}>
             {errorSubject}
           </Text>