Merge pull request #632 from dd32/fix/536

Improve accessibility for options page
WordPress · Sep 18, 2024 · 3437c77 · 3437c77
2 parents 8141b10 + bb048cb
commit 3437c77
Show file tree

Hide file tree

Showing 2 changed files with 10 additions and 1 deletion.
diff --git a/class-two-factor-core.php b/class-two-factor-core.php
@@ -1721,7 +1721,7 @@ public static function user_two_factor_options( $user ) {
 
 		wp_nonce_field( 'user_two_factor_options', '_nonce_user_two_factor_options', false );
 		?>
-		<h3><?php esc_html_e( 'Two-Factor Options', 'two-factor' ); ?></h3>
+		<h2><?php esc_html_e( 'Two-Factor Options', 'two-factor' ); ?></h2>
 		<input type="hidden" name="<?php echo esc_attr( self::ENABLED_PROVIDERS_USER_META_KEY ); ?>[]" value="<?php /* Dummy input so $_POST value is passed when no providers are enabled. */ ?>" />
 		<table class="wp-list-table widefat fixed striped table-view-list two-factor-methods-table">
 			<thead>

diff --git a/providers/class-two-factor-totp.php b/providers/class-two-factor-totp.php
@@ -318,6 +318,15 @@ public function user_two_factor_options( $user ) {
 						qr.make();
 
 						document.querySelector( '#two-factor-qr-code a' ).innerHTML = qr.createSvgTag( 5 );
+
+						// For accessibility, markup the SVG with a title and role.
+						var svg = document.querySelector( '#two-factor-qr-code a svg' ),
+							title = document.createElement( 'title' );
+
+						svg.role = 'image';
+						svg.ariaLabel = <?php echo wp_json_encode( __( 'Authenticator App QR Code', 'two-factor' ) ); ?>;
+						title.innerText = svg.ariaLabel;
+						svg.appendChild( title );
 					};
 
 					// Run now if the document is loaded, otherwise on DOMContentLoaded.