fix(v10): backport a11y fixes for UIShell, FileUploaderButton

packages/react/src/components/FileUploader/FileUploader.js

@@ -232,7 +232,7 @@ export default class FileUploader extends React.Component {
                 <span
                   key={index}
                   className={selectedFileClasses}
-                  ref={(node) => (this.nodes[index] = node)} // eslint-disable-line
+                  ref={(node) => (this.nodes[index] = node)}
                   {...other}>
                   <p className={`${prefix}--file-filename`}>{name}</p>
                   <span className={`${prefix}--file__state-container`}>

packages/react/src/components/FileUploader/FileUploaderButton.js

@@ -26,7 +26,6 @@ function FileUploaderButton({
   labelText: ownerLabelText = 'Add file',
   multiple = false,
   onChange = noop,
-  role = 'button',
   name,
   size = 'md',
   tabIndex = 0,
@@ -53,10 +52,16 @@ function FileUploaderButton({
 
   function onClick(event) {
     event.target.value = null;
+    if (inputNode.current) {
+      inputNode.current.value = '';
+      inputNode.current.click();
+    }
   }
 
   function onKeyDown(event) {
-    if (matches(event, [keys.Enter, keys.Space])) {
+    event.preventDefault();
+    if (matches(event, [keys.Enter, keys.Space]) && inputNode.current) {
+      inputNode.current.value = '';
       inputNode.current.click();
     }
   }
@@ -76,29 +81,30 @@ function FileUploaderButton({
 
   return (
     <>
-      {/* eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions */}
-      <label
-        tabIndex={disabled ? -1 : tabIndex || 0}
+      <button
+        type="button"
+        disabled={disabled}
         className={classes}
+        onClick={onClick}
         onKeyDown={onKeyDown}
-        htmlFor={inputId}
+        tabIndex={tabIndex ? tabIndex : undefined}
         {...other}>
-        <span role={role} aria-disabled={disabled}>
-          {labelText}
-        </span>
+        {labelText}
+      </button>
+      <label className={`${prefix}--visually-hidden`} htmlFor={inputId}>
+        <span>{labelText}</span>
       </label>
       <input
         className={`${prefix}--visually-hidden`}
         ref={inputNode}
         id={inputId}
         disabled={disabled}
         type="file"
-        tabIndex="-1"
+        tabIndex={-1}
         multiple={multiple}
         accept={accept}
         name={name}
         onChange={handleOnChange}
-        onClick={onClick}
       />
     </>
   );

packages/react/src/components/UIShell/HeaderPanel.js

@@ -8,43 +8,31 @@
 import React from 'react';
 import cx from 'classnames';
 import PropTypes from 'prop-types';
-import { AriaLabelPropType } from '../../prop-types/AriaPropTypes';
 import { usePrefix } from '../../internal/usePrefix';
 
 const HeaderPanel = React.forwardRef(function HeaderPanel(
-  {
-    'aria-label': ariaLabel,
-    'aria-labelledby': ariaLabelledBy,
-    children,
-    className: customClassName,
-    expanded,
-    ...other
-  },
+  { children, className: customClassName, expanded, ...other },
   ref
 ) {
   const prefix = usePrefix();
-  const accessibilityLabel = {
-    'aria-label': ariaLabel,
-    'aria-labelledby': ariaLabelledBy,
-  };
 
   const className = cx(`${prefix}--header-panel`, {
     [`${prefix}--header-panel--expanded`]: expanded,
     [customClassName]: !!customClassName,
   });
 
   return (
-    <div {...other} className={className} {...accessibilityLabel} ref={ref}>
+    <div {...other} className={className} ref={ref}>
       {children}
     </div>
   );
 });
 
 HeaderPanel.propTypes = {
   /**
-   * Required props for accessibility label on the underlying menu
+   * The content that will render inside of the `HeaderPanel`
    */
-  ...AriaLabelPropType,
+  children: PropTypes.node,
 
   /**
    * Optionally provide a custom class to apply to the underlying `<li>` node

packages/react/src/components/UIShell/UIShell-story.js

@@ -560,7 +560,7 @@ export const HeaderBaseWActionsAndRightPanel = withReadme(readme, () => {
           <Notification20 />
         </HeaderGlobalAction>
       </HeaderGlobalBar>
-      <HeaderPanel aria-label="Header Panel" expanded={expanded} />
+      <HeaderPanel expanded={expanded} />
     </Header>
   );
 });
@@ -590,7 +590,7 @@ export const HeaderBaseWActionsAndSwitcher = withReadme(readme, () => (
         <AppSwitcher20 />
       </HeaderGlobalAction>
     </HeaderGlobalBar>
-    <HeaderPanel aria-label="Header Panel" expanded>
+    <HeaderPanel expanded>
       <Switcher aria-label="Switcher Container">
         <SwitcherItem isSelected aria-label="Link 1" href="#">
           Link 1

packages/react/src/components/UIShell/next/UIShell.stories.js

@@ -547,7 +547,7 @@ export const HeaderBaseWActionsAndRightPanel = () => (
         <AppSwitcher20 />
       </HeaderGlobalAction>
     </HeaderGlobalBar>
-    <HeaderPanel aria-label="Header Panel" expanded />
+    <HeaderPanel expanded />
   </Header>
 );
 
@@ -576,7 +576,7 @@ export const HeaderBaseWActionsAndSwitcher = () => (
         <AppSwitcher20 />
       </HeaderGlobalAction>
     </HeaderGlobalBar>
-    <HeaderPanel aria-label="Header Panel" expanded>
+    <HeaderPanel expanded>
       <Switcher aria-label="Switcher Container">
         <SwitcherItem isSelected aria-label="Link 1" href="#">
           Link 1