Merge pull request #4224 from google/enhance/4048-follow-up

Fix Unified Dashboard Header Elements.
google · Oct 19, 2021 · 1f783fc · 1f783fc
2 parents 22ded8f + 1df6007
commit 1f783fc
Show file tree

Hide file tree

Showing 3 changed files with 47 additions and 11 deletions.
diff --git a/assets/js/components/EntitySearchInput.js b/assets/js/components/EntitySearchInput.js
@@ -19,16 +19,19 @@
 /**
  * WordPress dependencies
  */
-import { useCallback, useState } from '@wordpress/element';
+import { useInstanceId } from '@wordpress/compose';
+import { Fragment, useCallback, useState } from '@wordpress/element';
 import { __ } from '@wordpress/i18n';
 
 /**
  * Internal dependencies
  */
 import Button from './Button';
+import VisuallyHidden from './VisuallyHidden';
 import MagnifyingGlass from '../../svg/magnifying-glass.svg';
 
 function EntitySearchInput() {
+	const instanceID = useInstanceId( EntitySearchInput, 'EntitySearchInput' );
 	const [ isActive, setIsActive ] = useState( false );
 
 	const onActive = useCallback( () => {
@@ -40,16 +43,30 @@ function EntitySearchInput() {
 	}, [] );
 
 	if ( isActive ) {
-		return <input onBlur={ onBlur } />;
+		return (
+			<Fragment>
+				<VisuallyHidden>
+					<label htmlFor={ instanceID }>
+						{ __( 'Page/URL Search', 'google-site-kit' ) }
+					</label>
+				</VisuallyHidden>
+				{ /* eslint-disable-next-line jsx-a11y/no-autofocus */ }
+				<input id={ instanceID } autoFocus onBlur={ onBlur } />
+			</Fragment>
+		);
 	}
 
 	return (
-		<Button
-			onClick={ onActive }
-			icon={ <MagnifyingGlass width="20" height="20" /> }
-		>
-			{ __( 'URL Search', 'google-site-kit' ) }
-		</Button>
+		<div className="googlesitekit-dropdown-menu googlesitekit-dropdown-menu__icon-menu">
+			<Button
+				text
+				onClick={ onActive }
+				trailingIcon={ <MagnifyingGlass width="30" height="20" /> }
+				className="mdc-button--dropdown"
+			>
+				{ __( 'URL Search', 'google-site-kit' ) }
+			</Button>
+		</div>
 	);
 }
 

diff --git a/assets/js/components/UserMenu.js b/assets/js/components/UserMenu.js
@@ -19,6 +19,7 @@
 /**
  * External dependencies
  */
+import classnames from 'classnames';
 import { useClickAway } from 'react-use';
 
 /**
@@ -160,15 +161,28 @@ export default function UserMenu() {
 		<Fragment>
 			<div
 				ref={ menuWrapperRef }
-				className="googlesitekit-user-selector googlesitekit-dropdown-menu googlesitekit-dropdown-menu__icon-menu mdc-menu-surface--anchor"
+				className={ classnames(
+					'googlesitekit-user-selector',
+					'googlesitekit-dropdown-menu',
+					'googlesitekit-dropdown-menu__icon-menu',
+					'mdc-menu-surface--anchor',
+					{
+						'googlesitekit-help-menu': unifiedDashboardEnabled,
+					}
+				) }
 			>
 				<Button
 					className="googlesitekit-header__dropdown mdc-button--dropdown"
 					text
 					onClick={ handleMenu }
 					icon={
 						!! userPicture && (
-							<i className="mdc-button__icon" aria-hidden="true">
+							<i
+								className={ classnames( 'mdc-button__icon', {
+									'mdc-button__account': unifiedDashboardEnabled,
+								} ) }
+								aria-hidden="true"
+							>
 								<img
 									className="mdc-button__icon--image"
 									src={ userPicture }
@@ -183,8 +197,9 @@ export default function UserMenu() {
 					aria-haspopup="menu"
 					aria-expanded={ menuOpen }
 					aria-controls="user-menu"
+					aria-label={ __( 'Account', 'google-site-kit' ) }
 				>
-					{ ! unifiedDashboardEnabled && userEmail }
+					{ unifiedDashboardEnabled ? undefined : userEmail }
 				</Button>
 				<Menu
 					className="googlesitekit-width-auto"

diff --git a/assets/sass/components/global/_googlesitekit-header.scss b/assets/sass/components/global/_googlesitekit-header.scss
@@ -81,6 +81,10 @@
 			margin-right: 12px;
 		}
 
+		.mdc-button__account {
+			margin-right: 0;
+		}
+
 		.mdc-button__icon,
 		.mdc-button__icon--image {
 			// increase default button image size