From b9adf1d5c78ef050dad8ed121d3a67b3f9feb824 Mon Sep 17 00:00:00 2001
From: Taylor Jones <tay1orjones@users.noreply.github.com>
Date: Tue, 2 Mar 2021 14:34:05 -0600
Subject: [PATCH] fix(HeaderGlobalAction): provide visual text for link via
 title attribute (#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 <aledavila@ibm.com>
Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com>
---
 .../src/components/ui-shell/_header.scss      |  4 ++
 .../__snapshots__/PublicAPI-test.js.snap      | 10 +++
 .../components/UIShell/HeaderGlobalAction.js  | 16 ++++-
 .../src/components/UIShell/UIShell-story.js   | 21 ++++---
 .../HeaderGlobalAction-test.js.snap           | 61 +++++++++++++------
 5 files changed, 84 insertions(+), 28 deletions(-)

diff --git a/packages/components/src/components/ui-shell/_header.scss b/packages/components/src/components/ui-shell/_header.scss
index 33ad579dee39..529a8d3a2703 100644
--- 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
index 54a7638c1ec7..67aa83e6f16f 100644
--- 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
index 0ddc1a85cf89..329e3b5b23c9 100644
--- 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
index aa130432fbc8..2e66ce7984ea 100644
--- 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/packages/react/src/components/UIShell/__tests__/__snapshots__/HeaderGlobalAction-test.js.snap b/packages/react/src/components/UIShell/__tests__/__snapshots__/HeaderGlobalAction-test.js.snap
index 121ec020c19b..27883cdcea1b 100644
--- a/packages/react/src/components/UIShell/__tests__/__snapshots__/HeaderGlobalAction-test.js.snap
+++ b/packages/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>
 `;