From: Thiemo Kreuz <thiemo.kreuz@wikimedia.de>
Date: Tue, 19 Feb 2019 14:12:06 +0000 (+0100)
Subject: debug: Add basic accessibility support to debug console
X-Git-Tag: 1.34.0-rc.0~2720^2
X-Git-Url: http://git.cyclocoop.org/?a=commitdiff_plain;h=0b86c3684b10777d5a51126f0988de6fda91e074;p=lhc%2Fweb%2Fwiklou.git

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
---

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 );
 				}