Fix basic accessibility issues

settings/src/components/account-status.js

@@ -2,7 +2,7 @@
  * WordPress dependencies
  */
 import { Card, CardBody } from '@wordpress/components';
-import { useContext } from '@wordpress/element';
+import { useContext, useState } from '@wordpress/element';
 import { Icon, cancelCircleFilled, check, chevronRight, warning } from '@wordpress/icons';
 
 /**
@@ -65,9 +65,16 @@ export default function AccountStatus() {
 /**
  * Render a card for the status of the given setting.
  */
-function SettingStatusCard( { screen, status, headerText, bodyText } ) {
+function SettingStatusCard({ screen, status, headerText, bodyText }) {
+	const [ isFocused, setIsFocused ] = useState( false );
+	const className = [
+		"wporg-2fa__status-card",
+		"wporg-2fa__status-card-" + screen,
+		...( isFocused ? [ "wporg-2fa__status-card__focused" ] : [] ),
+	].join( " " );
+
 	return (
-		<Card className={ 'wporg-2fa__status-card wporg-2fa__status-card-' + screen }>
+		<Card className={ className }>
 			<ScreenLink
 				screen={ screen }
 				anchorText={
@@ -78,6 +85,8 @@ function SettingStatusCard( { screen, status, headerText, bodyText } ) {
 						<Icon icon={ chevronRight } size={ 26 } className="wporg-2fa__status-card-open" />
 					</CardBody>
 				}
+				onFocus={ () => setIsFocused( true ) }
+				onBlur={ () => setIsFocused( false ) }
 			/>
 		</Card>
 	);

settings/src/components/account-status.scss

@@ -1,7 +1,19 @@
 .wporg-2fa__account-status {
 	.wporg-2fa__status-card {
+		&:hover,
+		&.wporg-2fa__status-card__focused {
+			z-index: 1;
+		}
+
 		a {
+			display: block;
 			text-decoration: none;
+
+			&:hover,
+			&:focus {
+				outline: var(--wp-admin-border-width-focus) solid var(--wp-components-color-accent,var(--wp-admin-theme-color,#007cba));
+				outline-offset: 0;
+			}
 		}
 
 		.components-card__body {

settings/src/components/global-notice.js

@@ -4,14 +4,19 @@
 import { Flex, Snackbar } from '@wordpress/components';
 import { check } from '@wordpress/icons';
 
-export default function GlobalNotice( { notice } ) {
+export default function GlobalNotice( { notice, setNotice } ) {
 	if ( ! notice ) {
 		return;
 	}
 
 	return (
 		<Flex justify="flex-end">
-			<Snackbar className="wporg-2fa__global-notice" icon={ check }>
+			<Snackbar
+				className="wporg-2fa__global-notice"
+				icon={ check }
+				explicitDismiss
+				onRemove={ () => setNotice( '' ) }
+			>
 				{ notice }
 			</Snackbar>
 		</Flex>

settings/src/components/password.js

@@ -100,6 +100,7 @@ export default function Password() {
 					className="wporg-2fa__show-password"
 					size={ 24 }
 					onClick={ () => setInputType( inputType === 'password' ? 'text' : 'password' ) }
+					aria-label="Show password"
 				>
 					<Icon icon={ seen } />
 				</Button>

settings/src/components/screen-link.js

@@ -8,7 +8,13 @@ import { useContext } from '@wordpress/element';
  */
 import { GlobalContext } from '../script';
 
-export default function ScreenLink( { screen, anchorText, buttonStyle = false } ) {
+export default function ScreenLink( {
+	screen,
+	anchorText,
+	buttonStyle = false,
+	onFocus = () => {},
+	onBlur = () => {},
+} ) {
 	const { clickScreenLink } = useContext( GlobalContext );
 	const classes = [];
 	let screenUrl = new URL( document.location.href );
@@ -28,6 +34,9 @@ export default function ScreenLink( { screen, anchorText, buttonStyle = false }
 			href={ screenUrl.href }
 			onClick={ ( event ) => clickScreenLink( event, screen ) }
 			className={ classes.join( ' ' ) }
+			tabIndex={ 0 }
+			onFocus={ () => onFocus() }
+			onBlur={ () => onBlur() }
 		>
 			{ anchorText }
 		</a>

settings/src/components/screen-link.scss

@@ -1,6 +1,10 @@
 /* Overwrite bbPress styles with Gutenberg styles */
-#bbpress-forums .wp-block-wporg-two-factor-settings a.components-button,
-#bbpress-forums .wp-block-wporg-two-factor-settings a.components-button:hover {
+#bbpress-forums .wp-block-wporg-two-factor-settings a.components-button.is-secondary {
 	box-shadow: inset 0 0 0 1px var(--wp-components-color-accent,var(--wp-admin-theme-color,#007cba));
 	text-decoration: none;
+
+	&:not(:disabled):focus {
+		box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) var(--wp-components-color-accent,var(--wp-admin-theme-color,#007cba));
+		outline: 3px solid transparent;
+	}
 }

settings/src/components/totp.js

@@ -84,7 +84,7 @@ function Setup() {
 			<p>
 				Two-Factor Authentication adds an extra layer of security to your account.
 				Once enabled, logging in to WordPress.org will require you to enter a unique passcode
-				generated by an app on your mobile device , in addition to your username and password.
+				generated by an app on your mobile device, in addition to your username and password.
 			</p>
 
 			<p>
@@ -139,7 +139,7 @@ function SetupMethod( { setupMethod, setSetupMethod, qrCodeUrl, secretKey } ) {
 					{ ! qrCodeUrl && 'Loading...' }
 
 					{ qrCodeUrl &&
-						<a href={ qrCodeUrl }>
+						<a href={ qrCodeUrl } aria-label="Scan QR code">
 							<RawHTML>
 								{ createQrCode( qrCodeUrl ) }
 							</RawHTML>

settings/src/components/totp.scss

@@ -1,5 +1,17 @@
 .wporg-2fa__qr-code {
 	text-align: center;
+
+	#bbpress-forums & {
+		> a {
+			display: inline-block;
+
+			&:hover,
+			&:focus {
+				box-shadow: 0 0 0 var(--wp-admin-border-width-focus) var(--wp-components-color-accent,var(--wp-admin-theme-color,#007cba));
+				outline: 3px solid transparent;
+			}
+		}
+	}
 }
 
 .wporg-2fa__manual-code {

settings/src/script.js

@@ -152,7 +152,7 @@ function Main( { userId } ) {
 
 	return (
 		<GlobalContext.Provider value={ { clickScreenLink, userRecord, setGlobalNotice } }>
-			<GlobalNotice notice={ globalNotice } />
+			<GlobalNotice notice={ globalNotice } setNotice={ setGlobalNotice } />
 			{ screenContent }
 		</GlobalContext.Provider>
 	);