fix(HeaderGlobalAction): provide visual text for link via title attri…

…bute (#7736) * fix(uishell): use aria-label text as title in header global action * chore: update headerglobalaction snapshot * fix(uishell): use <Button> for header global actions * test(headerglobalaction): update snap Co-authored-by: Alessandra Davila <[email protected]> Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com>
carbon-design-system · Mar 2, 2021 · b9adf1d · b9adf1d
1 parent 4cd729f
commit b9adf1d
Show file tree

Hide file tree

Showing 5 changed files with 84 additions and 28 deletions.
diff --git a/packages/components/src/components/ui-shell/_header.scss b/packages/components/src/components/ui-shell/_header.scss
@@ -77,6 +77,10 @@
     background-color: $shell-header-bg-03;
   }
 
+  .#{$prefix}--header__action.#{$prefix}--btn--icon-only.#{$prefix}--tooltip__trigger {
+    justify-content: center;
+  }
+
   .#{$prefix}--header__action > svg {
     fill: $shell-header-icon-02;
   }

diff --git a/packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap b/packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap
@@ -6784,6 +6784,16 @@ Map {
       "onClick": Object {
         "type": "func",
       },
+      "tooltipAlignment": Object {
+        "args": Array [
+          Array [
+            "start",
+            "center",
+            "end",
+          ],
+        ],
+        "type": "oneOf",
+      },
     },
     "render": [Function],
   },

diff --git a/packages/react/src/components/UIShell/HeaderGlobalAction.js b/packages/react/src/components/UIShell/HeaderGlobalAction.js
@@ -10,6 +10,7 @@ import cx from 'classnames';
 import React from 'react';
 import PropTypes from 'prop-types';
 import { AriaLabelPropType } from '../../prop-types/AriaPropTypes';
+import Button from '../Button';
 
 const { prefix } = settings;
 
@@ -29,6 +30,7 @@ const HeaderGlobalAction = React.forwardRef(function HeaderGlobalAction(
     className: customClassName,
     onClick,
     isActive,
+    tooltipAlignment,
     ...rest
   },
   ref
@@ -43,15 +45,19 @@ const HeaderGlobalAction = React.forwardRef(function HeaderGlobalAction(
     'aria-labelledby': ariaLabelledBy,
   };
   return (
-    <button
+    <Button
       {...rest}
       {...accessibilityLabel}
       className={className}
       onClick={onClick}
       type="button"
+      hasIconOnly
+      iconDescription={ariaLabel}
+      tooltipPosition="bottom"
+      tooltipAlignment={tooltipAlignment}
       ref={ref}>
       {children}
-    </button>
+    </Button>
   );
 });
 
@@ -82,6 +88,12 @@ HeaderGlobalAction.propTypes = {
    * button fires it's onclick event
    */
   onClick: PropTypes.func,
+
+  /**
+   * Specify the alignment of the tooltip to the icon-only button.
+   * Can be one of: start, center, or end.
+   */
+  tooltipAlignment: PropTypes.oneOf(['start', 'center', 'end']),
 };
 
 HeaderGlobalAction.displayName = 'HeaderGlobalAction';

