From ed42e2fae234f34f99c62ffe0d32ad6fbeffe48e Mon Sep 17 00:00:00 2001
From: Volker E <volker.e@wikimedia.org>
Date: Fri, 16 Nov 2018 15:27:19 -0800
Subject: [PATCH] HTMLCheckMatrix/CheckMatrixWidget: Adding `th` to `thead`

Improving semantics, which also reflects in screen readers.

Change-Id: I552a61a6e1892ebed86d9434366bd932f6f7a602
---
 includes/htmlform/fields/HTMLCheckMatrix.php                | 5 +++--
 includes/widget/CheckMatrixWidget.php                       | 6 +++---
 resources/src/mediawiki.htmlform.ooui.styles.less           | 4 ++++
 resources/src/mediawiki.htmlform.styles/styles.css          | 3 +++
 .../src/mediawiki.widgets/mw.widgets.CheckMatrixWidget.js   | 2 +-
 5 files changed, 14 insertions(+), 6 deletions(-)

diff --git a/includes/htmlform/fields/HTMLCheckMatrix.php b/includes/htmlform/fields/HTMLCheckMatrix.php
index 281d348b9b..274d2c090e 100644
--- a/includes/htmlform/fields/HTMLCheckMatrix.php
+++ b/includes/htmlform/fields/HTMLCheckMatrix.php
@@ -91,9 +91,10 @@ class HTMLCheckMatrix extends HTMLFormField implements HTMLNestedFilterable {
 		// Build the column headers
 		$headerContents = Html::rawElement( 'td', [], "\u{00A0}" );
 		foreach ( $columns as $columnLabel => $columnTag ) {
-			$headerContents .= Html::rawElement( 'td', [], $columnLabel );
+			$headerContents .= Html::rawElement( 'th', [], $columnLabel );
 		}
-		$tableContents .= Html::rawElement( 'tr', [], "\n$headerContents\n" );
+		$thead = Html::rawElement( 'tr', [], "\n$headerContents\n" );
+		$tableContents .= Html::rawElement( 'thead', [], "\n$thead\n" );
 
 		$tooltipClass = 'mw-icon-question';
 		if ( isset( $this->mParams['tooltip-class'] ) ) {
diff --git a/includes/widget/CheckMatrixWidget.php b/includes/widget/CheckMatrixWidget.php
index 017e616571..797a81fb1c 100644
--- a/includes/widget/CheckMatrixWidget.php
+++ b/includes/widget/CheckMatrixWidget.php
@@ -67,7 +67,7 @@ class CheckMatrixWidget extends \OOUI\Widget {
 		$tr->appendContent( $this->getCellTag( "\u{00A0}" ) );
 		foreach ( $this->columns as $columnLabel => $columnTag ) {
 			$tr->appendContent(
-				$this->getCellTag( new \OOUI\HtmlSnippet( $columnLabel ) )
+				$this->getCellTag( new \OOUI\HtmlSnippet( $columnLabel ), 'th' )
 			);
 		}
 		$thead->appendContent( $tr );
@@ -132,8 +132,8 @@ class CheckMatrixWidget extends \OOUI\Widget {
 	 * @param  mixed $content Content for the <td> cell
 	 * @return \OOUI\Tag Resulting cell
 	 */
-	private function getCellTag( $content ) {
-		$cell = new \OOUI\Tag( 'td' );
+	private function getCellTag( $content, $tagElement = 'td' ) {
+		$cell = new \OOUI\Tag( $tagElement );
 		$cell->appendContent( $content );
 		return $cell;
 	}
diff --git a/resources/src/mediawiki.htmlform.ooui.styles.less b/resources/src/mediawiki.htmlform.ooui.styles.less
index 7bec6f4fa7..a5efd7c6e4 100644
--- a/resources/src/mediawiki.htmlform.ooui.styles.less
+++ b/resources/src/mediawiki.htmlform.ooui.styles.less
@@ -36,6 +36,10 @@
 	.mw-htmlform-matrix {
 		border-spacing: 0 2px;
 
+		th {
+			font-weight: normal;
+		}
+
 		td {
 			padding: @ooui-padding-vertical @ooui-padding-horizontal;
 			text-align: center;
diff --git a/resources/src/mediawiki.htmlform.styles/styles.css b/resources/src/mediawiki.htmlform.styles/styles.css
index 0f331ee0d3..1c69a75dff 100644
--- a/resources/src/mediawiki.htmlform.styles/styles.css
+++ b/resources/src/mediawiki.htmlform.styles/styles.css
@@ -19,6 +19,9 @@ table.mw-htmlform-nolabel td.mw-label {
 }
 
 /* HTMLCheckMatrix */
+.mw-htmlform-matrix th {
+	font-weight: normal;
+}
 
 .mw-htmlform-matrix td {
 	padding-left: 0.5em;
diff --git a/resources/src/mediawiki.widgets/mw.widgets.CheckMatrixWidget.js b/resources/src/mediawiki.widgets/mw.widgets.CheckMatrixWidget.js
index 73ee8404bf..ba576fb144 100644
--- a/resources/src/mediawiki.widgets/mw.widgets.CheckMatrixWidget.js
+++ b/resources/src/mediawiki.widgets/mw.widgets.CheckMatrixWidget.js
@@ -44,7 +44,7 @@
 		// Iterate over the columns object (ignore the value)
 		// eslint-disable-next-line no-restricted-properties
 		$.each( this.columns, function ( columnLabel ) {
-			$headRow.append( $( '<td>' ).html( columnLabel ) );
+			$headRow.append( $( '<th>' ).html( columnLabel ) );
 		} );
 		$thead.append( $headRow );
 
-- 
2.20.1