fix(FileUploaderDropContainer): fix a11y violations, update tests (#1…

…3323) * fix(FileUploaderDropContainer): fix a11y violations, update tests * test(snapshot): update snapshots * fix(FileUploaderDropContainer): prevent enter key default action * fix(FileUploaderDropContainer): prevent enter key default action on file --------- Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com>
carbon-design-system · Mar 16, 2023 · 8a9c2e9 · 8a9c2e9
1 parent 591569b
commit 8a9c2e9
Show file tree

Hide file tree

Showing 10 changed files with 71 additions and 35 deletions.
diff --git a/packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap b/packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap
@@ -3168,7 +3168,6 @@ Map {
       "multiple": false,
       "onAddFiles": [Function],
       "pattern": ".[0-9a-z]+$",
-      "tabIndex": 0,
     },
     "propTypes": Object {
       "accept": Object {
@@ -3201,15 +3200,14 @@ Map {
       "onAddFiles": Object {
         "type": "func",
       },
-      "pattern": Object {
-        "type": "string",
+      "onClick": Object {
+        "type": "func",
       },
-      "role": Object {
+      "pattern": Object {
         "type": "string",
       },
-      "tabIndex": Object {
-        "type": "number",
-      },
+      "role": [Function],
+      "tabIndex": [Function],
     },
   },
   "FileUploaderItem" => Object {
@@ -3281,6 +3279,9 @@ Map {
       "invalid": Object {
         "type": "bool",
       },
+      "name": Object {
+        "type": "string",
+      },
       "status": Object {
         "args": Array [
           Array [

diff --git a/packages/react/src/components/FileUploader/FileUploader.js b/packages/react/src/components/FileUploader/FileUploader.js
@@ -243,8 +243,8 @@ export default class FileUploader extends React.Component {
                   </p>
                   <span className={`${prefix}--file__state-container`}>
                     <Filename
+                      name={name}
                       iconDescription={iconDescription}
-                      aria-describedby={name}
                       status={filenameStatus}
                       onKeyDown={(evt) => {
                         if (matches(evt, [keys.Enter, keys.Space])) {

diff --git a/packages/react/src/components/FileUploader/FileUploaderDropContainer.js b/packages/react/src/components/FileUploader/FileUploaderDropContainer.js
@@ -11,6 +11,8 @@ import classNames from 'classnames';
 import { keys, matches } from '../../internal/keyboard';
 import uniqueId from '../../tools/uniqueId';
 import { usePrefix } from '../../internal/usePrefix';
+import { composeEventHandlers } from '../../tools/events';
+import deprecate from '../../prop-types/deprecate';
 
 function FileUploaderDropContainer({
   accept,
@@ -21,9 +23,8 @@ function FileUploaderDropContainer({
   multiple,
   name,
   onAddFiles,
+  onClick,
   pattern,
-  role,
-  tabIndex,
   // eslint-disable-next-line react/prop-types
   innerRef,
   ...rest
@@ -32,13 +33,15 @@ function FileUploaderDropContainer({
   const inputRef = useRef(null);
   const { current: uid } = useRef(id || uniqueId());
   const [isActive, setActive] = useState(false);
-  const labelClasses = classNames(`${prefix}--file-browse-btn`, {
-    [`${prefix}--file-browse-btn--disabled`]: disabled,
-  });
-  const dropareaClasses = classNames(`${prefix}--file__drop-container`, {
-    [`${prefix}--file__drop-container--drag-over`]: isActive,
-    [className]: className,
-  });
+  const dropareaClasses = classNames(
+    `${prefix}--file__drop-container`,
+    `${prefix}--file-browse-btn`,
+    {
+      [`${prefix}--file__drop-container--drag-over`]: isActive,
+      [`${prefix}--file-browse-btn--disabled`]: disabled,
+      [className]: className,
+    }
+  );
 
   /**
    * Filters the array of added files based on file type restrictions
@@ -79,6 +82,12 @@ function FileUploaderDropContainer({
     return onAddFiles(event, { addedFiles });
   }
 
+  const handleClick = () => {
+    if (!disabled) {
+      inputRef.current.click();
+    }
+  };
+
   return (
     <div
       className={`${prefix}--file`}
@@ -109,21 +118,22 @@ function FileUploaderDropContainer({
         setActive(false);
         handleChange(evt);
       }}>
-      {/* eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions */}
-      <label
+      <button
+        type="button"
+        className={dropareaClasses}
         ref={innerRef}
-        className={labelClasses}
-        htmlFor={uid}
-        tabIndex={tabIndex || 0}
         onKeyDown={(evt) => {
           if (matches(evt, [keys.Enter, keys.Space])) {
+            evt.preventDefault();
             inputRef.current.click();
           }
         }}
+        onClick={composeEventHandlers([onClick, handleClick])}
         {...rest}>
-        <div className={dropareaClasses} role={role || 'button'}>
-          {labelText}
-        </div>
+        {labelText}
+      </button>
+      <label htmlFor={uid} className={`${prefix}--visually-hidden`}>
+        {labelText}
       </label>
       <input
         type="file"
@@ -187,6 +197,12 @@ FileUploaderDropContainer.propTypes = {
    */
   onAddFiles: PropTypes.func,
 
+  /**
+   * Provide an optional function to be called when the button element
+   * is clicked
+   */
+  onClick: PropTypes.func,
+
   /**
    * Provide a custom regex pattern for the acceptedTypes
    */
@@ -195,16 +211,23 @@ FileUploaderDropContainer.propTypes = {
   /**
    * Provide an accessibility role for the `<FileUploaderButton>`
    */
-  role: PropTypes.string,
+  role: deprecate(
+    PropTypes.number,
+    'The `role` prop for `FileUploaderButton` has ' +
+      'been deprecated since it now renders a button element by default, and has an implicit role of button.'
+  ),
 
   /**
    * Provide a custom tabIndex value for the `<FileUploaderButton>`
    */
-  tabIndex: PropTypes.number,
+  tabIndex: deprecate(
+    PropTypes.number,
+    'The `tabIndex` prop for `FileUploaderButton` has ' +
+      'been deprecated since it now renders a button element by default.'
+  ),
 };
 
 FileUploaderDropContainer.defaultProps = {
-  tabIndex: 0,
   labelText: 'Add file',
   multiple: false,
   onAddFiles: () => {},

diff --git a/packages/react/src/components/FileUploader/FileUploaderItem.js b/packages/react/src/components/FileUploader/FileUploaderItem.js
@@ -40,13 +40,14 @@ function FileUploaderItem({
       </p>
       <span className={`${prefix}--file__state-container`}>
         <Filename
+          name={name}
           iconDescription={iconDescription}
-          aria-describedby={name}
           status={status}
           invalid={invalid}
           onKeyDown={(evt) => {
             if (matches(evt, [keys.Enter, keys.Space])) {
               if (status === 'edit') {
+                evt.preventDefault();
                 onDelete(evt, { uuid: id });
               }
             }

diff --git a/packages/react/src/components/FileUploader/Filename.js b/packages/react/src/components/FileUploader/Filename.js
@@ -11,7 +11,7 @@ import React from 'react';
 import Loading from '../Loading';
 import { usePrefix } from '../../internal/usePrefix';
 
-function Filename({ iconDescription, status, invalid, ...rest }) {
+function Filename({ iconDescription, status, invalid, name, ...rest }) {
   const prefix = usePrefix();
   switch (status) {
     case 'uploading':
@@ -23,7 +23,7 @@ function Filename({ iconDescription, status, invalid, ...rest }) {
         <>
           {invalid && <WarningFilled className={`${prefix}--file-invalid`} />}
           <button
-            aria-label={iconDescription}
+            aria-label={`${iconDescription} - ${name}`}
             className={`${prefix}--file-close`}
             type="button"
             {...rest}>
@@ -57,6 +57,11 @@ Filename.propTypes = {
    */
   invalid: PropTypes.bool,
 
+  /**
+   * Name of the uploaded file
+   */
+  name: PropTypes.string,
+
   /**
    * Status of the file upload
    */

diff --git a/packages/react/src/components/FileUploader/__tests__/FileUploader-test.js b/packages/react/src/components/FileUploader/__tests__/FileUploader-test.js
@@ -77,6 +77,6 @@ describe('FileUploader', () => {
     );
 
     const complete = getByLabel(container, description);
-    expect(edit.parentNode).not.toEqual(complete.parentNode);
+    expect(edit).not.toEqual(complete);
   });
 });
diff --git a/packages/react/src/components/FileUploader/__tests__/FileUploaderDropContainer-test.js b/packages/react/src/components/FileUploader/__tests__/FileUploaderDropContainer-test.js
@@ -24,7 +24,7 @@ describe('FileUploaderDropContainer', () => {
     const { container } = render(
       <FileUploaderDropContainer className="test" />
     );
-    const dropArea = container.querySelector('[role="button"]');
+    const dropArea = container.querySelector('button');
     expect(dropArea.classList.contains('test')).toBe(true);
   });
 

diff --git a/packages/react/src/components/FileUploader/__tests__/FileUploaderItem-test.js b/packages/react/src/components/FileUploader/__tests__/FileUploaderItem-test.js
@@ -42,7 +42,7 @@ describe('FileUploaderItem', () => {
       />
     );
 
-    let removeFile = getByLabel(edit.container, description);
+    let removeFile = getByLabel(edit.container, 'test-description - edit');
     Simulate.click(removeFile);
     expect(onDelete).toHaveBeenCalledTimes(1);
 

diff --git a/packages/react/src/components/FileUploader/__tests__/Filename-test.js b/packages/react/src/components/FileUploader/__tests__/Filename-test.js
@@ -42,13 +42,16 @@ describe('Filename', () => {
     const onClick = jest.fn();
     const { container: edit } = render(
       <Filename
+        name="File 1"
         iconDescription="test description"
         status="edit"
         onClick={onClick}
       />
     );
 
-    Simulate.click(edit.querySelector(`[aria-label="test description"]`));
+    Simulate.click(
+      edit.querySelector(`[aria-label="test description - File 1"]`)
+    );
     expect(onClick).toHaveBeenCalledTimes(1);
 
     onClick.mockReset();

diff --git a/packages/styles/scss/components/file-uploader/_file-uploader.scss b/packages/styles/scss/components/file-uploader/_file-uploader.scss
@@ -11,6 +11,7 @@
 @use '../../theme' as *;
 @use '../../type' as *;
 
+@use '../../utilities/button-reset';
 @use '../../utilities/convert' as *;
 @use '../../utilities/focus-outline' as *;
 @use '../../utilities/high-contrast-mode' as *;
@@ -320,6 +321,8 @@
   }
 
   .#{$prefix}--file__drop-container {
+    @include button-reset.reset;
+
     display: flex;
     overflow: hidden;
     height: rem(96px);