Jforrester has uploaded a new change for review. ( 
https://gerrit.wikimedia.org/r/369478 )

Change subject: Update OOjs UI to v0.22.4
......................................................................

Update OOjs UI to v0.22.4

Release notes:
 
https://phabricator.wikimedia.org/diffusion/GOJU/browse/master/History.md;v0.22.4

Change-Id: I505e7c612b70a949d2b101172964bd7433fb8d5e
---
M composer.json
M composer.lock
M composer/installed.json
M oojs/oojs-ui/History.md
A oojs/oojs-ui/bin/dependencytree.rb
M oojs/oojs-ui/demos/classes/DraggableHandledItemWidget.js
M oojs/oojs-ui/demos/classes/DraggableItemWidget.js
A oojs/oojs-ui/demos/classes/DynamicLabelTextInputWidget.js
A oojs/oojs-ui/demos/classes/SimpleWidget.css
A oojs/oojs-ui/demos/classes/SimpleWidget.js
M oojs/oojs-ui/demos/index.html
M oojs/oojs-ui/demos/pages/widgets.js
M oojs/oojs-ui/demos/pages/widgets.php
M oojs/oojs-ui/demos/styles/demo.css
M oojs/oojs-ui/i18n/as.json
M oojs/oojs-ui/i18n/bs.json
M oojs/oojs-ui/i18n/pt-br.json
M oojs/oojs-ui/package.json
M oojs/oojs-ui/php/Tag.php
M oojs/oojs-ui/php/Widget.php
M oojs/oojs-ui/php/layouts/FieldLayout.php
M oojs/oojs-ui/php/layouts/FieldsetLayout.php
M oojs/oojs-ui/php/mixins/AccessKeyedElement.php
M oojs/oojs-ui/php/mixins/TabIndexedElement.php
M oojs/oojs-ui/php/mixins/TitledElement.php
25 files changed, 412 insertions(+), 125 deletions(-)


  git pull ssh://gerrit.wikimedia.org:29418/mediawiki/vendor 
refs/changes/78/369478/1

diff --git a/composer.json b/composer.json
index 8410b2d..2dcfd8d 100644
--- a/composer.json
+++ b/composer.json
@@ -45,7 +45,7 @@
                "monolog/monolog": "1.22.1",
                "mustangostang/spyc": "0.6.2",
                "nmred/kafka-php": "0.1.5",
-               "oojs/oojs-ui": "0.22.3",
+               "oojs/oojs-ui": "0.22.4",
                "oyejorge/less.php": "1.7.0.14",
                "pear/console_getopt": "1.4.1",
                "pear/mail": "1.4.1",
diff --git a/composer.lock b/composer.lock
index f2711f6..355956c 100644
--- a/composer.lock
+++ b/composer.lock
@@ -4,7 +4,7 @@
         "Read more about it at 
https://getcomposer.org/doc/01-basic-usage.md#composer-lock-the-lock-file";,
         "This file is @generated automatically"
     ],
