Studio: Add missing tooltip labels to buttons

src/components/button.tsx

@@ -2,6 +2,7 @@ import { Button } from '@wordpress/components';
 import { useResizeObserver } from '@wordpress/compose';
 import { ComponentProps, useEffect, useRef, useState } from 'react';
 import { cx } from '../lib/cx';
+import Tooltip from './tooltip';
 
 /**
  * Sourced from https://stackoverflow.com/a/76616671/378228 to address
@@ -13,6 +14,7 @@ type MappedOmit< T, K extends PropertyKey > = { [ P in keyof T as Exclude< P, K
 export type ButtonProps = MappedOmit< ComponentProps< typeof Button >, 'variant' > & {
 	variant?: ButtonVariant;
 	truncate?: boolean;
+	tooltipText?: string;
 };
 
 type ButtonVariant = 'primary' | 'secondary' | 'tertiary' | 'outlined' | 'link' | 'icon';
@@ -117,6 +119,7 @@ export default function ButtonComponent( {
 	truncate,
 	children,
 	showTooltip,
+	tooltipText,
 	...props
 }: ButtonProps ) {
 	const [ isTruncated, setIsTruncated ] = useState( false );
@@ -128,7 +131,8 @@ export default function ButtonComponent( {
 		}
 		setIsTruncated( element.current.offsetWidth < element.current.scrollWidth );
 	}, [ sizes, truncate ] );
-	return (
+
+	const buttonContent = (
 		<Button
 			{ ...props }
 			variant={ sansCustomValues( variant ) }
@@ -154,4 +158,6 @@ export default function ButtonComponent( {
 				: children }
 		</Button>
 	);
+
+	return tooltipText ? <Tooltip text={ tooltipText }>{ buttonContent }</Tooltip> : buttonContent;
 }

src/components/content-tab-overview.tsx

@@ -1,5 +1,5 @@
 import * as Sentry from '@sentry/electron/renderer';
-import { __ } from '@wordpress/i18n';
+import { __, sprintf } from '@wordpress/i18n';
 import {
 	archive,
 	code,
@@ -24,6 +24,7 @@ import { isMac } from '../lib/app-globals';
 import { cx } from '../lib/cx';
 import { getIpcApi } from '../lib/get-ipc-api';
 import { ButtonsSection, ButtonsSectionProps } from './buttons-section';
+import Tooltip from './tooltip';
 
 interface ContentTabOverviewProps {
 	selectedSite: SiteDetails;
@@ -257,25 +258,36 @@ export function ContentTabOverview( { selectedSite }: ContentTabOverviewProps )
 						</div>
 					) }
 					{ ! loading && siteRunning && (
-						<button
-							aria-label={ __( 'Open site' ) }
-							className={ 'relative group focus-visible:outline-a8c-blueberry' }
-							onClick={ () => getIpcApi().openSiteURL( selectedSite.id, '', { autoLogin: false } ) }
+						<Tooltip
+							text={ sprintf(
+								/* translators: siteUrl is the site URL */
+								__( 'Open %(siteUrl)s' ),
+								{ siteUrl: selectedSite.url }
+							) }
+							placement="top"
 						>
-							<div
-								className={
-									'opacity-0 group-hover:opacity-90 group-hover:bg-white group-focus:opacity-90 group-focus:bg-white duration-300 absolute size-full flex justify-center items-center bg-white text-a8c-blueberry'
+							<button
+								aria-label={ __( 'Open site' ) }
+								className={ 'relative group focus-visible:outline-a8c-blueberry' }
+								onClick={ () =>
+									getIpcApi().openSiteURL( selectedSite.id, '', { autoLogin: false } )
 								}
 							>
-								{ __( 'Open site' ) }
-								<Icon
-									icon={ external }
-									className="ltr:ml-0.5 rtl:mr-0.5 rtl:scale-x-[-1] fill-a8c-blueberry"
-									size={ 14 }
-								/>
-							</div>
-							{ thumbnailImage }
-						</button>
+								<div
+									className={
+										'opacity-0 group-hover:opacity-90 group-hover:bg-white group-focus:opacity-90 group-focus:bg-white duration-300 absolute size-full flex justify-center items-center bg-white text-a8c-blueberry'
+									}
+								>
+									{ __( 'Open site' ) }
+									<Icon
+										icon={ external }
+										className="ltr:ml-0.5 rtl:mr-0.5 rtl:scale-x-[-1] fill-a8c-blueberry"
+										size={ 14 }
+									/>
+								</div>
+								{ thumbnailImage }
+							</button>
+						</Tooltip>
 					) }
 					{ ! loading && ! siteRunning && thumbnailImage }
 				</div>

src/components/copy-text-button.tsx

@@ -53,7 +53,8 @@ export function CopyTextButton( {
 				showCopied && '[&.is-link]:text-[#2145e6]',
 				className
 			) }
-			aria-label={ label || __( 'copy to clipboard' ) }
+			aria-label={ label || __( 'Copy to clipboard' ) }
+			tooltipText={ __( 'Copy to clipboard' ) }
 			onClick={ onClick }
 			variant={ variant }
 		>

