From 0b86c3684b10777d5a51126f0988de6fda91e074 Mon Sep 17 00:00:00 2001
From: Thiemo Kreuz <thiemo.kreuz@wikimedia.de>
Date: Tue, 19 Feb 2019 15:12:06 +0100
Subject: [PATCH] debug: Add basic accessibility support to debug console

The scope tells user agents what the meaning of vertical vs. horizontal
table headers is.

The summary is for screen readers only and usually not visible in
regular web browsers.

Change-Id: I4a2141a462719cfc978ffc18a8c6dfb2bc3cf22d
---
 resources/src/mediawiki.debug/debug.js | 12 ++++++------
 1 file changed, 6 insertions(+), 6 deletions(-)

diff --git a/resources/src/mediawiki.debug/debug.js b/resources/src/mediawiki.debug/debug.js
index 189363f236..5d4f944aad 100644
--- a/resources/src/mediawiki.debug/debug.js
+++ b/resources/src/mediawiki.debug/debug.js
@@ -298,10 +298,10 @@
 			$table = $( '<table>' ).attr( 'id', 'mw-debug-querylist' );
 
 			$( '<tr>' )
-				.append( $( '<th>' ).text( '#' ).css( 'width', '4em' ) )
-				.append( $( '<th>' ).text( 'SQL' ) )
-				.append( $( '<th>' ).text( 'Time' ).css( 'width', '8em' ) )
-				.append( $( '<th>' ).text( 'Call' ).css( 'width', '18em' ) )
+				.append( $( '<th>' ).attr( 'scope', 'col' ).text( '#' ).css( 'width', '4em' ) )
+				.append( $( '<th>' ).attr( 'scope', 'col' ).text( 'SQL' ) )
+				.append( $( '<th>' ).attr( 'scope', 'col' ).text( 'Time' ).css( 'width', '8em' ) )
+				.append( $( '<th>' ).attr( 'scope', 'col' ).text( 'Call' ).css( 'width', '18em' ) )
 				.appendTo( $table );
 
 			for ( i = 0, length = this.data.queries.length; i < length; i += 1 ) {
@@ -352,12 +352,12 @@
 				$table = $( '<table>' ).appendTo( $unit );
 
 				$( '<tr>' )
-					.html( '<th>Key</th><th>Value</th>' )
+					.html( '<th scope="col">Key</th><th scope="col">Value</th>' )
 					.appendTo( $table );
 
 				for ( key in data ) {
 					$( '<tr>' )
-						.append( $( '<th>' ).text( key ) )
+						.append( $( '<th>' ).attr( 'scope', 'row' ).text( key ) )
 						.append( $( '<td>' ).text( data[ key ] ) )
 						.appendTo( $table );
 				}
-- 
2.20.1