-    "content-hash": "d3e0811f4f6f8eb8bd96e36bd53702ea",
+    "content-hash": "301c4a097e044e617ab5b804f5b99a22",
     "packages": [
         {
             "name": "composer/semver",
@@ -516,16 +516,16 @@
         },
         {
             "name": "oojs/oojs-ui",
-            "version": "v0.22.3",
+            "version": "v0.22.4",
             "source": {
                 "type": "git",
                 "url": "https://github.com/wikimedia/oojs-ui.git";,
-                "reference": "796f52473294e923d0133bb1b0b3629d9b1332bc"
+                "reference": "bb1b15c47835468f133a56aa56a721f8793c61f7"
             },
             "dist": {
                 "type": "zip",
-                "url": 
"https://api.github.com/repos/wikimedia/oojs-ui/zipball/796f52473294e923d0133bb1b0b3629d9b1332bc";,
-                "reference": "796f52473294e923d0133bb1b0b3629d9b1332bc",
+                "url": 
"https://api.github.com/repos/wikimedia/oojs-ui/zipball/bb1b15c47835468f133a56aa56a721f8793c61f7";,
+                "reference": "bb1b15c47835468f133a56aa56a721f8793c61f7",
                 "shasum": ""
             },
             "require": {
@@ -591,7 +591,7 @@
             ],
             "description": "Provides library of common widgets, layouts, and 
windows.",
             "homepage": "https://www.mediawiki.org/wiki/OOjs_UI";,
-            "time": "2017-07-11T21:50:03+00:00"
+            "time": "2017-08-01T19:55:30+00:00"
         },
         {
             "name": "oyejorge/less.php",
diff --git a/composer/installed.json b/composer/installed.json
index 36c3a06..f37cf29 100644
--- a/composer/installed.json
+++ b/composer/installed.json
@@ -2161,87 +2161,6 @@
         ]
     },
     {
-        "name": "oojs/oojs-ui",
-        "version": "v0.22.3",
-        "version_normalized": "0.22.3.0",
-        "source": {
-            "type": "git",
-            "url": "https://github.com/wikimedia/oojs-ui.git";,
-            "reference": "796f52473294e923d0133bb1b0b3629d9b1332bc"
-        },
-        "dist": {
-            "type": "zip",
-            "url": 
"https://api.github.com/repos/wikimedia/oojs-ui/zipball/796f52473294e923d0133bb1b0b3629d9b1332bc";,
-            "reference": "796f52473294e923d0133bb1b0b3629d9b1332bc",
-            "shasum": ""
-        },
-        "require": {
-            "mediawiki/at-ease": "1.1.0",
-            "php": ">=5.5.9"
-        },
-        "require-dev": {
-            "jakub-onderka/php-parallel-lint": "0.9.2",
-            "mediawiki/mediawiki-codesniffer": "0.10.0",
-            "phpunit/phpunit": "4.8.21"
-        },
-        "time": "2017-07-11T21:50:03+00:00",
-        "type": "library",
-        "installation-source": "dist",
-        "autoload": {
-            "classmap": [
-                "php/"
-            ]
-        },
-        "notification-url": "https://packagist.org/downloads/";,
-        "license": [
-            "MIT"
-        ],
-        "authors": [
-            {
-                "name": "Timo Tijhof",
-                "email": "krinklem...@gmail.com"
-            },
-            {
-                "name": "Bartosz Dziewoński",
-                "email": "matma....@gmail.com"
-            },
-            {
-                "name": "Ed Sanders",
-                "email": "esand...@wikimedia.org"
-            },
-            {
-                "name": "James D. Forrester",
-                "email": "jforres...@wikimedia.org"
-            },
-            {
-                "name": "Kirsten Menger-Anderson",
-                "email": "kmen...@wikimedia.org"
-            },
-            {
-                "name": "Rob Moen",
-                "email": "rm...@wikimedia.org"
-            },
-            {
-                "name": "Roan Kattouw",
-                "email": "r...@wikimedia.org"
-            },
-            {
-                "name": "Trevor Parscal",
-                "email": "tre...@wikimedia.org"
-            },
-            {
-                "name": "Kunal Mehta",
-                "email": "lego...@gmail.com"
-            },
-            {
-                "name": "Prateek Saxena",
-                "email": "prtks...@gmail.com"
-            }
-        ],
-        "description": "Provides library of common widgets, layouts, and 
windows.",
-        "homepage": "https://www.mediawiki.org/wiki/OOjs_UI";
-    },
-    {
         "name": "wikimedia/composer-merge-plugin",
         "version": "v1.4.1",
         "version_normalized": "1.4.1.0",
@@ -2404,5 +2323,86 @@
         ],
         "description": "Compute a relative filepath between two paths.",
         "homepage": "https://www.mediawiki.org/wiki/RelPath";
+    },
+    {
+        "name": "oojs/oojs-ui",
+        "version": "v0.22.4",
+        "version_normalized": "0.22.4.0",
+        "source": {
+            "type": "git",
+            "url": "https://github.com/wikimedia/oojs-ui.git";,
+            "reference": "bb1b15c47835468f133a56aa56a721f8793c61f7"
+        },
+        "dist": {
+            "type": "zip",
+            "url": 
"https://api.github.com/repos/wikimedia/oojs-ui/zipball/bb1b15c47835468f133a56aa56a721f8793c61f7";,
+            "reference": "bb1b15c47835468f133a56aa56a721f8793c61f7",
+            "shasum": ""
+        },
+        "require": {
+            "mediawiki/at-ease": "1.1.0",
+            "php": ">=5.5.9"
+        },
+        "require-dev": {
+            "jakub-onderka/php-parallel-lint": "0.9.2",
+            "mediawiki/mediawiki-codesniffer": "0.10.0",
+            "phpunit/phpunit": "4.8.21"
+        },
+        "time": "2017-08-01T19:55:30+00:00",
+        "type": "library",
+        "installation-source": "dist",
+        "autoload": {
+            "classmap": [
+                "php/"
+            ]
+        },
+        "notification-url": "https://packagist.org/downloads/";,
+        "license": [
+            "MIT"
+        ],
+        "authors": [
+            {
+                "name": "Timo Tijhof",
+                "email": "krinklem...@gmail.com"
+            },
+            {
+                "name": "Bartosz Dziewoński",
+                "email": "matma....@gmail.com"
+            },
+            {
+                "name": "Ed Sanders",
+                "email": "esand...@wikimedia.org"
+            },
+            {
+                "name": "James D. Forrester",
+                "email": "jforres...@wikimedia.org"
+            },
+            {
+                "name": "Kirsten Menger-Anderson",
+                "email": "kmen...@wikimedia.org"
+            },
+            {
+                "name": "Rob Moen",
+                "email": "rm...@wikimedia.org"
+            },
+            {
+                "name": "Roan Kattouw",
+                "email": "r...@wikimedia.org"
+            },
+            {
+                "name": "Trevor Parscal",
+                "email": "tre...@wikimedia.org"
+            },
+            {
+                "name": "Kunal Mehta",
+                "email": "lego...@gmail.com"
+            },
+            {
+                "name": "Prateek Saxena",
+                "email": "prtks...@gmail.com"
+            }
+        ],
+        "description": "Provides library of common widgets, layouts, and 
windows.",
+        "homepage": "https://www.mediawiki.org/wiki/OOjs_UI";
     }
 ]
diff --git a/oojs/oojs-ui/History.md b/oojs/oojs-ui/History.md
index 8be0c72..f427087 100644
--- a/oojs/oojs-ui/History.md
+++ b/oojs/oojs-ui/History.md
@@ -1,4 +1,40 @@
 # OOjs UI Release History
