Improving semantics, which also reflects in screen readers.
Change-Id: I552a61a6e1892ebed86d9434366bd932f6f7a602
// 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'] ) ) {
$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 );
* @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;
}
.mw-htmlform-matrix {
border-spacing: 0 2px;
+ th {
+ font-weight: normal;
+ }
+
td {
padding: @ooui-padding-vertical @ooui-padding-horizontal;
text-align: center;
}
/* HTMLCheckMatrix */
+.mw-htmlform-matrix th {
+ font-weight: normal;
+}
.mw-htmlform-matrix td {
padding-left: 0.5em;
// 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 );