From 4b78701ea6ed8ae51a9c761513d28337279de224 Mon Sep 17 00:00:00 2001
From: Joe Dolson <design@joedolson.com>
Date: Tue, 21 Feb 2023 17:39:41 -0600
Subject: [PATCH 1/6] Change orphaned label to a span

Label element has no meaning without being associated with a form field. Buttons are self-labeling through their internal content or aria-label, and don't need a label associated.
---
 output/Html.php | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/output/Html.php b/output/Html.php
index d1daa7173..1517d170d 100644
--- a/output/Html.php
+++ b/output/Html.php
@@ -367,7 +367,7 @@ protected function build_filter( $name, $values, $label, $args = array() ) {
 	 */
 	protected function build_sorter( $heading = '' ) {
 		$out = '';
-		$out .= '<label class="qm-th">';
+		$out .= '<span class="qm-th">';
 		$out .= '<span class="qm-sort-heading">';
 
 		if ( '#' === $heading ) {
@@ -380,7 +380,7 @@ protected function build_sorter( $heading = '' ) {
 		$out .= '<button class="qm-sort-controls" aria-label="' . esc_attr__( 'Sort data by this column', 'query-monitor' ) . '">';
 		$out .= QueryMonitor::icon( 'arrow-down' );
 		$out .= '</button>';
-		$out .= '</label>';
+		$out .= '</span>';
 		return $out;
 	}
 

From 530857d4f03ddb9291652776d51a39f69cdf6dbf Mon Sep 17 00:00:00 2001
From: Joe Dolson <design@joedolson.com>
Date: Wed, 22 Feb 2023 12:08:22 -0600
Subject: [PATCH 2/6] Revert "Change orphaned label to a span"

This reverts commit 4b78701ea6ed8ae51a9c761513d28337279de224.
---
 output/Html.php | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/output/Html.php b/output/Html.php
index 1517d170d..d1daa7173 100644
--- a/output/Html.php
+++ b/output/Html.php
@@ -367,7 +367,7 @@ protected function build_filter( $name, $values, $label, $args = array() ) {
 	 */
 	protected function build_sorter( $heading = '' ) {
 		$out = '';
-		$out .= '<span class="qm-th">';
+		$out .= '<label class="qm-th">';
 		$out .= '<span class="qm-sort-heading">';
 
 		if ( '#' === $heading ) {
@@ -380,7 +380,7 @@ protected function build_sorter( $heading = '' ) {
 		$out .= '<button class="qm-sort-controls" aria-label="' . esc_attr__( 'Sort data by this column', 'query-monitor' ) . '">';
 		$out .= QueryMonitor::icon( 'arrow-down' );
 		$out .= '</button>';
-		$out .= '</span>';
+		$out .= '</label>';
 		return $out;
 	}
 

From 764380ab4d99d3d0e5cee245bc830246e438b83b Mon Sep 17 00:00:00 2001
From: Joe Dolson <design@joedolson.com>
Date: Wed, 22 Feb 2023 12:38:55 -0600
Subject: [PATCH 3/6] Pass labeling data to toggle buttons

All toggle buttons had the same text "Toggle more information", requiring screen reader users to explore the surrounding context on every button to determine context. Having immediate access to context makes locating information or verifying that you are toggling to correct data significantly faster.
---
 output/Html.php              | 6 ++++--
 output/html/block_editor.php | 7 ++++---
 output/html/caps.php         | 2 +-
 output/html/db_queries.php   | 2 +-
 output/html/environment.php  | 4 ++--
 output/html/hooks.php        | 2 +-
 output/html/http.php         | 6 ++++--
 output/html/languages.php    | 2 +-
 output/html/logger.php       | 2 +-
 output/html/multisite.php    | 2 +-
 output/html/php_errors.php   | 2 +-
 output/html/timing.php       | 4 ++--
 output/html/transients.php   | 2 +-
 13 files changed, 24 insertions(+), 19 deletions(-)

diff --git a/output/Html.php b/output/Html.php
index d1daa7173..f1729f987 100644
--- a/output/Html.php
+++ b/output/Html.php
@@ -387,10 +387,12 @@ protected function build_sorter( $heading = '' ) {
 	/**
 	 * Returns a toggle control. Safe for output.
 	 *
+	 * @param string $context Information to uniquely label the toggle button for screen readers.
+	 *
 	 * @return string Markup for the column sorter controls.
 	 */
-	protected static function build_toggler() {
-		$out = '<button class="qm-toggle" data-on="+" data-off="-" aria-expanded="false" aria-label="' . esc_attr__( 'Toggle more information', 'query-monitor' ) . '"><span aria-hidden="true">+</span></button>';
+	protected static function build_toggler( $context ) {
+		$out = '<button class="qm-toggle" data-on="+" data-off="-" aria-expanded="false" aria-label="' . sprintf( esc_attr__( 'View details for %s', 'query-monitor' ), strip_tags( $context ) ) . '"><span aria-hidden="true">+</span></button>';
 		return $out;
 	}
 
diff --git a/output/html/block_editor.php b/output/html/block_editor.php
index 1b48c52e5..76acc1e81 100644
--- a/output/html/block_editor.php
+++ b/output/html/block_editor.php
@@ -256,7 +256,7 @@ protected static function render_block( $i, array $block, QM_Data_Block_Editor $
 					echo '</td>';
 				} else {
 					echo '<td class="qm-nowrap qm-ltr qm-has-toggle' . esc_attr( $class ) . '">';
-					echo self::build_toggler(); // WPCS: XSS ok;
+					echo self::build_toggler( $block['callback']['name'] ); // WPCS: XSS ok;
 					echo '<ol>';
 					echo '<li>';
 					echo self::output_filename( $block['callback']['name'], $block['callback']['file'], $block['callback']['line'] ); // WPCS: XSS ok.
@@ -298,10 +298,11 @@ protected static function render_block( $i, array $block, QM_Data_Block_Editor $
 		$inner_html = $block['innerHTML'];
 
 		if ( $block['size'] > 300 ) {
+			$sub_string = substr( $inner_html, 0, 200 );
 			echo '<td class="qm-ltr qm-has-toggle qm-row-block-html">';
-			echo self::build_toggler(); // WPCS: XSS ok;
+			echo self::build_toggler( $sub_string ); // WPCS: XSS ok;
 			echo '<div class="qm-inverse-toggled"><pre class="qm-pre-wrap"><code>';
-			echo esc_html( substr( $inner_html, 0, 200 ) ) . '&nbsp;&hellip;';
+			echo esc_html( $sub_string ) . '&nbsp;&hellip;';
 			echo '</code></pre></div>';
 			echo '<div class="qm-toggled"><pre class="qm-pre-wrap"><code>';
 			echo esc_html( $inner_html );
diff --git a/output/html/caps.php b/output/html/caps.php
index c5cc06cb3..f034cb922 100644
--- a/output/html/caps.php
+++ b/output/html/caps.php
@@ -162,7 +162,7 @@ public function output() {
 				echo '<td class="qm-has-toggle qm-nowrap qm-ltr">';
 
 				if ( ! empty( $stack ) ) {
-					echo self::build_toggler(); // WPCS: XSS ok;
+					echo self::build_toggler( $caller ); // WPCS: XSS ok;
 				}
 
 				echo '<ol>';
diff --git a/output/html/db_queries.php b/output/html/db_queries.php
index d464b5248..2f4aca2f2 100644
--- a/output/html/db_queries.php
+++ b/output/html/db_queries.php
@@ -433,7 +433,7 @@ protected function output_query_row( array $row, array $cols ) {
 			echo '<td class="qm-row-caller qm-ltr qm-has-toggle qm-nowrap">';
 
 			if ( ! empty( $stack ) ) {
-				echo self::build_toggler(); // WPCS: XSS ok;
+				echo self::build_toggler( $caller_name ); // WPCS: XSS ok;
 			}
 
 			echo '<ol>';
diff --git a/output/html/environment.php b/output/html/environment.php
index a08363043..c1720476b 100644
--- a/output/html/environment.php
+++ b/output/html/environment.php
@@ -112,7 +112,7 @@ public function output() {
 		echo '<td class="qm-has-toggle qm-ltr">';
 
 		echo esc_html( (string) $data->php['error_reporting'] );
-		echo self::build_toggler(); // WPCS: XSS ok;
+		echo self::build_toggler( __( 'Error Reporting', 'query-monitor' ) ); // WPCS: XSS ok;
 
 		echo '<div class="qm-toggled">';
 		echo "<ul class='qm-supplemental'><li>{$error_levels}</li></ul>"; // WPCS: XSS ok.
@@ -129,7 +129,7 @@ public function output() {
 			printf( // WPCS: XSS ok.
 				'<div class="qm-inner-toggle">%1$s %2$s</div>',
 				esc_html( number_format_i18n( count( $data->php['extensions'] ) ) ),
-				self::build_toggler()
+				self::build_toggler( __( 'Extensions', 'query-monitor' ) )
 			);
 
 			echo '<div class="qm-toggled">';
diff --git a/output/html/hooks.php b/output/html/hooks.php
index 769c69e61..4b6a1a6e7 100644
--- a/output/html/hooks.php
+++ b/output/html/hooks.php
@@ -163,7 +163,7 @@ public static function output_hook_table( array $hooks ) {
 							echo '</td>';
 						} else {
 							echo '<td class="qm-nowrap qm-ltr qm-has-toggle' . esc_attr( $class ) . '">';
-							echo self::build_toggler(); // WPCS: XSS ok;
+							echo self::build_toggler( $action['callback']['name'] ); // WPCS: XSS ok;
 							echo '<ol>';
 							echo '<li>';
 							echo self::output_filename( $action['callback']['name'], $action['callback']['file'], $action['callback']['line'] ); // WPCS: XSS ok.
diff --git a/output/html/http.php b/output/html/http.php
index fce8fe380..650b6f969 100644
--- a/output/html/http.php
+++ b/output/html/http.php
@@ -185,7 +185,9 @@ public function output() {
 				echo esc_html( $response );
 
 				if ( $show_toggle ) {
-					echo self::build_toggler(); // WPCS: XSS ok;
+					// translators: HTTP query method, queried URL, HTTP response.
+					$context = sprintf( __( '%1$s to %2$s with status %3$s', 'query-monitor' ), $row['args']['method'], $url, $response );
+					echo self::build_toggler( $context ); // WPCS: XSS ok;
 					echo '<ul class="qm-toggled">';
 				}
 
@@ -245,7 +247,7 @@ public function output() {
 				echo '<td class="qm-has-toggle qm-nowrap qm-ltr">';
 
 				if ( ! empty( $stack ) ) {
-					echo self::build_toggler(); // WPCS: XSS ok;
+					echo self::build_toggler( $caller ); // WPCS: XSS ok;
 				}
 
 				echo '<ol>';
diff --git a/output/html/languages.php b/output/html/languages.php
index 34baf85ba..1b785e098 100644
--- a/output/html/languages.php
+++ b/output/html/languages.php
@@ -117,7 +117,7 @@ public function output() {
 						echo '</td>';
 					} else {
 						echo '<td class="qm-nowrap qm-ltr qm-has-toggle">';
-						echo self::build_toggler(); // WPCS: XSS ok;
+						echo self::build_toggler( $mofile['caller']['display'] ); // WPCS: XSS ok;
 						echo '<ol>';
 						echo '<li>';
 						// undefined:
diff --git a/output/html/logger.php b/output/html/logger.php
index 727d006a2..9e0cdfa8e 100644
--- a/output/html/logger.php
+++ b/output/html/logger.php
@@ -145,7 +145,7 @@ public function output() {
 			echo '<td class="qm-has-toggle qm-nowrap qm-ltr">';
 
 			if ( ! empty( $stack ) ) {
-				echo self::build_toggler(); // WPCS: XSS ok;
+				echo self::build_toggler( $caller ); // WPCS: XSS ok;
 			}
 
 			echo '<ol>';
diff --git a/output/html/multisite.php b/output/html/multisite.php
index 7163e6c0e..4088d1a14 100644
--- a/output/html/multisite.php
+++ b/output/html/multisite.php
@@ -122,7 +122,7 @@ public function output() {
 			echo '<td class="qm-has-toggle qm-nowrap qm-ltr">';
 
 			if ( ! empty( $stack ) ) {
-				echo self::build_toggler(); // WPCS: XSS ok;
+				echo self::build_toggler( $caller ); // WPCS: XSS ok;
 			}
 
 			echo '<ol>';
diff --git a/output/html/php_errors.php b/output/html/php_errors.php
index f119d5468..4068243f2 100644
--- a/output/html/php_errors.php
+++ b/output/html/php_errors.php
@@ -147,7 +147,7 @@ public function output() {
 					echo '<td class="qm-row-caller qm-row-stack qm-nowrap qm-ltr qm-has-toggle">';
 
 					if ( ! empty( $stack ) ) {
-						echo self::build_toggler(); // WPCS: XSS ok;
+						echo self::build_toggler( $error['filename'] ); // WPCS: XSS ok;
 					}
 
 					echo '<ol>';
diff --git a/output/html/timing.php b/output/html/timing.php
index 04faa8a95..1a53c819e 100644
--- a/output/html/timing.php
+++ b/output/html/timing.php
@@ -82,7 +82,7 @@ public function output() {
 					echo '</td>';
 				} else {
 					echo '<td class="qm-ltr qm-has-toggle">';
-					echo self::build_toggler(); // WPCS: XSS ok;
+					echo self::build_toggler( $row['function'] ); // WPCS: XSS ok;
 					echo '<ol>';
 					echo '<li>';
 					echo $file; // WPCS: XSS ok.
@@ -167,7 +167,7 @@ public function output() {
 					echo '</td>';
 				} else {
 					echo '<td class="qm-ltr qm-has-toggle">';
-					echo self::build_toggler(); // WPCS: XSS ok;
+					echo self::build_toggler( $row['function'] ); // WPCS: XSS ok;
 					echo '<ol>';
 					echo '<li>';
 					echo $file; // WPCS: XSS ok.
diff --git a/output/html/transients.php b/output/html/transients.php
index 072fd2f00..4a5559039 100644
--- a/output/html/transients.php
+++ b/output/html/transients.php
@@ -100,7 +100,7 @@ public function output() {
 				echo '<td class="qm-has-toggle qm-nowrap qm-ltr">';
 
 				if ( ! empty( $stack ) ) {
-					echo self::build_toggler(); // WPCS: XSS ok;
+					echo self::build_toggler( $caller ); // WPCS: XSS ok;
 				}
 
 				echo '<ol>';

From d6c1e1328495c8bc0f12d4e65dacd3b75195945f Mon Sep 17 00:00:00 2001
From: Joe Dolson <design@joedolson.com>
Date: Wed, 22 Feb 2023 13:03:46 -0600
Subject: [PATCH 4/6] Add translator comment

---
 output/Html.php | 1 +
 1 file changed, 1 insertion(+)

diff --git a/output/Html.php b/output/Html.php
index f1729f987..5ed54323e 100644
--- a/output/Html.php
+++ b/output/Html.php
@@ -392,6 +392,7 @@ protected function build_sorter( $heading = '' ) {
 	 * @return string Markup for the column sorter controls.
 	 */
 	protected static function build_toggler( $context ) {
+		// translators: context about what this button toggles.
 		$out = '<button class="qm-toggle" data-on="+" data-off="-" aria-expanded="false" aria-label="' . sprintf( esc_attr__( 'View details for %s', 'query-monitor' ), strip_tags( $context ) ) . '"><span aria-hidden="true">+</span></button>';
 		return $out;
 	}

From f5836c71a076380e5b510b718fac5d1362d2cf7c Mon Sep 17 00:00:00 2001
From: Joe Dolson <design@joedolson.com>
Date: Wed, 22 Feb 2023 13:04:23 -0600
Subject: [PATCH 5/6] Number translator arguments

---
 output/html/http.php | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/output/html/http.php b/output/html/http.php
index 650b6f969..c56268075 100644
--- a/output/html/http.php
+++ b/output/html/http.php
@@ -185,7 +185,7 @@ public function output() {
 				echo esc_html( $response );
 
 				if ( $show_toggle ) {
-					// translators: HTTP query method, queried URL, HTTP response.
+					// translators: 1) HTTP query method, 2) queried URL, 3) HTTP response.
 					$context = sprintf( __( '%1$s to %2$s with status %3$s', 'query-monitor' ), $row['args']['method'], $url, $response );
 					echo self::build_toggler( $context ); // WPCS: XSS ok;
 					echo '<ul class="qm-toggled">';

From 03596e30a60b3901dd3bb0342a6da57b08489c46 Mon Sep 17 00:00:00 2001
From: John Blackbourn <johnbillion@gmail.com>
Date: Thu, 23 Feb 2023 15:42:19 +0100
Subject: [PATCH 6/6] Add a fallback for when toggler context isn't provided.

---
 output/Html.php | 22 ++++++++++++++++------
 1 file changed, 16 insertions(+), 6 deletions(-)

diff --git a/output/Html.php b/output/Html.php
index 5ed54323e..68909d596 100644
--- a/output/Html.php
+++ b/output/Html.php
@@ -387,14 +387,24 @@ protected function build_sorter( $heading = '' ) {
 	/**
 	 * Returns a toggle control. Safe for output.
 	 *
-	 * @param string $context Information to uniquely label the toggle button for screen readers.
-	 *
+	 * @param string $context Optional. Information to uniquely label the toggle button for screen readers.
 	 * @return string Markup for the column sorter controls.
 	 */
-	protected static function build_toggler( $context ) {
-		// translators: context about what this button toggles.
-		$out = '<button class="qm-toggle" data-on="+" data-off="-" aria-expanded="false" aria-label="' . sprintf( esc_attr__( 'View details for %s', 'query-monitor' ), strip_tags( $context ) ) . '"><span aria-hidden="true">+</span></button>';
-		return $out;
+	protected static function build_toggler( $context = '' ) {
+		if ( $context !== '' ) {
+			$label = sprintf(
+				/* translators: Context about what this button toggles */
+				__( 'Toggle more information for %s', 'query-monitor' ),
+				wp_strip_all_tags( $context )
+			);
+		} else {
+			$label = __( 'Toggle more information', 'query-monitor' );
+		}
+
+		return sprintf(
+			'<button class="qm-toggle" data-on="+" data-off="-" aria-expanded="false" aria-label="%s"><span aria-hidden="true">+</span></button>',
+			esc_attr( $label )
+		);
 	}
 
 	/**