+## v0.22.4 / 2017-08-01
+### Features
+* CheckboxMultiselectInputWidget: setValue when CheckboxMultiselect changes 
(Prateek Saxena)
+* FieldLayout: Show widget's accesskey in our title (Bartosz Dziewoński)
+* TextInputWidget: When positioning label, don't clear padding if we will set 
it again (Bartosz Dziewoński)
+* TitledElement: When an AccessKeyedElement, show access key in the title 
(Bartosz Dziewoński)
+
+### Styles
+* icons: Vertically align 'play' & 'stop' icons (Volker E.)
+* Apex theme: Add focus styles to Tag-/CapsuleMultiselectWidget (Volker E.)
+* Apex theme: Add focus styles to frameless buttons (Volker E.)
+* Apex theme: Add play icon (copied from WikimediaUI theme) (Roan Kattouw)
+* Apex theme: Align ButtonGroup-/ButtonSelectWidget focus logic to WikimediaUI 
(Volker E.)
+* Apex theme: Align Dropdown*Widget's focus state with other widgets (Volker 
E.)
+* Apex theme: Align TextInputWidget focus to variablized way (Volker E.)
+* Apex theme: Align ToggleSwitchWidget focus style to other widgets (Volker E.)
+* Apex theme: Improve alignment of TextInputWidget and its elements (Volker E.)
+* Apex theme: Introduce framed button focus indication (Volker E.)
+* Apex theme: Replace and unify `border-radius` with variables (Volker E.)
+* WikimediaUI theme: Set ButtonElement's height per default (Volker E.)
+* WikimediaUI theme: Work around a Firefox rendering bug for checkboxes and 
radios (Bartosz Dziewoński)
+
+### Code
+* DraggableGroupElement: Remove ARIA roles & attributes (Volker E.)
+* FieldsetLayout: Use `<legend>` now that Chrome 55 bug is less important 
(James D. Forrester)
+* Apex theme: Align remaining values to coding convention (Volker E.)
+* WikimediaUI theme: Align `*-fallback` var with notation elsewhere (Volker E.)
+* WikimediaUI theme: Code comment hygiene (Volker E.)
+* WikimediaUI theme: Directly use the Less values rather than via copy-paste 
(James D. Forrester)
+* demos: Add examples of TextInputWidget with dynamic label (Bartosz 
Dziewoński)
+* demos: Demo.DraggableItemWidget should not inherit from OO.ui.OptionWidget 
(Bartosz Dziewoński)
+* demos: Show example link on `:focus` (Volker E.)
+* doc: Fix some PHPDoc `@return` tags (Ricordisamoa)
+* build: Add a script to print the dependency tree of everything (Bartosz 
Dziewoński)
+
+
 ## v0.22.3 / 2017-07-11
 ### Features
 * Tag-/CapsuleMultiselectWidget: Avoid visual focusTrap feedback (Volker E.)
diff --git a/oojs/oojs-ui/bin/dependencytree.rb 
b/oojs/oojs-ui/bin/dependencytree.rb
new file mode 100644
index 0000000..2662963
--- /dev/null
+++ b/oojs/oojs-ui/bin/dependencytree.rb
@@ -0,0 +1,42 @@
+require 'pp'
+require_relative 'docparser'
+
+$classes = parse_any_path 'src'
+
+def prefix lines
+       if lines.empty?
+               ''
+       else
+               lines.gsub(/^/, '- ')
+       end
+end
+
+def find_class klass_name
+       $classes.find{|c| c[:name] == klass_name }
+end
+
+def describe klass_name
+       out = []
+       out << klass_name
+       klass = find_class klass_name
+       if klass
+               if klass[:parent]
+                       out.push prefix describe klass[:parent]
+               end
+               if klass[:mixins]
+                       klass[:mixins].each do |mixin|
+                               out.push prefix describe mixin
+                       end
+               end
+       end
+       out.select{|a| !a.empty? }.join "\n"
+end
+
+$classes.sort_by!{|klass|
+       # sort by "type" first (widget/layout/element/etc.), then by name
+       
klass[:name].split(/(?=Layout|Widget|Element|Dialog|Tool|Theme)/).reverse
+}
+
+$classes.each{|klass|
+       puts describe klass[:name]
+}
diff --git a/oojs/oojs-ui/demos/classes/DraggableHandledItemWidget.js 
b/oojs/oojs-ui/demos/classes/DraggableHandledItemWidget.js
index 8efffc9..9ded7b5 100644
--- a/oojs/oojs-ui/demos/classes/DraggableHandledItemWidget.js
+++ b/oojs/oojs-ui/demos/classes/DraggableHandledItemWidget.js
@@ -15,5 +15,5 @@
 };
 
 /* Setup */
-OO.inheritClass( Demo.DraggableHandledItemWidget, OO.ui.DecoratedOptionWidget 
);
+OO.inheritClass( Demo.DraggableHandledItemWidget, Demo.SimpleWidget );
 OO.mixinClass( Demo.DraggableHandledItemWidget, OO.ui.mixin.DraggableElement );
