Show Jetpack login label (#107243)

Author: chriskmnds

client/blocks/login/login-form.jsx

@@ -434,8 +434,6 @@ export class LoginForm extends Component {
 			return this.renderChangeUsername();
 		}
 
-		const showLabel = ! this.props.isJetpack || this.props.isWoo;
-
 		return (
 			// Since the input receives focus on page load, screen reader users don't have any context
 			// for what credentials to use. Unlike other users, they won't have seen the informative
@@ -444,9 +442,7 @@ export class LoginForm extends Component {
 				<span className="screen-reader-text">
 					{ this.props.translate( 'WordPress.com email address or username' ) }
 				</span>
-				{ showLabel && (
-					<span aria-hidden="true">{ this.props.translate( 'Email address or username' ) }</span>
-				) }
+				<span aria-hidden="true">{ this.props.translate( 'Email address or username' ) }</span>
 			</>
 		);
 	}

client/blocks/login/test/login-form.jsx

@@ -141,4 +141,33 @@ describe( 'LoginForm', () => {
 		const btn = screen.getByRole( 'button', { name: /Log In/i } );
 		expect( btn ).toBeInTheDocument();
 	} );
+
+	test( 'shows the visual email-or-username label for Jetpack logins', async () => {
+		render( <LoginForm isJetpack />, {
+			initialState: {
+				login: { socialAccountLink: { isLinking: false } },
+				route: { query: { current: {}, initial: {} } },
+			},
+		} );
+
+		const label = screen.getByText( 'Email address or username', {
+			selector: 'span[aria-hidden="true"]',
+		} );
+		expect( label ).toBeInTheDocument();
+	} );
+
+	test( 'shows the username-only label when query flag is set', async () => {
+		render( <LoginForm />, {
+			initialState: {
+				route: {
+					query: {
+						current: { username_only: 'true' },
+						initial: {},
+					},
+				},
+			},
+		} );
+
+		expect( screen.getByText( 'Your username' ) ).toBeInTheDocument();
+	} );
 } );