From 6366ff00b58831b1411873fa8c47e3524be75487 Mon Sep 17 00:00:00 2001
From: TJ Egan <tw15egan@gmail.com>
Date: Mon, 26 Jun 2023 12:52:56 -0400
Subject: [PATCH 1/2] fix(FileUploader, CodeSnippet): backport a11y fixes

---
 .../code-snippet/_code-snippet.scss           |  6 ++
 .../file-uploader/_file-uploader.scss         |  4 +-
 .../src/components/CodeSnippet/CodeSnippet.js |  8 ++-
 .../components/FileUploader/FileUploader.js   |  1 +
 .../FileUploader/FileUploaderDropContainer.js | 63 +++++++++++++------
 .../FileUploader/FileUploaderItem.js          |  2 +
 .../src/components/FileUploader/Filename.js   | 12 +++-
 .../__tests__/FileUploader-test.js            |  2 +-
 .../FileUploaderDropContainer-test.js         |  2 +-
 .../__tests__/FileUploaderItem-test.js        |  2 +-
 .../FileUploader/__tests__/Filename-test.js   |  5 +-
 .../code-snippet/_code-snippet.scss           |  6 ++
 .../file-uploader/_file-uploader.scss         |  4 +-
 13 files changed, 86 insertions(+), 31 deletions(-)

diff --git a/packages/components/src/components/code-snippet/_code-snippet.scss b/packages/components/src/components/code-snippet/_code-snippet.scss
index 61ab65af2b86..0a8aad352479 100644
--- 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
index bb4b63e24c7e..e7109e8eb95d 100644
--- 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/src/components/CodeSnippet/CodeSnippet.js b/packages/react/src/components/CodeSnippet/CodeSnippet.js
index 31b29f9023b8..f5bc7562aed7 100644
--- 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
index 941ac2c4d929..61764a557241 100644
--- 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
index 442e660c34a4..ed1527722f1b 100644
--- 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
index a0a61c76c11c..4ed1cb3e5de1 100644
--- 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
index 884c04fe9727..ce43b079802d 100644
--- 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
index e6acd3fc319f..c493ca6fe14e 100644
--- 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
index 2639845c1900..bb33d680b1f7 100644
--- 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
index 7f0d55a9bf08..d1bd6961f91f 100644
--- 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
index b007a8d222a1..edb740ae3e9d 100644
--- 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
index 521e8ff33016..5063a14cdedc 100644
--- 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
index d9b8ac4a4e84..c7ea4875a45c 100644
--- 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);

From cb35f8eec5c79cfc3923741468018921864cab41 Mon Sep 17 00:00:00 2001
From: TJ Egan <tw15egan@gmail.com>
Date: Mon, 26 Jun 2023 13:27:38 -0400
Subject: [PATCH 2/2] chore(snapshot): update snapshots

---
 .../__snapshots__/PublicAPI-test.js.snap          | 15 ++++++++-------
 1 file changed, 8 insertions(+), 7 deletions(-)

diff --git a/packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap b/packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap
index 65f5ad6452ff..c1b1e660483a 100644
--- 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 [