diff --git a/oojs/oojs-ui/demos/classes/DraggableItemWidget.js 
b/oojs/oojs-ui/demos/classes/DraggableItemWidget.js
index bc86360..ef5488a 100644
--- a/oojs/oojs-ui/demos/classes/DraggableItemWidget.js
+++ b/oojs/oojs-ui/demos/classes/DraggableItemWidget.js
@@ -15,5 +15,5 @@
 };
 
 /* Setup */
-OO.inheritClass( Demo.DraggableItemWidget, OO.ui.DecoratedOptionWidget );
+OO.inheritClass( Demo.DraggableItemWidget, Demo.SimpleWidget );
 OO.mixinClass( Demo.DraggableItemWidget, OO.ui.mixin.DraggableElement );
diff --git a/oojs/oojs-ui/demos/classes/DynamicLabelTextInputWidget.js 
b/oojs/oojs-ui/demos/classes/DynamicLabelTextInputWidget.js
new file mode 100644
index 0000000..be649fd
--- /dev/null
+++ b/oojs/oojs-ui/demos/classes/DynamicLabelTextInputWidget.js
@@ -0,0 +1,17 @@
+Demo.DynamicLabelTextInputWidget = function DemoDynamicLabelTextInputWidget( 
config ) {
+       // Configuration initialization
+       config = $.extend( { getLabelText: $.noop }, config );
+       // Parent constructor
+       Demo.DynamicLabelTextInputWidget.parent.call( this, config );
+       // Properties
+       this.getLabelText = config.getLabelText;
+       // Events
+       this.connect( this, { change: 'onChange' } );
+       // Initialization
+       this.setLabel( this.getLabelText( this.getValue() ) );
+};
+OO.inheritClass( Demo.DynamicLabelTextInputWidget, OO.ui.TextInputWidget );
+
+Demo.DynamicLabelTextInputWidget.prototype.onChange = function ( value ) {
+       this.setLabel( this.getLabelText( value ) );
+};
diff --git a/oojs/oojs-ui/demos/classes/SimpleWidget.css 
b/oojs/oojs-ui/demos/classes/SimpleWidget.css
new file mode 100644
index 0000000..b7f501f
--- /dev/null
+++ b/oojs/oojs-ui/demos/classes/SimpleWidget.css
@@ -0,0 +1,40 @@
+.demo-simpleWidget {
+       display: block;
+       position: relative;
+       padding: 0.703125em 0.9375em 0.625em;
+       line-height: 1;
+}
+
+.demo-simpleWidget.oo-ui-iconElement .oo-ui-iconElement-icon,
+.demo-simpleWidget.oo-ui-indicatorElement .oo-ui-indicatorElement-indicator {
+       top: 0;
+       height: 100%;
+}
+
+.demo-simpleWidget.oo-ui-iconElement {
+       padding-left: 2.96875em;
+}
+
+.demo-simpleWidget.oo-ui-iconElement .oo-ui-iconElement-icon {
+       position: absolute;
+       bottom: 0;
+       right: 0;
+       left: 0.9375em;
+}
+
+.demo-simpleWidget.oo-ui-labelElement-label {
+       line-height: 1.172em;
+}
+
+.demo-simpleWidget.oo-ui-indicatorElement {
+       padding-right: 2.5em;
+}
+
+.demo-simpleWidget.oo-ui-indicatorElement-indicator {
+       right: 0.9375em;
+}
+
+.demo-simpleWidget.oo-ui-widget-disabled .oo-ui-iconElement-icon,
+.demo-simpleWidget.oo-ui-widget-disabled .oo-ui-indicatorElement-indicator {
+       opacity: 0.51;
+}
diff --git a/oojs/oojs-ui/demos/classes/SimpleWidget.js 
b/oojs/oojs-ui/demos/classes/SimpleWidget.js
new file mode 100644
index 0000000..e5ad631
--- /dev/null
+++ b/oojs/oojs-ui/demos/classes/SimpleWidget.js
@@ -0,0 +1,31 @@
+/**
+ * Very simple custom widget.
+ *
+ * @class
+ * @extends OO.ui.Widget
+ * @mixins OO.ui.mixin.IconElement
+ * @mixins OO.ui.mixin.LabelElement
+ *
+ * @param {Object} [config] Configuration options
+ */
+Demo.SimpleWidget = function DemoSimpleWidget( config ) {
+       // Configuration initialization
+       config = config || {};
+
+       // Parent constructor
+       Demo.SimpleWidget.parent.call( this, config );
+
+       // Mixin constructors
+       OO.ui.mixin.IconElement.call( this, config );
+       OO.ui.mixin.LabelElement.call( this, config );
+
+       // Initialization
+       this.$element
+               .addClass( 'demo-simpleWidget' )
+               .append( this.$icon, this.$label );
+};
+
+/* Setup */
+OO.inheritClass( Demo.SimpleWidget, OO.ui.Widget );
+OO.mixinClass( Demo.SimpleWidget, OO.ui.mixin.IconElement );
+OO.mixinClass( Demo.SimpleWidget, OO.ui.mixin.LabelElement );
diff --git a/oojs/oojs-ui/demos/index.html b/oojs/oojs-ui/demos/index.html
index 94c9203..aa05516 100644
--- a/oojs/oojs-ui/demos/index.html
+++ b/oojs/oojs-ui/demos/index.html
@@ -5,6 +5,7 @@
        <title>OOjs UI Demos</title>
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" href="classes/ButtonStyleShowcaseWidget.css">
+       <link rel="stylesheet" href="classes/SimpleWidget.css">
        <link rel="stylesheet" href="classes/FloatableTest.css">
        <link rel="stylesheet" href="classes/PositionSelectWidget.css">
        <link rel="stylesheet" href="node_modules/prismjs/themes/prism.css">
