HTMLCheckMatrix: Treat row/column labels as HTML in OOUI mode

We were incorrectly escaping them. They are supposed to be already
correctly escaped HTML.

Also improve documentation and really allow 'tooltips' to be optional.

Bug: T203325
Change-Id: I1f92479bf1989e1529b18b8b206b61db1257eb87

diff --git a/includes/htmlform/fields/HTMLCheckMatrix.php b/includes/htmlform/fields/HTMLCheckMatrix.php
index e5e5cdd..281d348 100644 (file)
--- a/includes/htmlform/fields/HTMLCheckMatrix.php
+++ b/includes/htmlform/fields/HTMLCheckMatrix.php
@@ -9,17 +9,18 @@
  *
  * Options:
  *   - columns
- *     - Required list of columns in the matrix.
+ *     - Required associative array mapping column labels (as HTML) to their tags.
  *   - rows
- *     - Required list of rows in the matrix.
+ *     - Required associative array mapping row labels (as HTML) to their tags.
  *   - force-options-on
- *     - Accepts array of column-row tags to be displayed as enabled but unavailable to change
+ *     - Array of column-row tags to be displayed as enabled but unavailable to change.
  *   - force-options-off
- *     - Accepts array of column-row tags to be displayed as disabled but unavailable to change.
+ *     - Array of column-row tags to be displayed as disabled but unavailable to change.
  *   - tooltips
- *     - Optional array mapping row label to tooltip content
+ *     - Optional associative array mapping row labels to tooltips (as text, will be escaped).
  *   - tooltip-class
  *     - Optional CSS class used on tooltip container span. Defaults to mw-icon-question.
+ *       Not used by OOUI form fields.
  */
 class HTMLCheckMatrix extends HTMLFormField implements HTMLNestedFilterable {
        static private $requiredParams = [
@@ -158,10 +159,10 @@ class HTMLCheckMatrix extends HTMLFormField implements HTMLNestedFilterable {
                                'id' => $this->mID,
                                'rows' => $this->mParams['rows'],
                                'columns' => $this->mParams['columns'],
-                               'tooltips' => $this->mParams['tooltips'],
+                               'tooltips' => $this->mParams['tooltips'] ?? [],
                                'forcedOff' => $this->mParams['force-options-off'] ?? [],
                                'forcedOn' => $this->mParams['force-options-on'] ?? [],
-                               'values' => $value
+                               'values' => $value,
                        ] + OOUI\Element::configFromHtmlAttributes( $attribs )
                );
        }

