fix(ui-shell): a11y updates, refactor right panel (#3209)

carbon-design-system · Jun 28, 2019 · 1dd02d9 · 1dd02d9
1 parent aea7c65
commit 1dd02d9
Show file tree

Hide file tree

Showing 7 changed files with 53 additions and 112 deletions.
diff --git a/packages/react/src/__tests__/index-test.js b/packages/react/src/__tests__/index-test.js
@@ -128,7 +128,6 @@ describe('Carbon Components React', () => {
         "Switcher",
         "SwitcherDivider",
         "SwitcherItem",
-        "SwitcherItemLink",
         "Tab",
         "TabContent",
         "Table",

diff --git a/packages/react/src/components/UIShell/README.md b/packages/react/src/components/UIShell/README.md
@@ -23,6 +23,5 @@
       - `SideNavMenuItem`: renders a link in a side nav menu
   - `RightPanel`: used for render the container for header actions on the right
     - `Switcher`: used to render a list of product links inside the right panel
-      - `SwitcherItem`: used to render list item
-        - `SwitcherItemLink`: used to render a link inside the list item
+      - `SwitcherItem`: used to render list item, often a link
       - `SwitcherDivider`: used to render a divider for list items
diff --git a/packages/react/src/components/UIShell/Switcher.js b/packages/react/src/components/UIShell/Switcher.js
@@ -31,7 +31,7 @@ const Switcher = React.forwardRef(function Switcher(props, ref) {
   });
 
   return (
-    <ul ref={ref} className={className} {...accessibilityLabel}>
+    <ul ref={ref} className={className} role="menu" {...accessibilityLabel}>
       {children}
     </ul>
   );
@@ -44,14 +44,14 @@ Switcher.propTypes = {
   ...AriaLabelPropType,
 
   /**
-   * Optionally provide a custom class to apply to the underlying <li> node
+   * Optionally provide a custom class to apply to the underlying <ul> node
    */
   className: PropTypes.string,
 
   /**
-   * Specify the text content for the link
+   * expects to receive <SwitcherItem />
    */
-  children: PropTypes.string.isRequired,
+  children: PropTypes.node.isRequired,
 };
 
 export default Switcher;
diff --git a/packages/react/src/components/UIShell/SwitcherItem.js b/packages/react/src/components/UIShell/SwitcherItem.js
@@ -10,26 +10,50 @@ import { settings } from 'carbon-components';
 import cx from 'classnames';
 import PropTypes from 'prop-types';
 import { AriaLabelPropType } from '../../prop-types/AriaPropTypes';
+import Link from './Link';
 
 const { prefix } = settings;
 
 const SwitcherItem = React.forwardRef(function SwitcherItem(props, ref) {
-  const { className: customClassName, children } = props;
+  const {
+    'aria-label': ariaLabel,
+    'aria-labelledby': ariaLabelledBy,
+    className: customClassName,
+    children,
+    isSelected,
+    ...rest
+  } = props;
 
   const className = cx(`${prefix}--switcher__item`, {
     [customClassName]: !!customClassName,
   });
 
+  const accessibilityLabel = {
+    'aria-label': ariaLabel,
+    'aria-labelledby': ariaLabelledBy,
+  };
+
+  const linkClassName = cx(`${prefix}--switcher__item-link`, {
+    [`${prefix}--switcher__item-link--selected`]: isSelected,
+  });
+
   return (
-    <li ref={ref} className={className}>
-      {children}
+    <li className={className} role="menuitem">
+      <Link
+        {...rest}
+        ref={ref}
+        className={linkClassName}
+        tabIndex={0}
+        {...accessibilityLabel}>
+        {children}
+      </Link>
     </li>
   );
 });
 
 SwitcherItem.propTypes = {
   /**
-   * Required props for accessibility label on the underlying menu
+   * Required props for accessibility label on the underlying menuitem
    */
   ...AriaLabelPropType,
 
@@ -41,7 +65,7 @@ SwitcherItem.propTypes = {
   /**
    * Specify the text content for the link
    */
-  children: PropTypes.string,
+  children: PropTypes.node.isRequired,
 };
 
 export default SwitcherItem;
diff --git a/packages/react/src/components/UIShell/SwitcherItemLink.js b/packages/react/src/components/UIShell/SwitcherItemLink.js
diff --git a/packages/react/src/components/UIShell/UIShell-story.js b/packages/react/src/components/UIShell/UIShell-story.js
@@ -37,7 +37,6 @@ import {
   SideNavMenuItem,
   Switcher,
   SwitcherItem,
-  SwitcherItemLink,
   SwitcherDivider,
 } from '../UIShell';
 
@@ -121,7 +120,7 @@ storiesOf('UI Shell', module)
   .add(
     'Header',
     withReadme(readme, () => (
-      <Header>
+      <Header aria-label="Header">
         <HeaderMenuButton
           aria-label="Open menu"
           onClick={action('Menu clicked')}
@@ -133,7 +132,7 @@ storiesOf('UI Shell', module)
           <HeaderMenuItem href="#">Link 1</HeaderMenuItem>
           <HeaderMenuItem href="#">Link 2</HeaderMenuItem>
           <HeaderMenuItem href="#">Link 3</HeaderMenuItem>
-          <HeaderMenu aria-label="Link 4">
+          <HeaderMenu aria-label="Link 4" menuLinkName="Link 4">
             <HeaderMenuItem href="#">Sub-link 1</HeaderMenuItem>
             <HeaderMenuItem href="#">Sub-link 2</HeaderMenuItem>
             <HeaderMenuItem href="#">Sub-link 3</HeaderMenuItem>
@@ -260,7 +259,7 @@ storiesOf('UI Shell', module)
             <AppSwitcher20 />
           </HeaderGlobalAction>
         </HeaderGlobalBar>
-        <HeaderPanel expanded />
+        <HeaderPanel aria-label="Header Panel" expanded />
       </Header>
     ))
   )
@@ -289,39 +288,27 @@ storiesOf('UI Shell', module)
             <AppSwitcher20 />
           </HeaderGlobalAction>
         </HeaderGlobalBar>
-        <HeaderPanel expanded>
-          <Switcher>
-            <SwitcherItem>
-              <SwitcherItemLink isSelected href="javascript:void(0)">
-                Link
-              </SwitcherItemLink>
+        <HeaderPanel aria-label="Header Panel" expanded>
+          <Switcher role="menu" aria-label="Switcher Container">
+            <SwitcherItem isSelected aria-label="Link 1" href="#">
+              Link 1
             </SwitcherItem>
             <SwitcherDivider />
-            <SwitcherItem>
-              <SwitcherItemLink href="javascript:void(0)">
-                Link
-              </SwitcherItemLink>
+            <SwitcherItem href="#" aria-label="Link 2">
+              Link 2
             </SwitcherItem>
-            <SwitcherItem>
-              <SwitcherItemLink href="javascript:void(0)">
-                Link
-              </SwitcherItemLink>
+            <SwitcherItem href="#" aria-label="Link 3">
+              Link 3
             </SwitcherItem>
-            <SwitcherItem>
-              <SwitcherItemLink href="javascript:void(0)">
-                Link
-              </SwitcherItemLink>
+            <SwitcherItem href="#" aria-label="Link 4">
+              Link 4
             </SwitcherItem>
-            <SwitcherItem>
-              <SwitcherItemLink href="javascript:void(0)">
-                Link
-              </SwitcherItemLink>
+            <SwitcherItem href="#" aria-label="Link 5">
+              Link 5
             </SwitcherItem>
             <SwitcherDivider />
-            <SwitcherItem>
-              <SwitcherItemLink href="javascript:void(0)">
-                Link
-              </SwitcherItemLink>
+            <SwitcherItem href="#" aria-label="Link 6">
+              Link 6
             </SwitcherItem>
           </Switcher>
         </HeaderPanel>
@@ -339,7 +326,7 @@ storiesOf('UI Shell', module)
           <HeaderMenuItem href="#">Link 1</HeaderMenuItem>
           <HeaderMenuItem href="#">Link 2</HeaderMenuItem>
           <HeaderMenuItem href="#">Link 3</HeaderMenuItem>
-          <HeaderMenu aria-label="Link 4">
+          <HeaderMenu aria-label="Link 4" menuLinkName="Link 4">
             <HeaderMenuItem href="#">Sub-link 1</HeaderMenuItem>
             <HeaderMenuItem href="#">Sub-link 2</HeaderMenuItem>
             <HeaderMenuItem href="#">Sub-link 3</HeaderMenuItem>
@@ -479,7 +466,7 @@ storiesOf('UI Shell', module)
                 <HeaderMenuItem href="#">Link 1</HeaderMenuItem>
                 <HeaderMenuItem href="#">Link 2</HeaderMenuItem>
                 <HeaderMenuItem href="#">Link 3</HeaderMenuItem>
-                <HeaderMenu aria-label="Link 4">
+                <HeaderMenu aria-label="Link 4" menuLinkName="Link 4">
                   <HeaderMenuItem href="#">Sub-link 1</HeaderMenuItem>
                   <HeaderMenuItem href="#">Sub-link 2</HeaderMenuItem>
                   <HeaderMenuItem href="#">Sub-link 3</HeaderMenuItem>

diff --git a/packages/react/src/components/UIShell/index.js b/packages/react/src/components/UIShell/index.js
@@ -20,7 +20,6 @@ export HeaderPanel from './HeaderPanel';
 
 export Switcher from './Switcher';
 export SwitcherItem from './SwitcherItem';
-export SwitcherItemLink from './SwitcherItemLink';
 export SwitcherDivider from './SwitcherDivider';
 
 export SkipToContent from './SkipToContent';