@@ -21,9 +22,11 @@
        <script src="demo.js"></script>
        <script src="classes/ButtonStyleShowcaseWidget.js"></script>
        <script src="classes/CapsuleNumberPopupMultiselectWidget.js"></script>
+       <script src="classes/SimpleWidget.js"></script>
        <script src="classes/DraggableGroupWidget.js"></script>
        <script src="classes/DraggableItemWidget.js"></script>
        <script src="classes/DraggableHandledItemWidget.js"></script>
+       <script src="classes/DynamicLabelTextInputWidget.js"></script>
        <script src="classes/NumberLookupTextInputWidget.js"></script>
        <script src="classes/UnsupportedSelectFileWidget.js"></script>
        <script src="classes/BookletDialog.js"></script>
diff --git a/oojs/oojs-ui/demos/pages/widgets.js 
b/oojs/oojs-ui/demos/pages/widgets.js
index e9cee0b..915c4f0 100644
--- a/oojs/oojs-ui/demos/pages/widgets.js
+++ b/oojs/oojs-ui/demos/pages/widgets.js
@@ -230,13 +230,24 @@
                                ),
                                new OO.ui.FieldLayout(
                                        new OO.ui.ButtonWidget( {
-                                               label: 'Accesskey: H',
-                                               accessKey: 'h'
+                                               label: 'Access key: G',
+                                               accessKey: 'g'
                                        } ),
                                        {
                                                label: 'ButtonWidget (with 
accesskey)\u200E',
                                                align: 'top',
                                                help: new OO.ui.HtmlSnippet( 
'Notice: Using `accesskey` might <a 
href="http://webaim.org/techniques/keyboard/accesskey"; 
target="_blank">negatively impact screen readers</a>!' )
+                                       }
+                               ),
+                               new OO.ui.FieldLayout(
+                                       new OO.ui.ButtonInputWidget( {
+                                               title: 'Accesskey is added to 
the title.',
+                                               label: 'Access key: H',
+                                               accessKey: 'h'
+                                       } ),
+                                       {
+                                               label: 'ButtonInputWidget (with 
accesskey and title)\u200E',
+                                               align: 'top'
                                        }
                                ),
                                new OO.ui.FieldLayout(
@@ -412,7 +423,7 @@
                                ),
                                new OO.ui.FieldLayout(
                                        new OO.ui.ButtonInputWidget( {
-                                               label: 'Accesskey: I',
+                                               label: 'Access key: I',
                                                accessKey: 'i'
                                        } ),
                                        {
@@ -635,17 +646,17 @@
                                                items: [
                                                        new 
OO.ui.ButtonOptionWidget( {
                                                                data: 'a',
-                                                               label: 
'Accesskey: J',
+                                                               label: 'Access 
key: J',
                                                                accessKey: 'j'
                                                        } ),
                                                        new 
OO.ui.ButtonOptionWidget( {
                                                                data: 'b',
-                                                               label: 
'Accesskey: K',
+                                                               label: 'Access 
key: K',
                                                                accessKey: 'k'
                                                        } ),
                                                        new 
OO.ui.ButtonOptionWidget( {
                                                                data: 'c',
-                                                               label: 
'Accesskey: L',
+                                                               label: 'Access 
key: L',
                                                                accessKey: 'l'
                                                        } )
                                                ]
@@ -859,13 +870,36 @@
                                ),
                                new OO.ui.FieldLayout(
                                        new OO.ui.TextInputWidget( {
-                                               value: 'Accesskey: S',
+                                               value: 'Access key: S',
                                                accessKey: 's'
                                        } ),
                                        {
                                                label: 'TextInputWidget (with 
accesskey)\u200E',
                                                align: 'top',
                                                help: new OO.ui.HtmlSnippet( 
'Notice: Using `accesskey` might <a 
href="http://webaim.org/techniques/keyboard/accesskey"; 
target="_blank">negatively impact screen readers</a>!' )
+                                       }
+                               ),
+                               new OO.ui.FieldLayout(
+                                       new Demo.DynamicLabelTextInputWidget( {
+                                               getLabelText: function ( value 
) {
+                                                       return String( 
value.length );
+                                               }
+                                       } ),
+                                       {
+                                               label: 'TextInputWidget (with 
dynamic label – length)\u200E',
+                                               align: 'top'
+                                       }
+                               ),
+                               new OO.ui.FieldLayout(
+                                       new Demo.DynamicLabelTextInputWidget( {
+                                               maxLength: 300,
+                                               getLabelText: function ( value 
) {
+                                                       return String( 300 - 
value.length );
+                                               }
+                                       } ),
+                                       {
+                                               label: 'TextInputWidget (with 
dynamic label – remaining length)\u200E',
+                                               align: 'top'
                                        }
                                ),
                                new OO.ui.FieldLayout(
@@ -947,6 +981,17 @@
                                        {
                                                align: 'inline',
                                                label: 'CheckboxInputWidget 
(disabled)\u200E'
+                                       }
+                               ),
+                               new OO.ui.FieldLayout(
+                                       new OO.ui.CheckboxInputWidget( {
+                                               selected: true,
+                                               accessKey: 't'
+                                       } ),
+                                       {
+                                               align: 'inline',
+                                               label: 'CheckboxInputWidget 
(with accesskey T and title)\u200E',
+                                               title: 'Access key is added to 
the title.'
                                        }
                                ),
                                new OO.ui.FieldLayout(
@@ -1076,17 +1121,17 @@
                                                items: [
                                                        new 
OO.ui.RadioOptionWidget( {
                                                                data: 'a',
-                                                               label: 
'Accesskey: M',
+                                                               label: 'Access 
key: M',
                                                                accessKey: 'm'
                                                        } ),
                                                        new 
OO.ui.RadioOptionWidget( {
                                                                data: 'b',
-                                                               label: 
'Accesskey: N',
+                                                               label: 'Access 
key: N',
                                                                accessKey: 'n'
                                                        } ),
                                                        new 
OO.ui.RadioOptionWidget( {
                                                                data: 'c',
-                                                               label: 
'Accesskey: O',
+                                                               label: 'Access 
key: O',
                                                                accessKey: 'o'
                                                        } )
                                                ]
@@ -1323,17 +1368,17 @@
                                                        items: [
                                                                new 
OO.ui.MenuOptionWidget( {
                                                                        data: 
'a',
-                                                                       label: 
'Accesskey: P',
+                                                                       label: 
'Access key: P',
                                                                        
accessKey: 'p'
                                                                } ),
                                                                new 
OO.ui.MenuOptionWidget( {
                                                                        data: 
'b',
-                                                                       label: 
'Accesskey: Q',
+                                                                       label: 
'Access key: Q',
                                                                        
accessKey: 'q'
                                                                } ),
                                                                new 
OO.ui.MenuOptionWidget( {
                                                                        data: 
'c',
-                                                                       label: 
'Accesskey: R',
+                                                                       label: 
'Access key: R',
                                                                        
accessKey: 'r'
                                                                } )
                                                        ]
diff --git a/oojs/oojs-ui/demos/pages/widgets.php 
b/oojs/oojs-ui/demos/pages/widgets.php
index 34d95b7..cbfc240 100644
--- a/oojs/oojs-ui/demos/pages/widgets.php
+++ b/oojs/oojs-ui/demos/pages/widgets.php
@@ -303,8 +303,8 @@
                ),
                new OOUI\FieldLayout(
                        new OOUI\ButtonWidget( [
-                               'label' => 'Accesskey: H',
-                               'accessKey' => 'h'
+                               'label' => 'Access key: G',
+                               'accessKey' => 'g'
                        ] ),
                        [
                                'label' => "ButtonWidget (with 
accesskey)\xE2\x80\x8E",
@@ -316,7 +316,18 @@
                ),
                new OOUI\FieldLayout(
                        new OOUI\ButtonInputWidget( [
-                               'label' => 'Accesskey: I',
+                               'title' => 'Access key is added to the title.',
+                               'label' => 'Access key: H',
+                               'accessKey' => 'h'
+                       ] ),
+                       [
+                               'label' => "ButtonInputWidget (with accesskey 
and title)\xE2\x80\x8E",
+                               'align' => 'top',
+                       ]
+               ),
+               new OOUI\FieldLayout(
+                       new OOUI\ButtonInputWidget( [
+                               'label' => 'Access key: I',
                                'accessKey' => 'i'
                        ] ),
                        [
@@ -424,7 +435,7 @@
                ),
                new OOUI\FieldLayout(
                        new OOUI\TextInputWidget( [
-                               'value' => 'Accesskey: S',
+                               'value' => 'Access key: S',
                                'accessKey' => 's'
                        ] ),
                        [
@@ -516,6 +527,17 @@
                        ]
                ),
                new OOUI\FieldLayout(
+                       new OOUI\CheckboxInputWidget( [
+                               'selected' => true,
+                               'accessKey' => 't'
+                       ] ),
+                       [
+                               'align' => 'inline',
+                               'label' => "CheckboxInputWidget (with accesskey 
T and title)\xE2\x80\x8E",
+                               'title' => 'Access key is added to the title.',
+                       ]
+               ),
+               new OOUI\FieldLayout(
                        new OOUI\RadioInputWidget( [
                                'name' => 'oojs-ui-radio-demo'
                        ] ),
diff --git a/oojs/oojs-ui/demos/styles/demo.css 
b/oojs/oojs-ui/demos/styles/demo.css
index 34611fe..3a101a8 100644
--- a/oojs/oojs-ui/demos/styles/demo.css
+++ b/oojs/oojs-ui/demos/styles/demo.css
@@ -137,6 +137,7 @@
        content: 'Hide code ↑';
 }
 
