fix(UIShell): don't require aria-label in HeaderPanel (#13871)

* fix(UIShell): don't require aria-label in HeaderPanel * test(snapshot): update ui-shell snapshots --------- Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com>
carbon-design-system · Jun 8, 2023 · e7ff855 · e7ff855
1 parent 0d912bd
commit e7ff855
Show file tree

Hide file tree

Showing 3 changed files with 9 additions and 20 deletions.
diff --git a/packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap b/packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap
@@ -3982,8 +3982,9 @@ Map {
   "HeaderPanel" => Object {
     "$$typeof": Symbol(react.forward_ref),
     "propTypes": Object {
-      "aria-label": [Function],
-      "aria-labelledby": [Function],
+      "children": Object {
+        "type": "node",
+      },
       "className": Object {
         "type": "string",
       },

diff --git a/packages/react/src/components/UIShell/HeaderPanel.js b/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

diff --git a/packages/react/src/components/UIShell/UIShell.stories.js b/packages/react/src/components/UIShell/UIShell.stories.js
@@ -579,7 +579,7 @@ export const HeaderBaseWActionsAndRightPanel = () => (
         <SwitcherIcon size={20} />
       </HeaderGlobalAction>
     </HeaderGlobalBar>
-    <HeaderPanel aria-label="Header Panel" expanded />
+    <HeaderPanel expanded />
   </Header>
 );
 
@@ -608,7 +608,7 @@ export const HeaderBaseWActionsAndSwitcher = () => (
         <SwitcherIcon size={20} />
       </HeaderGlobalAction>
     </HeaderGlobalBar>
-    <HeaderPanel aria-label="Header Panel" expanded>
+    <HeaderPanel expanded>
       <Switcher aria-label="Switcher Container">
         <SwitcherItem isSelected aria-label="Link 1" href="#">
           Link 1