HTMLCheckMatrix/CheckMatrixWidget: Adding `th` to `thead`

Improving semantics, which also reflects in screen readers.

Change-Id: I552a61a6e1892ebed86d9434366bd932f6f7a602

diff --git a/includes/htmlform/fields/HTMLCheckMatrix.php b/includes/htmlform/fields/HTMLCheckMatrix.php
index 281d348..274d2c0 100644 (file)
--- 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 017e616..797a81f 100644 (file)
--- 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 7bec6f4..a5efd7c 100644 (file)
--- 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 0f331ee..1c69a75 100644 (file)
--- 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 73ee840..ba576fb 100644 (file)
--- 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 );