+.demo-link-example:focus,
 .oo-ui-fieldLayout:hover > .demo-link-example {
        opacity: 1;
 }
diff --git a/oojs/oojs-ui/i18n/as.json b/oojs/oojs-ui/i18n/as.json
index 5053280..54a4244 100644
--- a/oojs/oojs-ui/i18n/as.json
+++ b/oojs/oojs-ui/i18n/as.json
@@ -12,7 +12,7 @@
        "ooui-toolbar-more": "অধিক",
        "ooui-toolgroup-expand": "অধিক",
        "ooui-toolgroup-collapse": "কম দেখাওক",
-       "ooui-dialog-message-accept": "শুদ্ধ",
+       "ooui-dialog-message-accept": "বাৰু",
        "ooui-dialog-message-reject": "বাতিল কৰক",
        "ooui-dialog-process-error": "কিবা ত্ৰুটি হৈছে",
        "ooui-dialog-process-dismiss": "বাতিল",
diff --git a/oojs/oojs-ui/i18n/bs.json b/oojs/oojs-ui/i18n/bs.json
index 7ef5a51..fc4c320 100644
--- a/oojs/oojs-ui/i18n/bs.json
+++ b/oojs/oojs-ui/i18n/bs.json
@@ -18,8 +18,8 @@
        "ooui-dialog-process-dismiss": "Odbaci",
        "ooui-dialog-process-retry": "Pokušaj ponovo",
        "ooui-dialog-process-continue": "Nastavi",