diff --git a/packages/react/src/components/UIShell/UIShell-story.js b/packages/react/src/components/UIShell/UIShell-story.js
@@ -254,7 +254,8 @@ export const HeaderBaseWActions = withReadme(readme, () => (
       </HeaderGlobalAction>
       <HeaderGlobalAction
         aria-label="App Switcher"
-        onClick={action('app-switcher click')}>
+        onClick={action('app-switcher click')}
+        tooltipAlignment="end">
         <AppSwitcher20 />
       </HeaderGlobalAction>
     </HeaderGlobalBar>
@@ -283,7 +284,8 @@ export const HeaderBaseWSkipToContent = withReadme(readme, () => (
         </HeaderGlobalAction>
         <HeaderGlobalAction
           aria-label="App Switcher"
-          onClick={action('app-switcher click')}>
+          onClick={action('app-switcher click')}
+          tooltipAlignment="end">
           <AppSwitcher20 />
         </HeaderGlobalAction>
       </HeaderGlobalBar>
@@ -330,7 +332,8 @@ export const HeaderBaseWNavigationAndActions = withReadme(readme, () => (
           </HeaderGlobalAction>
           <HeaderGlobalAction
             aria-label="App Switcher"
-            onClick={action('app-switcher click')}>
+            onClick={action('app-switcher click')}
+            tooltipAlignment="end">
             <AppSwitcher20 />
           </HeaderGlobalAction>
         </HeaderGlobalBar>
@@ -396,7 +399,8 @@ export const HeaderBaseWNavigationActionsAndSideNav = withReadme(readme, () => (
             </HeaderGlobalAction>
             <HeaderGlobalAction
               aria-label="App Switcher"
-              onClick={action('app-switcher click')}>
+              onClick={action('app-switcher click')}
+              tooltipAlignment="end">
               <AppSwitcher20 />
             </HeaderGlobalAction>
           </HeaderGlobalBar>
@@ -552,7 +556,8 @@ export const HeaderBaseWActionsAndRightPanel = withReadme(readme, () => (
       </HeaderGlobalAction>
       <HeaderGlobalAction
         aria-label="App Switcher"
-        onClick={action('app-switcher click')}>
+        onClick={action('app-switcher click')}
+        tooltipAlignment="end">
         <AppSwitcher20 />
       </HeaderGlobalAction>
     </HeaderGlobalBar>
@@ -580,7 +585,8 @@ export const HeaderBaseWActionsAndSwitcher = withReadme(readme, () => (
       <HeaderGlobalAction
         aria-label="App Switcher"
         isActive
-        onClick={action('app-switcher click')}>
+        onClick={action('app-switcher click')}
+        tooltipAlignment="end">
         <AppSwitcher20 />
       </HeaderGlobalAction>
     </HeaderGlobalBar>
@@ -828,7 +834,8 @@ export const SideNavRailWHeader = withReadme(readme, () => (
             </HeaderGlobalAction>
             <HeaderGlobalAction
               aria-label="App Switcher"
-              onClick={action('app-switcher click')}>
+              onClick={action('app-switcher click')}
+              tooltipAlignment="end">
               <AppSwitcher20 />
             </HeaderGlobalAction>
           </HeaderGlobalBar>

diff --git a/...ages/react/src/components/UIShell/__tests__/__snapshots__/HeaderGlobalAction-test.js.snap b/...ages/react/src/components/UIShell/__tests__/__snapshots__/HeaderGlobalAction-test.js.snap
@@ -7,37 +7,60 @@ exports[`HeaderGlobalAction should render 1`] = `
   isActive={false}
   onClick={[MockFunction]}
 >
-  <button
+  <Button
     aria-label="Accessibility label"
     className="custom-class bx--header__action"
+    disabled={false}
+    hasIconOnly={true}
+    iconDescription="Accessibility label"
+    kind="primary"
     onClick={[MockFunction]}
+    size="default"
+    tabIndex={0}
+    tooltipAlignment="center"
+    tooltipPosition="bottom"
     type="button"
   >
-    <ForwardRef(Fade32)>
-      <Icon
-        fill="currentColor"
-        height={32}
-        preserveAspectRatio="xMidYMid meet"
-        viewBox="0 0 32 32"
-        width={32}
-        xmlns="http://www.w3.org/2000/svg"
+    <button
+      aria-label="Accessibility label"
+      aria-pressed={null}
+      className="custom-class bx--header__action bx--btn bx--btn--primary bx--btn--icon-only bx--tooltip__trigger bx--tooltip--a11y bx--tooltip--bottom bx--tooltip--align-center"
+      disabled={false}
+      onClick={[MockFunction]}
+      tabIndex={0}
+      type="button"
+    >
+      <span
+        className="bx--assistive-text"
       >
-        <svg
-          aria-hidden={true}
+        Accessibility label
+      </span>
+      <ForwardRef(Fade32)>
+        <Icon
           fill="currentColor"
-          focusable="false"
           height={32}
           preserveAspectRatio="xMidYMid meet"
           viewBox="0 0 32 32"
           width={32}
           xmlns="http://www.w3.org/2000/svg"
         >
-          <path
-            d="M8.24 25.14L7 26.67a13.79 13.79 0 004.18 2.44l.69-1.87A12 12 0 018.24 25.14zM4.19 18l-2 .41A14.09 14.09 0 003.86 23L5.59 22A12.44 12.44 0 014.19 18zM11.82 4.76l-.69-1.87A13.79 13.79 0 007 5.33L8.24 6.86A12 12 0 0111.82 4.76zM5.59 10L3.86 9a14.37 14.37 0 00-1.64 4.59l2 .34A12.05 12.05 0 015.59 10zM16 2V4a12 12 0 010 24v2A14 14 0 0016 2z"
-          />
-        </svg>
-      </Icon>
-    </ForwardRef(Fade32)>
-  </button>
+          <svg
+            aria-hidden={true}
+            fill="currentColor"
+            focusable="false"
+            height={32}
+            preserveAspectRatio="xMidYMid meet"
+            viewBox="0 0 32 32"
+            width={32}
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <path
+              d="M8.24 25.14L7 26.67a13.79 13.79 0 004.18 2.44l.69-1.87A12 12 0 018.24 25.14zM4.19 18l-2 .41A14.09 14.09 0 003.86 23L5.59 22A12.44 12.44 0 014.19 18zM11.82 4.76l-.69-1.87A13.79 13.79 0 007 5.33L8.24 6.86A12 12 0 0111.82 4.76zM5.59 10L3.86 9a14.37 14.37 0 00-1.64 4.59l2 .34A12.05 12.05 0 015.59 10zM16 2V4a12 12 0 010 24v2A14 14 0 0016 2z"
+            />
+          </svg>
+        </Icon>
+      </ForwardRef(Fade32)>
+    </button>
+  </Button>
 </HeaderGlobalAction>
 `;