diff --git a/includes/widget/CheckMatrixWidget.php b/includes/widget/CheckMatrixWidget.php
index 510b352..8038c54 100644 (file)
--- a/includes/widget/CheckMatrixWidget.php
+++ b/includes/widget/CheckMatrixWidget.php
@@ -28,17 +28,15 @@ class CheckMatrixWidget extends \OOUI\Widget {
         *
         * @param array $config Configuration array with the following options:
         *   - columns
-        *     - Required list of columns in the matrix.
+        *     - Required associative array mapping column labels (as HTML) to their tags.
         *   - rows
-        *     - Required list of rows in the matrix.
+        *     - Required associative array mapping row labels (as HTML) to their tags.
         *   - force-options-on
-        *     - Accepts array of column-row tags to be displayed as enabled but unavailable to change
+        *     - Array of column-row tags to be displayed as enabled but unavailable to change.
         *   - force-options-off
-        *     - Accepts array of column-row tags to be displayed as disabled but unavailable to change.
+        *     - Array of column-row tags to be displayed as disabled but unavailable to change.
         *   - tooltips
-        *     - Optional array mapping row label to tooltip content
-        *   - tooltip-class
-        *     - Optional CSS class used on tooltip container span. Defaults to mw-icon-question.
+        *     - Optional associative array mapping row labels to tooltips (as text, will be escaped).
         */
        public function __construct( array $config = [] ) {
                // Configuration initialization
@@ -65,7 +63,7 @@ class CheckMatrixWidget extends \OOUI\Widget {
                $tr->appendContent( $this->getCellTag( "\u{00A0}" ) );
                foreach ( $this->columns as $columnLabel => $columnTag ) {
                        $tr->appendContent(
-                               $this->getCellTag( $columnLabel )
+                               $this->getCellTag( new \OOUI\HtmlSnippet( $columnLabel ) )
                        );
                }
                $table->appendContent( $tr );
@@ -86,7 +84,7 @@ class CheckMatrixWidget extends \OOUI\Widget {
         * Get a formatted table row for the option, with
         * a checkbox widget.
         *
-        * @param  string $label Row label
+        * @param  string $label Row label (as HTML)
         * @param  string $tag   Row tag name
         * @return \OOUI\Tag The resulting table row
         */
@@ -98,7 +96,7 @@ class CheckMatrixWidget extends \OOUI\Widget {
                $labelField = new \OOUI\FieldLayout(
                        new \OOUI\Widget(), // Empty widget, since we don't have the checkboxes here
                        [
-                               'label' => $label,
+                               'label' => new \OOUI\HtmlSnippet( $label ),
                                'align' => 'inline',
                        ] + $labelFieldConfig
                );
@@ -125,7 +123,7 @@ class CheckMatrixWidget extends \OOUI\Widget {
        /**
         * Get an individual cell tag with requested content
         *
-        * @param  string $content Content for the <td> cell
+        * @param  mixed $content Content for the <td> cell
         * @return \OOUI\Tag Resulting cell
         */
        private function getCellTag( $content ) {

diff --git a/resources/src/mediawiki.widgets/mw.widgets.CheckMatrixWidget.js b/resources/src/mediawiki.widgets/mw.widgets.CheckMatrixWidget.js
index e13c6fa..21b4f10 100644 (file)
--- a/resources/src/mediawiki.widgets/mw.widgets.CheckMatrixWidget.js
+++ b/resources/src/mediawiki.widgets/mw.widgets.CheckMatrixWidget.js
@@ -7,15 +7,16 @@
         *
         * @constructor
         * @param {Object} [config] Configuration options
-        * @cfg {Object} columns Required object representing the column labels and associated
-        *  tags in the matrix.
-        * @cfg {Object} rows Required object representing the row labels and associated
-        *  tags in the matrix.
-        * @cfg {string[]} [forcedOn] An array of column-row tags to be displayed as
-        *  enabled but unavailable to change
-        * @cfg {string[]} [forcedOff] An array of column-row tags to be displayed as
-        *  disnabled but unavailable to change
-        * @cfg {Object} Object mapping row label to tooltip content
+        * @cfg {Object} columns Required object mapping column labels (as HTML) to
+        *  their tags.
+        * @cfg {Object} rows Required object mapping row labels (as HTML) to their
+        *  tags.
+        * @cfg {string[]} [forcedOn] Array of column-row tags to be displayed as
+        *  enabled but unavailable to change.
+        * @cfg {string[]} [forcedOff] Array of column-row tags to be displayed as
+        *  disabled but unavailable to change.
+        * @cfg {Object} [tooltips] Optional object mapping row labels to tooltips
+        *  (as text, will be escaped).
         */
        mw.widgets.CheckMatrixWidget = function MWWCheckMatrixWidget( config ) {
                var $headRow = $( '<tr>' ),
@@ -36,11 +37,11 @@
                this.forcedOff = config.forcedOff || [];
 
                // Build header
-               $headRow.append( $( '<td>' ).html( '&#160;' ) );
+               $headRow.append( $( '<td>' ).text( '\u00A0' ) );
 
                // Iterate over the columns object (ignore the value)
                $.each( this.columns, function ( columnLabel ) {
-                       $headRow.append( $( '<td>' ).text( columnLabel ) );
+                       $headRow.append( $( '<td>' ).html( columnLabel ) );
                } );
                $table.append( $headRow );
 
@@ -50,7 +51,7 @@
                                labelField = new OO.ui.FieldLayout(
                                        new OO.ui.Widget(), // Empty widget, since we don't have the checkboxes here
                                        {
-                                               label: rowLabel,
+                                               label: new OO.ui.HtmlSnippet( rowLabel ),
                                                help: widget.tooltips[ rowLabel ],
                                                align: 'inline'
                                        }