-       "ooui-selectfile-button-select": "Izaberi datoteku",
+       "ooui-selectfile-button-select": "Izaberite datoteku",
        "ooui-selectfile-not-supported": "Izbor datoteke nije podržan",
        "ooui-selectfile-placeholder": "Nijedna datoteka nije izabrana",
-       "ooui-selectfile-dragdrop-placeholder": "Prevuci datoteku ovdje"
+       "ooui-selectfile-dragdrop-placeholder": "Prevucite datoteku ovdje"
 }
diff --git a/oojs/oojs-ui/i18n/pt-br.json b/oojs/oojs-ui/i18n/pt-br.json
index fc29962..41ce674 100644
--- a/oojs/oojs-ui/i18n/pt-br.json
+++ b/oojs/oojs-ui/i18n/pt-br.json
@@ -11,7 +11,8 @@
                        "OTAVIO1981",
                        555,
                        "TheEduGobi",
-                       "TheGabrielZaum"
+                       "TheGabrielZaum",
+                       "Felipe L. Ewald"
                ]
        },
        "ooui-outline-control-move-down": "Mover item para baixo",
@@ -24,7 +25,7 @@
        "ooui-dialog-message-reject": "Cancelar",
        "ooui-dialog-process-error": "Algo deu errado",
        "ooui-dialog-process-dismiss": "Dispensar",
-       "ooui-dialog-process-retry": "Tentar novamente",
+       "ooui-dialog-process-retry": "Tente novamente",
        "ooui-dialog-process-continue": "Continuar",
        "ooui-selectfile-button-select": "Selecionar um arquivo",
        "ooui-selectfile-not-supported": "O selecionamento de arquivos não é 
suportado",
diff --git a/oojs/oojs-ui/package.json b/oojs/oojs-ui/package.json
index 139a202..a6a2365 100644
--- a/oojs/oojs-ui/package.json
+++ b/oojs/oojs-ui/package.json
@@ -1,6 +1,6 @@
 {
   "name": "oojs-ui",
-  "version": "0.22.3",
+  "version": "0.22.4",
   "description": "User interface classes built on the OOjs framework.",
   "keywords": [
     "oojs-plugin",
diff --git a/oojs/oojs-ui/php/Tag.php b/oojs/oojs-ui/php/Tag.php
index 5579f3d..9273455 100644
--- a/oojs/oojs-ui/php/Tag.php
+++ b/oojs/oojs-ui/php/Tag.php
@@ -275,7 +275,7 @@
        /**
         * Generate a unique ID for element
         *
-        * @return {string} ID
+        * @return string ID
         */
        public static function generateElementId() {
                self::$elementId++;
diff --git a/oojs/oojs-ui/php/Widget.php b/oojs/oojs-ui/php/Widget.php
index a93fbfb..13b937a 100644
--- a/oojs/oojs-ui/php/Widget.php
+++ b/oojs/oojs-ui/php/Widget.php
@@ -66,7 +66,7 @@
         * Get an ID of a labelable node which is part of this widget, if any, 
to be used for
         * `<label for>` value.
         *
-        * @return {string|null} The ID of the labelable node
+        * @return string|null The ID of the labelable node
         */
        public function getInputId() {
                return null;
diff --git a/oojs/oojs-ui/php/layouts/FieldLayout.php 
b/oojs/oojs-ui/php/layouts/FieldLayout.php
index 8039762..e070605 100644
--- a/oojs/oojs-ui/php/layouts/FieldLayout.php
+++ b/oojs/oojs-ui/php/layouts/FieldLayout.php
@@ -135,6 +135,8 @@
                }
 
                $this->setAlignment( $config['align'] );
+               // Call this again to take into account the widget's accessKey
+               $this->updateTitle();
        }
 
        /**
@@ -223,6 +225,20 @@
                return $this;
        }
 
+       /**
+        * Include information about the widget's accessKey in our title. 
TitledElement calls this method.
+        * (This is a bit of a hack.)
+        *
+        * @param string $title Tooltip label for 'title' attribute
+        * @return string
+        */
+       protected function formatTitleWithAccessKey( $title ) {
+               if ( $this->fieldWidget && method_exists( $this->fieldWidget, 
'formatTitleWithAccessKey' ) ) {
+                       return $this->fieldWidget->formatTitleWithAccessKey( 
$title );
+               }
+               return $title;
+       }
+
        public function getConfig( &$config ) {
                $config['fieldWidget'] = $this->fieldWidget;
                $config['align'] = $this->align;
diff --git a/oojs/oojs-ui/php/layouts/FieldsetLayout.php 
b/oojs/oojs-ui/php/layouts/FieldsetLayout.php
index e59ebad..a161008 100644
--- a/oojs/oojs-ui/php/layouts/FieldsetLayout.php
+++ b/oojs/oojs-ui/php/layouts/FieldsetLayout.php
@@ -28,13 +28,11 @@
 
                // Traits
                $this->initializeIconElement( $config );
-               $this->initializeLabelElement( array_merge( $config, [
-                       'labelElement' => new Tag( 'div' )
-               ] ) );
+               $this->initializeLabelElement( $config );
                $this->initializeGroupElement( $config );
 
                // Properties
-               $this->header = new Tag( 'div' );
+               $this->header = new Tag( 'legend' );
 
                // Initialization
                $this->header
diff --git a/oojs/oojs-ui/php/mixins/AccessKeyedElement.php 
b/oojs/oojs-ui/php/mixins/AccessKeyedElement.php
index b395bca..3f46c7c 100644
--- a/oojs/oojs-ui/php/mixins/AccessKeyedElement.php
+++ b/oojs/oojs-ui/php/mixins/AccessKeyedElement.php
@@ -60,6 +60,11 @@
                                $this->accessKeyed->removeAttributes( [ 
'accesskey' ] );
                        }
                        $this->accessKey = $accessKey;
+
+                       // Only if this is a TitledElement
+                       if ( method_exists( $this, 'updateTitle' ) ) {
+                               $this->updateTitle();
+                       }
                }
 
                return $this;
@@ -73,4 +78,19 @@
        public function getAccessKey() {
                return $this->accessKey;
        }
+
+       /**
+        * Add information about the access key to the element's tooltip label.
+        * (This is only public for hacky usage in FieldLayout.)
+        *
+        * @param string $title Tooltip label for `title` attribute
+        * @return string
+        */
+       public function formatTitleWithAccessKey( $title ) {
+               $accessKey = $this->getAccessKey();
+               if ( $accessKey ) {
+                       $title .= " [$accessKey]";
+               }
+               return $title;
+       }
 }
