AC-2479::Visual text label does not match accessible name. (Global He…

packages/peregrine/lib/talons/Header/__tests__/__snapshots__/useAccountTrigger.spec.js.snap

@@ -6,6 +6,7 @@ Object {
   "accountMenuRef": "elementRef",
   "accountMenuTriggerRef": [MockFunction],
   "handleTriggerClick": [Function],
+  "isUserSignedIn": true,
   "setAccountMenuIsOpen": [MockFunction],
 }
 `;

packages/peregrine/lib/talons/Header/__tests__/useAccountTrigger.spec.js

@@ -12,6 +12,16 @@ jest.mock('@magento/peregrine/lib/hooks/useDropdown', () => ({
     })
 }));
 
+jest.mock('@magento/peregrine/lib/context/user', () => {
+    const state = {
+        isSignedIn: true
+    };
+    const api = {};
+    const useUserContext = jest.fn(() => [state, api]);
+
+    return { useUserContext };
+});
+
 const defaultProps = {
     VIEWS: {
         SIGNIN: 'SIGNIN',

packages/peregrine/lib/talons/Header/useAccountTrigger.js

@@ -1,7 +1,7 @@
 import { useCallback } from 'react';
 
 import { useDropdown } from '@magento/peregrine/lib/hooks/useDropdown';
-
+import { useUserContext } from '@magento/peregrine/lib/context/user';
 /**
  * The useAccountTrigger talon complements the AccountTrigger component.
  *
@@ -25,11 +25,14 @@ export const useAccountTrigger = () => {
         setAccountMenuIsOpen(isOpen => !isOpen);
     }, [setAccountMenuIsOpen]);
 
+    const [{ isSignedIn: isUserSignedIn }] = useUserContext();
+
     return {
         accountMenuIsOpen,
         accountMenuRef,
         accountMenuTriggerRef,
         setAccountMenuIsOpen,
-        handleTriggerClick
+        handleTriggerClick,
+        isUserSignedIn
     };
 };

packages/venia-ui/i18n/en_US.json

@@ -14,7 +14,8 @@
     "accountMenu.savedPaymentsLink": "Saved Payments",
     "accountMenu.signOutButtonText": "Sign Out",
     "accountMenu.storeCreditLink": "Store Credit & Gift Cards",
-    "accountTrigger.ariaLabel": "Toggle My Account Menu",
+    "accountTrigger.ariaLabelMyMenu": "Toggle My Account Menu",
+    "accountTrigger.ariaLabelSignIn": "Sign In",
     "accountTrigger.buttonFallback": "Sign In",
     "accountTrigger.signIn": "Sign In",
     "addressBook.addNewAddresstext": "Add New Address",

packages/venia-ui/lib/components/AccountChip/__tests__/__snapshots__/accountChip.spec.js.snap

@@ -31,6 +31,7 @@ exports[`it renders a loading indicator when appropriate 1`] = `
   </span>
   <span
     aria-atomic="true"
+    aria-label="Toggle My Account Menu"
     aria-live="polite"
     className="text"
   >

packages/venia-ui/lib/components/AccountChip/accountChip.js

@@ -35,6 +35,13 @@ const AccountChip = props => {
     const classes = useStyle(defaultClasses, props.classes);
     const { formatMessage } = useIntl();
 
+    const ariaLabelMyMenu = formatMessage({
+        id: 'accountTrigger.ariaLabelMyMenu',
+        defaultMessage: 'Toggle My Account Menu'
+    });
+
+    const ariaLabel = isUserSignedIn ? ariaLabelMyMenu : '';
+
     let chipText;
     if (!isUserSignedIn) {
         chipText = fallbackText;
@@ -55,6 +62,7 @@ const AccountChip = props => {
         <span className={classes.root}>
             <Icon src={AccountIcon} />
             <span
+                aria-label={ariaLabel}
                 aria-atomic="true"
                 aria-live="polite"
                 data-cy="AccountChip-text"

packages/venia-ui/lib/components/Header/__tests__/__snapshots__/accountTrigger.spec.js.snap

@@ -7,7 +7,7 @@ Array [
   >
     <button
       aria-expanded={false}
-      aria-label="Toggle My Account Menu"
+      aria-label="Sign In"
       className="trigger"
       onClick={[MockFunction handleTriggerClick]}
     >

packages/venia-ui/lib/components/Header/accountTrigger.js

@@ -25,22 +25,29 @@ const AccountTrigger = props => {
         accountMenuRef,
         accountMenuTriggerRef,
         setAccountMenuIsOpen,
-        handleTriggerClick
+        handleTriggerClick,
+        isUserSignedIn
     } = talonProps;
 
     const classes = useStyle(defaultClasses, props.classes);
     const rootClassName = accountMenuIsOpen ? classes.root_open : classes.root;
     const { formatMessage } = useIntl();
 
+    const ariaLabelMyMenu = formatMessage({
+        id: 'accountTrigger.ariaLabelMyMenu',
+        defaultMessage: 'Toggle My Account Menu'
+    });
+    const ariaLabelSignIn = formatMessage({
+        id: 'accountTrigger.ariaLabelSignIn',
+        defaultMessage: 'Sign In'
+    });
+    const ariaLabel = isUserSignedIn ? ariaLabelMyMenu : ariaLabelSignIn;
     return (
         <Fragment>
             <div className={rootClassName} ref={accountMenuTriggerRef}>
                 <button
+                    aria-label={ariaLabel}
                     aria-expanded={accountMenuIsOpen}
-                    aria-label={formatMessage({
-                        id: 'accountTrigger.ariaLabel',
-                        defaultMessage: 'Toggle My Account Menu'
-                    })}
                     className={classes.trigger}
                     onClick={handleTriggerClick}
                     data-cy="AccountTrigger-trigger"