fix(FileUploader, CodeSnippet): backport a11y fixes to v10 (#14091)

* fix(FileUploader, CodeSnippet): backport a11y fixes * chore(snapshot): update snapshots --------- Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com>
carbon-design-system · Jul 6, 2023 · 576add8 · 576add8
1 parent 92d5c0a
commit 576add8
Show file tree

Hide file tree

Showing 14 changed files with 94 additions and 38 deletions.
diff --git a/packages/components/src/components/code-snippet/_code-snippet.scss b/packages/components/src/components/code-snippet/_code-snippet.scss
@@ -188,6 +188,12 @@
     order: 1;
     overflow-y: auto;
     transition: max-height $duration--moderate-01 motion(standard, productive);
+
+    &:focus {
+      @include focus-outline('outline');
+
+      outline-offset: 0;
+    }
   }
 
   // expanded snippet container

diff --git a/packages/components/src/components/file-uploader/_file-uploader.scss b/packages/components/src/components/file-uploader/_file-uploader.scss
@@ -272,7 +272,6 @@
   }
 
   .#{$prefix}--file__state-container .#{$prefix}--file-complete {
-    cursor: pointer;
     fill: $interactive-04;
 
     &:focus {
@@ -318,6 +317,9 @@
   }
 
   .#{$prefix}--file__drop-container {
+    @include button-reset;
+    @include type-style('body-short-01');
+
     display: flex;
     overflow: hidden;
     height: rem(96px);

diff --git a/packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap b/packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap
@@ -2756,7 +2756,6 @@ Map {
       "multiple": false,
       "onAddFiles": [Function],
       "pattern": ".[0-9a-z]+$",
-      "tabIndex": 0,
     },
     "propTypes": Object {
       "accept": Object {
@@ -2789,15 +2788,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 {
@@ -2872,6 +2870,9 @@ Map {
       "invalid": Object {
         "type": "bool",
       },
+      "name": Object {
+        "type": "string",
+      },
       "status": Object {
         "args": Array [
           Array [

diff --git a/packages/react/src/components/CodeSnippet/CodeSnippet.js b/packages/react/src/components/CodeSnippet/CodeSnippet.js
@@ -224,10 +224,14 @@ function CodeSnippet({
     <div {...rest} className={codeSnippetClasses}>
       <div
         ref={codeContainerRef}
-        role={type === 'single' ? 'textbox' : null}
-        tabIndex={type === 'single' && !disabled ? 0 : null}
+        role={type === 'single' || type === 'multi' ? 'textbox' : null}
+        tabIndex={
+          (type === 'single' || type === 'multi') && !disabled ? 0 : null
+        }
         className={`${prefix}--snippet-container`}
         aria-label={ariaLabel || copyLabel || 'code-snippet'}
+        aria-readonly={type === 'single' || type === 'multi' ? true : null}
+        aria-multiline={type === 'multi' ? true : null}
         onScroll={(type === 'single' && handleScroll) || null}
         {...containerStyle}>
         <pre

diff --git a/packages/react/src/components/FileUploader/FileUploader.js b/packages/react/src/components/FileUploader/FileUploader.js
@@ -237,6 +237,7 @@ export default class FileUploader extends React.Component {
                   <p className={`${prefix}--file-filename`}>{name}</p>
                   <span className={`${prefix}--file__state-container`}>
                     <Filename
+                      name={name}
                       iconDescription={iconDescription}
                       status={filenameStatus}
                       onKeyDown={(evt) => {

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,22 +23,23 @@ function FileUploaderDropContainer({
   multiple,
   name,
   onAddFiles,
+  onClick,
   pattern,
-  role,
-  tabIndex,
   ...rest
 }) {
   const prefix = usePrefix();
   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
@@ -72,6 +75,12 @@ function FileUploaderDropContainer({
     return onAddFiles(event, { addedFiles });
   }
 
+  const handleClick = () => {
+    if (!disabled) {
+      inputRef.current.click();
+    }
+  };
+
   return (
     <div
       className={`${prefix}--file`}
@@ -102,20 +111,21 @@ function FileUploaderDropContainer({
         setActive(false);
         handleChange(evt);
       }}>
-      {/* eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions */}
-      <label
-        className={labelClasses}
-        htmlFor={uid}
-        tabIndex={tabIndex || 0}
+      <button
+        type="button"
+        className={dropareaClasses}
         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"
@@ -179,6 +189,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
    */
@@ -187,16 +203,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,12 +40,14 @@ function FileUploaderItem({
       </p>
       <span className={`${prefix}--file__state-container`}>
         <Filename
+          name={name}
           iconDescription={iconDescription}
           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
@@ -15,7 +15,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':
@@ -27,7 +27,7 @@ function Filename({ iconDescription, status, invalid, ...rest }) {
         <>
           {invalid && <WarningFilled16 className={`${prefix}--file-invalid`} />}
           <button
-            aria-label={iconDescription}
+            aria-label={`${iconDescription} - ${name}`}
             className={`${prefix}--file-close`}
             type="button"
             {...rest}>
@@ -40,7 +40,8 @@ function Filename({ iconDescription, status, invalid, ...rest }) {
         <CheckmarkFilled16
           aria-label={iconDescription}
           className={`${prefix}--file-complete`}
-          {...rest}>
+          {...rest}
+          tabIndex={null}>
           {iconDescription && <title>{iconDescription}</title>}
         </CheckmarkFilled16>
       );
@@ -60,6 +61,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/code-snippet/_code-snippet.scss b/packages/styles/scss/components/code-snippet/_code-snippet.scss
@@ -200,6 +200,12 @@ $copy-btn-feedback: $background-inverse !default;
     order: 1;
     overflow-y: auto;
     transition: max-height $duration-moderate-01 motion(standard, productive);
+
+    &:focus {
+      @include focus-outline('outline');
+
+      outline-offset: 0;
+    }
   }
 
   // expanded snippet container

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 *;
@@ -271,7 +272,6 @@
   }
 
   .#{$prefix}--file__state-container .#{$prefix}--file-complete {
-    cursor: pointer;
     fill: $interactive;
 
     &:focus {
@@ -317,6 +317,8 @@
   }
 
   .#{$prefix}--file__drop-container {
+    @include button-reset.reset;
+
     display: flex;
     overflow: hidden;
     height: rem(96px);