diff --git a/oojs/oojs-ui/php/mixins/TabIndexedElement.php 
b/oojs/oojs-ui/php/mixins/TabIndexedElement.php
index 5132d5d..398281e 100644
--- a/oojs/oojs-ui/php/mixins/TabIndexedElement.php
+++ b/oojs/oojs-ui/php/mixins/TabIndexedElement.php
@@ -92,7 +92,7 @@
         * If the element already has an ID then that is returned, otherwise 
unique ID is
         * generated, set on the element, and returned.
         *
-        * @return {string|null} The ID of the focusable element
+        * @return string|null The ID of the focusable element
         */
        public function getInputId() {
                $id = $this->tabIndexed->getAttribute( 'id' );
diff --git a/oojs/oojs-ui/php/mixins/TitledElement.php 
b/oojs/oojs-ui/php/mixins/TitledElement.php
index 073cc74..16ed98e 100644
--- a/oojs/oojs-ui/php/mixins/TitledElement.php
+++ b/oojs/oojs-ui/php/mixins/TitledElement.php
@@ -54,17 +54,32 @@
 
                if ( $this->title !== $title ) {
                        $this->title = $title;
-                       if ( $title !== null ) {
-                               $this->titled->setAttributes( [ 'title' => 
$title ] );
-                       } else {
-                               $this->titled->removeAttributes( [ 'title' ] );
-                       }
+                       $this->updateTitle();
                }
 
                return $this;
        }
 
        /**
+        * Update the title attribute, in case of changes to title or accessKey.
+        *
+        * @return $this
+        */
+       protected function updateTitle() {
+               $title = $this->getTitle();
+               if ( $title !== null ) {
+                       // Only if this is an AccessKeyedElement
+                       if ( method_exists( $this, 'formatTitleWithAccessKey' ) 
) {
+                               $title = $this->formatTitleWithAccessKey( 
$title );
+                       }
+                       $this->titled->setAttributes( [ 'title' => $title ] );
+               } else {
+                       $this->titled->removeAttributes( [ 'title' ] );
+               }
+               return $this;
+       }
+
+       /**
         * Get title.
         *
         * @return string Title string

-- 
To view, visit https://gerrit.wikimedia.org/r/369478
To unsubscribe, visit https://gerrit.wikimedia.org/r/settings

Gerrit-MessageType: newchange
Gerrit-Change-Id: I505e7c612b70a949d2b101172964bd7433fb8d5e
Gerrit-PatchSet: 1
Gerrit-Project: mediawiki/vendor
Gerrit-Branch: master
Gerrit-Owner: Jforrester <jforres...@wikimedia.org>

_______________________________________________
MediaWiki-commits mailing list
MediaWiki-commits@lists.wikimedia.org
https://lists.wikimedia.org/mailman/listinfo/mediawiki-commits

Reply via email to