src/components/site-menu.tsx

@@ -6,6 +6,7 @@ import { useImportExport } from '../hooks/use-import-export';
 import { useSiteDetails } from '../hooks/use-site-details';
 import { isMac } from '../lib/app-globals';
 import { cx } from '../lib/cx';
+import Tooltip from './tooltip';
 
 interface SiteMenuProps {
 	className?: string;
@@ -57,43 +58,52 @@ function ButtonToRun( { running, id, name }: Pick< SiteDetails, 'running' | 'id'
 			/>
 		</svg>
 	);
+
+	const tooltipText = loadingServer[ id ]
+		? __( 'Starting' )
+		: running
+		? __( 'Stop site' )
+		: __( 'Start site' );
+
 	return (
-		<button
-			aria-disabled={ loadingServer[ id ] }
-			onClick={ () => {
-				if ( loadingServer[ id ] ) {
-					return;
-				}
-				return running ? stopServer( id ) : startServer( id );
-			} }
-			className="w-7 h-8 rounded-tr rounded-br group grid focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-a8c-blueberry"
-			aria-label={ sprintf( running ? __( 'stop %s site' ) : __( 'start %s site' ), name ) }
-		>
-			{ /* Circle */ }
-			<div
-				className={ cx(
-					'w-2.5 h-2.5 transition-opacity group-hover:opacity-0 group-focus-visible:opacity-0 border-[0.5px]',
-					'row-start-1 col-start-1 place-self-center',
-					classCircle,
-					loadingServer[ id ] && 'animate-pulse border-[#00BA3775] bg-[#1ED15A75] duration-100',
-					running && 'border-[#00BA37] bg-[#1ED15A] duration-100',
-					! running && ! loadingServer[ id ] && 'border-[#ffffff19] bg-[#ffffff26]'
-				) }
+		<Tooltip text={ tooltipText }>
+			<button
+				aria-disabled={ loadingServer[ id ] }
+				onClick={ () => {
+					if ( loadingServer[ id ] ) {
+						return;
+					}
+					return running ? stopServer( id ) : startServer( id );
+				} }
+				className="w-7 h-8 rounded-tr rounded-br group grid focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-a8c-blueberry"
+				aria-label={ sprintf( running ? __( 'stop %s site' ) : __( 'start %s site' ), name ) }
 			>
-				&nbsp;
-			</div>
-			{ /* Shapes on hover */ }
-			{ ! loadingServer[ id ] && (
+				{ /* Circle */ }
 				<div
 					className={ cx(
-						'opacity-0 transition-opacity group-hover:opacity-100 group-focus-visible:opacity-100',
-						'row-start-1 col-start-1 place-self-center'
+						'w-2.5 h-2.5 transition-opacity group-hover:opacity-0 group-focus-visible:opacity-0 border-[0.5px]',
+						'row-start-1 col-start-1 place-self-center',
+						classCircle,
+						loadingServer[ id ] && 'animate-pulse border-[#00BA3775] bg-[#1ED15A75] duration-100',
+						running && 'border-[#00BA37] bg-[#1ED15A] duration-100',
+						! running && ! loadingServer[ id ] && 'border-[#ffffff19] bg-[#ffffff26]'
 					) }
 				>
-					{ running ? rectangle : triangle }
+					&nbsp;
 				</div>
-			) }
-		</button>
+				{ /* Shapes on hover */ }
+				{ ! loadingServer[ id ] && (
+					<div
+						className={ cx(
+							'opacity-0 transition-opacity group-hover:opacity-100 group-focus-visible:opacity-100',
+							'row-start-1 col-start-1 place-self-center'
+						) }
+					>
+						{ running ? rectangle : triangle }
+					</div>
+				) }
+			</button>
+		</Tooltip>
 	);
 }
 function SiteItem( { site }: { site: SiteDetails } ) {

src/components/tests/copy-text-button.test.tsx

@@ -18,7 +18,7 @@ describe( 'CopyTextButton', () => {
 
 	test( 'the button is present, and not the confirmation', () => {
 		render( <CopyTextButton text="Sample Text" copyConfirmation="Copied!" /> );
-		expect( screen.getByRole( 'button', { name: 'copy to clipboard' } ) ).toBeVisible();
+		expect( screen.getByRole( 'button', { name: 'Copy to clipboard' } ) ).toBeVisible();
 		expect( screen.queryByRole( 'alert' ) ).toBe( null );
 	} );
 
@@ -27,7 +27,7 @@ describe( 'CopyTextButton', () => {
 		const mockCopyText = jest.fn();
 		( getIpcApi as jest.Mock ).mockReturnValue( { copyText: mockCopyText } );
 		render( <CopyTextButton text="Sample Text" copyConfirmation="Copied!" /> );
-		expect( screen.getByRole( 'button', { name: 'copy to clipboard' } ) ).toBeVisible();
+		expect( screen.getByRole( 'button', { name: 'Copy to clipboard' } ) ).toBeVisible();
 		await user.click( screen.getByRole( 'button' ) );
 		expect( screen.getByRole( 'alert' ) ).toHaveTextContent( 'Copied!' );
 		expect( mockCopyText ).toHaveBeenCalledWith( 'Sample Text' );

src/components/tests/topbar.test.tsx

@@ -27,15 +27,15 @@ describe( 'TopBar', () => {
 		const authenticate = jest.fn();
 		( useAuth as jest.Mock ).mockReturnValue( { isAuthenticated: false, authenticate } );
 		await act( async () => render( <TopBar onToggleSidebar={ jest.fn() } /> ) );
-		expect( screen.queryByRole( 'button', { name: 'Account' } ) ).not.toBeInTheDocument();
-		expect( screen.getByRole( 'button', { name: 'Log in' } ) ).toBeVisible();
+		expect( screen.queryByRole( 'button', { name: 'Open settings' } ) ).not.toBeInTheDocument();
+		expect( screen.getByRole( 'button', { name: 'Open settings to log in' } ) ).toBeVisible();
 	} );
 
 	it( 'Test authenticated TopBar does not have the log in button and it has the settings and account buttons', async () => {
 		( useAuth as jest.Mock ).mockReturnValue( { isAuthenticated: true } );
 		await act( async () => render( <TopBar onToggleSidebar={ jest.fn() } /> ) );
 		expect( screen.queryByRole( 'button', { name: 'Log in' } ) ).not.toBeInTheDocument();
-		expect( screen.getByRole( 'button', { name: 'Account' } ) ).toBeVisible();
+		expect( screen.getByRole( 'button', { name: 'Open settings' } ) ).toBeVisible();
 	} );
 
 	it( 'shows offline indicator', async () => {
@@ -58,7 +58,7 @@ describe( 'TopBar', () => {
 
 		render( <TopBar onToggleSidebar={ jest.fn() } /> );
 
-		const helpIconButton = screen.getByRole( 'button', { name: 'Help' } );
+		const helpIconButton = screen.getByRole( 'button', { name: 'Get help' } );
 		await user.click( helpIconButton );
 		await waitFor( () =>
 			expect( mockOpenURL ).toHaveBeenCalledWith(
@@ -75,7 +75,7 @@ describe( 'TopBar', () => {
 
 		render( <TopBar onToggleSidebar={ onToggleSidebar } /> );
 
-		const toggleButton = screen.getByRole( 'button', { name: 'Toggle Sidebar' } );
+		const toggleButton = screen.getByRole( 'button', { name: 'Toggle sidebar' } );
 		await user.click( toggleButton );
 
 		expect( onToggleSidebar ).toHaveBeenCalledTimes( 1 );

src/components/top-bar.tsx

@@ -53,7 +53,8 @@ function Authentication() {
 		return (
 			<Button
 				onClick={ () => getIpcApi().showUserSettings() }
-				aria-label={ __( 'Account' ) }
+				aria-label={ __( 'Open settings' ) }
+				tooltipText={ __( 'Open settings' ) }
 				variant="icon"
 				className="text-white hover:!text-white !px-1 py-1 !h-6 gap-2"
 			>
@@ -66,7 +67,8 @@ function Authentication() {
 	return (
 		<Button
 			onClick={ () => getIpcApi().showUserSettings() }
-			aria-label={ __( 'Log in' ) }
+			aria-label={ __( 'Open settings to log in' ) }
+			tooltipText={ __( 'Open settings to log in' ) }
 			className="flex gap-x-2 justify-between w-full text-white rounded !px-0 !py-0 h-auto active:!text-white hover:!text-white hover:underline items-center"
 		>
 			<WordPressLogo />
@@ -88,7 +90,8 @@ export default function TopBar( { onToggleSidebar }: TopBarProps ) {
 					className="app-no-drag-region"
 					onClick={ onToggleSidebar }
 					variant="icon"
-					aria-label={ __( 'Toggle Sidebar' ) }
+					aria-label={ __( 'Toggle sidebar' ) }
+					tooltipText={ __( 'Toggle sidebar' ) }
 				>
 					<Icon className="text-white" icon={ drawerLeft } size={ 24 } />
 				</Button>
@@ -98,7 +101,7 @@ export default function TopBar( { onToggleSidebar }: TopBarProps ) {
 
 			<div className="app-no-drag-region flex items-center space-x-4">
 				<Authentication />
-				<Button onClick={ openDocs } aria-label={ __( 'Help' ) } variant="icon">
+				<Button onClick={ openDocs } aria-label={ __( 'Get help' ) } variant="icon">
 					<Icon className="text-white" size={ 24 } icon={ help } />
 				</Button>
 			</div>

src/components/user-settings.tsx

@@ -33,7 +33,7 @@ const UserInfo = ( {
 			<div className="flex w-full items-center gap-3">
 				<Button
 					onClick={ () => getIpcApi().openURL( WPCOM_PROFILE_URL ) }
-					aria-label={ __( 'Profile link' ) }
+					aria-label={ __( 'Edit profile' ) }
 					variant="icon"
 				>
 					<Gravatar detailedDefaultImage size={ 32 } isBlack />