From: Volker E <volker.e@wikimedia.org>
Date: Wed, 26 Apr 2017 01:28:38 +0000 (-0700)
Subject: Update OOjs UI to v0.21.2
X-Git-Tag: 1.31.0-rc.0~3426
X-Git-Url: http://git.cyclocoop.org/%22%20.%20generer_url_ecrire%28%22lang_raccourcis%22%2C%22module=%24nom_module%22%29%20.%20%22?a=commitdiff_plain;h=580d8de9b1542f88f104707cb179de96ba0c261e;p=lhc%2Fweb%2Fwiklou.git

Update OOjs UI to v0.21.2

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

Change-Id: Id7cae80a4f3d84ea5d50003f2409537b307c0c58
---

diff --git a/composer.json b/composer.json
index be8ce1507e..ed42b603c0 100644
--- a/composer.json
+++ b/composer.json
@@ -25,7 +25,7 @@
 		"ext-xml": "*",
 		"liuggio/statsd-php-client": "1.0.18",
 		"mediawiki/at-ease": "1.1.0",
-		"oojs/oojs-ui": "0.21.1",
+		"oojs/oojs-ui": "0.21.2",
 		"oyejorge/less.php": "1.7.0.14",
 		"php": ">=5.5.9",
 		"psr/log": "1.0.2",
diff --git a/resources/lib/oojs-ui/i18n/sr-ec.json b/resources/lib/oojs-ui/i18n/sr-ec.json
index 9d3b926dba..87b7c2b1d2 100644
--- a/resources/lib/oojs-ui/i18n/sr-ec.json
+++ b/resources/lib/oojs-ui/i18n/sr-ec.json
@@ -4,11 +4,12 @@
 			"Milicevic01",
 			"Nikola Smolenski",
 			"Милан Јелисавчић",
-			"Zoranzoki21"
+			"Zoranzoki21",
+			"Obsuser"
 		]
 	},
-	"ooui-outline-control-move-down": "Премести ставку на доле",
-	"ooui-outline-control-move-up": "Премести ставку на горе",
+	"ooui-outline-control-move-down": "Премести ставку надоле",
+	"ooui-outline-control-move-up": "Премести ставку нагоре",
 	"ooui-outline-control-remove": "Уклони ставку",
 	"ooui-toolbar-more": "Више",
 	"ooui-toolgroup-expand": "Више",
diff --git a/resources/lib/oojs-ui/oojs-ui-apex.js b/resources/lib/oojs-ui/oojs-ui-apex.js
index ef48f5b981..bb0f6034a3 100644
--- a/resources/lib/oojs-ui/oojs-ui-apex.js
+++ b/resources/lib/oojs-ui/oojs-ui-apex.js
@@ -1,12 +1,12 @@
 /*!
- * OOjs UI v0.21.1
+ * OOjs UI v0.21.2
  * https://www.mediawiki.org/wiki/OOjs_UI
  *
  * Copyright 2011–2017 OOjs UI Team and other contributors.
  * Released under the MIT license
  * http://oojs.mit-license.org
  *
- * Date: 2017-04-18T23:32:49Z
+ * Date: 2017-04-26T01:05:10Z
  */
 ( function ( OO ) {
 
diff --git a/resources/lib/oojs-ui/oojs-ui-core-apex.css b/resources/lib/oojs-ui/oojs-ui-core-apex.css
index 29b0874b62..cecff46d32 100644
--- a/resources/lib/oojs-ui/oojs-ui-core-apex.css
+++ b/resources/lib/oojs-ui/oojs-ui-core-apex.css
@@ -1,12 +1,12 @@
 /*!
- * OOjs UI v0.21.1
+ * OOjs UI v0.21.2
  * https://www.mediawiki.org/wiki/OOjs_UI
  *
  * Copyright 2011–2017 OOjs UI Team and other contributors.
  * Released under the MIT license
  * http://oojs.mit-license.org
  *
- * Date: 2017-04-18T23:32:54Z
+ * Date: 2017-04-26T01:05:15Z
  */
 .oo-ui-element-hidden {
   display: none !important;
@@ -1332,6 +1332,9 @@ body:not( :-moz-handler-blocked ) .oo-ui-fieldsetLayout {
   margin-right: 0;
 }
 .oo-ui-progressBarWidget {
+  -webkit-box-sizing: border-box;
+  -moz-box-sizing: border-box;
+  box-sizing: border-box;
   max-width: 50em;
   background-color: #fff;
   border: 1px solid #ccc;
diff --git a/resources/lib/oojs-ui/oojs-ui-core-mediawiki.css b/resources/lib/oojs-ui/oojs-ui-core-mediawiki.css
index a994e00b35..393ff596ca 100644
--- a/resources/lib/oojs-ui/oojs-ui-core-mediawiki.css
+++ b/resources/lib/oojs-ui/oojs-ui-core-mediawiki.css
@@ -1,12 +1,12 @@
 /*!
- * OOjs UI v0.21.1
+ * OOjs UI v0.21.2
  * https://www.mediawiki.org/wiki/OOjs_UI
  *
  * Copyright 2011–2017 OOjs UI Team and other contributors.
  * Released under the MIT license
  * http://oojs.mit-license.org
  *
- * Date: 2017-04-18T23:32:54Z
+ * Date: 2017-04-26T01:05:15Z
  */
 .oo-ui-element-hidden {
   display: none !important;
@@ -209,11 +209,13 @@
   opacity: 0.51;
 }
 .oo-ui-buttonElement-framed > .oo-ui-buttonElement-button {
-  min-height: 2.5em;
   border-radius: 2px;
-  padding: 0.625em 0.9375em 0.546875em;
+  padding-left: 0.9375em;
+  padding-right: 0.9375em;
 }
 .oo-ui-buttonElement-framed.oo-ui-iconElement > .oo-ui-buttonElement-button {
+  padding-top: 2.34375em;
+  padding-bottom: 0;
   padding-left: 2.03125em;
 }
 .oo-ui-buttonElement-framed.oo-ui-iconElement > .oo-ui-buttonElement-button > .oo-ui-iconElement-icon {
@@ -228,7 +230,9 @@
   left: 0.46875em;
 }
 .oo-ui-buttonElement-framed.oo-ui-indicatorElement > .oo-ui-buttonElement-button {
+  padding-top: 2.34375em;
   padding-right: 2.03125em;
+  padding-bottom: 0;
 }
 .oo-ui-buttonElement-framed.oo-ui-indicatorElement > .oo-ui-buttonElement-button > .oo-ui-indicatorElement-indicator {
   right: 1.015625em;
@@ -237,6 +241,10 @@
 .oo-ui-buttonElement-framed.oo-ui-indicatorElement.oo-ui-iconElement > .oo-ui-buttonElement-button {
   padding-right: 2.5em;
 }
+.oo-ui-buttonElement-framed.oo-ui-labelElement > .oo-ui-buttonElement-button {
+  padding-top: 0.625em;
+  padding-bottom: 0.546875em;
+}
 .oo-ui-buttonElement-framed.oo-ui-widget-disabled > .oo-ui-buttonElement-button {
   background-color: #c8ccd1;
   color: #fff;
@@ -318,7 +326,7 @@
   outline: 0;
 }
 .oo-ui-buttonElement-framed.oo-ui-widget-enabled.oo-ui-flaggedElement-destructive > .oo-ui-buttonElement-button {
-  color: #d33;
+  color: #d73333;
 }
 .oo-ui-buttonElement-framed.oo-ui-widget-enabled.oo-ui-flaggedElement-destructive > .oo-ui-buttonElement-button:hover {
   background-color: #fff;
@@ -1536,7 +1544,7 @@ body:not( :-moz-handler-blocked ) .oo-ui-fieldsetLayout {
 .oo-ui-textInputWidget.oo-ui-widget-disabled .oo-ui-indicatorElement-indicator {
   opacity: 0.51;
 }
-.oo-ui-textInputWidget.oo-ui-widget-disabled .oo-ui-labelElement-label {
+.oo-ui-textInputWidget.oo-ui-widget-disabled > .oo-ui-labelElement-label {
   color: #72777d;
   text-shadow: 0 1px 1px #fff;
 }
@@ -1546,6 +1554,8 @@ body:not( :-moz-handler-blocked ) .oo-ui-fieldsetLayout {
 }
 .oo-ui-textInputWidget.oo-ui-iconElement .oo-ui-iconElement-icon {
   left: 0.46875em;
+}
+.oo-ui-textInputWidget.oo-ui-iconElement textarea + .oo-ui-iconElement-icon {
   max-height: 2.5em;
 }
 .oo-ui-textInputWidget.oo-ui-indicatorElement input,
@@ -1836,6 +1846,9 @@ body:not( :-moz-handler-blocked ) .oo-ui-fieldsetLayout {
   margin-right: 0;
 }
 .oo-ui-progressBarWidget {
+  -webkit-box-sizing: border-box;
+  -moz-box-sizing: border-box;
+  box-sizing: border-box;
   max-width: 50em;
   background-color: #fff;
   border: 1px solid #a2a9b1;
diff --git a/resources/lib/oojs-ui/oojs-ui-core.js b/resources/lib/oojs-ui/oojs-ui-core.js
index c00d9a7f71..cab24e4ee0 100644
--- a/resources/lib/oojs-ui/oojs-ui-core.js
+++ b/resources/lib/oojs-ui/oojs-ui-core.js
@@ -1,12 +1,12 @@
 /*!
- * OOjs UI v0.21.1
+ * OOjs UI v0.21.2
  * https://www.mediawiki.org/wiki/OOjs_UI
  *
  * Copyright 2011–2017 OOjs UI Team and other contributors.
  * Released under the MIT license
  * http://oojs.mit-license.org
  *
- * Date: 2017-04-18T23:32:49Z
+ * Date: 2017-04-26T01:05:10Z
  */
 ( function ( OO ) {
 
@@ -584,6 +584,7 @@ OO.ui.Element = function OoUiElement( config ) {
 
 	// Properties
 	this.$ = $;
+	this.elementId = null;
 	this.visible = true;
 	this.data = config.data;
 	this.$element = config.$element ||
@@ -595,7 +596,7 @@ OO.ui.Element = function OoUiElement( config ) {
 		this.$element.addClass( config.classes.join( ' ' ) );
 	}
 	if ( config.id ) {
-		this.$element.attr( 'id', config.id );
+		this.setElementId( config.id );
 	}
 	if ( config.text ) {
 		this.$element.text( config.text );
@@ -1375,6 +1376,31 @@ OO.ui.Element.prototype.setData = function ( data ) {
 	return this;
 };
 
+/**
+ * Set the element has an 'id' attribute.
+ *
+ * @param {string} id
+ * @chainable
+ */
+OO.ui.Element.prototype.setElementId = function ( id ) {
+	this.elementId = id;
+	this.$element.attr( 'id', id );
+	return this;
+};
+
+/**
+ * Ensure that the element has an 'id' attribute, setting it to an unique value if it's missing,
+ * and return its value.
+ *
+ * @return {string}
+ */
+OO.ui.Element.prototype.getElementId = function () {
+	if ( this.elementId === null ) {
+		this.setElementId( OO.ui.generateElementId() );
+	}
+	return this.elementId;
+};
+
 /**
  * Check if element supports one or more methods.
  *
@@ -5320,6 +5346,7 @@ OO.ui.mixin.PopupElement.prototype.getPopup = function () {
  * @cfg {jQuery} [$overlay] Render the popup into a separate layer. This configuration is useful in cases where
  *  the expanded popup is larger than its containing `<div>`. The specified overlay layer is usually on top of the
  *  containing `<div>` and has a larger area. By default, the popup uses relative positioning.
+ *  See <https://www.mediawiki.org/wiki/OOjs_UI/Concepts#Overlays>.
  */
 OO.ui.PopupButtonWidget = function OoUiPopupButtonWidget( config ) {
 	// Parent constructor
@@ -5764,6 +5791,7 @@ OO.ui.SelectWidget = function OoUiSelectWidget( config ) {
 	this.$element
 		.addClass( 'oo-ui-selectWidget oo-ui-selectWidget-depressed' )
 		.attr( 'role', 'listbox' );
+	this.setFocusOwner( this.$element );
 	if ( Array.isArray( config.items ) ) {
 		this.addItems( config.items );
 	}
@@ -5856,7 +5884,7 @@ OO.ui.SelectWidget.prototype.onFocus = function ( event ) {
 	}
 
 	if ( event.target !== this.$element[ 0 ] ) {
-		this.$element.focus();
+		this.$focusOwner.focus();
 	}
 };
 
@@ -6270,6 +6298,11 @@ OO.ui.SelectWidget.prototype.highlightItem = function ( item ) {
 		}
 	}
 	if ( changed ) {
+		if ( item ) {
+			this.$focusOwner.attr( 'aria-activedescendant', item.getElementId() );
+		} else {
+			this.$focusOwner.removeAttr( 'aria-activedescendant' );
+		}
 		this.emit( 'highlight', item );
 	}
 
@@ -6368,6 +6401,13 @@ OO.ui.SelectWidget.prototype.selectItem = function ( item ) {
 		}
 	}
 	if ( changed ) {
+		if ( item && !item.constructor.static.highlightable ) {
+			if ( item ) {
+				this.$focusOwner.attr( 'aria-activedescendant', item.getElementId() );
+			} else {
+				this.$focusOwner.removeAttr( 'aria-activedescendant' );
+			}
+		}
 		this.emit( 'select', item );
 	}
 
@@ -6544,6 +6584,18 @@ OO.ui.SelectWidget.prototype.clearItems = function () {
 	return this;
 };
 
+/**
+ * Set the DOM element which has focus while the user is interacting with this SelectWidget.
+ *
+ * Currently this is just used to set `aria-activedescendant` on it.
+ *
+ * @protected
+ * @param {jQuery} $focusOwner
+ */
+OO.ui.SelectWidget.prototype.setFocusOwner = function ( $focusOwner ) {
+	this.$focusOwner = $focusOwner;
+};
+
 /**
  * DecoratedOptionWidgets are {@link OO.ui.OptionWidget options} that can be configured
  * with an {@link OO.ui.mixin.IconElement icon} and/or {@link OO.ui.mixin.IndicatorElement indicator}.
@@ -6618,9 +6670,7 @@ OO.ui.MenuOptionWidget = function OoUiMenuOptionWidget( config ) {
 	OO.ui.MenuOptionWidget.parent.call( this, config );
 
 	// Initialization
-	this.$element
-		.attr( 'role', 'menuitem' )
-		.addClass( 'oo-ui-menuOptionWidget' );
+	this.$element.addClass( 'oo-ui-menuOptionWidget' );
 };
 
 /* Setup */
@@ -6765,9 +6815,10 @@ OO.ui.MenuSelectWidget = function OoUiMenuSelectWidget( config ) {
 	this.highlightOnFilter = !!config.highlightOnFilter;
 
 	// Initialization
-	this.$element
-		.addClass( 'oo-ui-menuSelectWidget' )
-		.attr( 'role', 'menu' );
+	this.$element.addClass( 'oo-ui-menuSelectWidget' );
+	if ( config.widget ) {
+		this.setFocusOwner( config.widget.$tabIndexed );
+	}
 
 	// Initially hidden - using #toggle may cause errors if subclasses override toggle with methods
 	// that reference properties not initialized at that time of parent class construction
@@ -7023,6 +7074,7 @@ OO.ui.MenuSelectWidget.prototype.toggle = function ( visible ) {
 			this.toggleClipping( true );
 
 			if ( this.getSelectedItem() ) {
+				this.$focusOwner.attr( 'aria-activedescendant', this.getSelectedItem().getElementId() );
 				this.getSelectedItem().scrollElementIntoView( { duration: 0 } );
 			}
 
@@ -7031,6 +7083,7 @@ OO.ui.MenuSelectWidget.prototype.toggle = function ( visible ) {
 				this.getElementDocument().addEventListener( 'mousedown', this.onDocumentMouseDownHandler, true );
 			}
 		} else {
+			this.$focusOwner.removeAttr( 'aria-activedescendant' );
 			this.unbindKeyDownListener();
 			this.unbindKeyPressListener();
 			this.getElementDocument().removeEventListener( 'mousedown', this.onDocumentMouseDownHandler, true );
@@ -7095,6 +7148,7 @@ OO.ui.MenuSelectWidget.prototype.toggle = function ( visible ) {
  * @cfg {jQuery} [$overlay] Render the menu into a separate layer. This configuration is useful in cases where
  *  the expanded menu is larger than its containing `<div>`. The specified overlay layer is usually on top of the
  *  containing `<div>` and has a larger area. By default, the menu uses relative positioning.
+ *  See <https://www.mediawiki.org/wiki/OOjs_UI/Concepts#Overlays>.
  */
 OO.ui.DropdownWidget = function OoUiDropdownWidget( config ) {
 	// Configuration initialization
@@ -7136,6 +7190,11 @@ OO.ui.DropdownWidget = function OoUiDropdownWidget( config ) {
 	// Initialization
 	this.$handle
 		.addClass( 'oo-ui-dropdownWidget-handle' )
+		.attr( {
+			role: 'combobox',
+			'aria-owns': this.menu.getElementId(),
+			'aria-autocomplete': 'list'
+		} )
 		.append( this.$icon, this.$label, this.$indicator );
 	this.$element
 		.addClass( 'oo-ui-dropdownWidget' )
@@ -10291,6 +10350,7 @@ OO.ui.SearchInputWidget.prototype.setReadOnly = function ( state ) {
  * @cfg {jQuery} [$overlay] Render the menu into a separate layer. This configuration is useful in cases where
  *  the expanded menu is larger than its containing `<div>`. The specified overlay layer is usually on top of the
  *  containing `<div>` and has a larger area. By default, the menu uses relative positioning.
+ *  See <https://www.mediawiki.org/wiki/OOjs_UI/Concepts#Overlays>.
  */
 OO.ui.ComboBoxInputWidget = function OoUiComboBoxInputWidget( config ) {
 	// Configuration initialization
@@ -10343,6 +10403,7 @@ OO.ui.ComboBoxInputWidget = function OoUiComboBoxInputWidget( config ) {
 	// Initialization
 	this.$input.attr( {
 		role: 'combobox',
+		'aria-owns': this.menu.getElementId(),
 		'aria-autocomplete': 'list'
 	} );
 	// Do not override options set via config.menu.items
@@ -10521,6 +10582,7 @@ OO.ui.ComboBoxInputWidget.prototype.setOptions = function ( options ) {
  *  in the upper-right corner of the rendered field; clicking it will display the text in a popup.
  *  For important messages, you are advised to use `notices`, as they are always shown.
  * @cfg {jQuery} [$overlay] Passed to OO.ui.PopupButtonWidget for help popup, if `help` is given.
+ *  See <https://www.mediawiki.org/wiki/OOjs_UI/Concepts#Overlays>.
  *
  * @throws {Error} An error is thrown if no widget is specified
  */
@@ -10885,6 +10947,7 @@ OO.inheritClass( OO.ui.ActionFieldLayout, OO.ui.FieldLayout );
  *  in the upper-right corner of the rendered field; clicking it will display the text in a popup.
  *  For important messages, you are advised to use `notices`, as they are always shown.
  * @cfg {jQuery} [$overlay] Passed to OO.ui.PopupButtonWidget for help popup, if `help` is given.
+ *  See <https://www.mediawiki.org/wiki/OOjs_UI/Concepts#Overlays>.
  */
 OO.ui.FieldsetLayout = function OoUiFieldsetLayout( config ) {
 	// Configuration initialization
diff --git a/resources/lib/oojs-ui/oojs-ui-mediawiki.js b/resources/lib/oojs-ui/oojs-ui-mediawiki.js
index 60c67b6ef5..726248c1a7 100644
--- a/resources/lib/oojs-ui/oojs-ui-mediawiki.js
+++ b/resources/lib/oojs-ui/oojs-ui-mediawiki.js
@@ -1,12 +1,12 @@
 /*!
- * OOjs UI v0.21.1
+ * OOjs UI v0.21.2
  * https://www.mediawiki.org/wiki/OOjs_UI
  *
  * Copyright 2011–2017 OOjs UI Team and other contributors.
  * Released under the MIT license
  * http://oojs.mit-license.org
  *
- * Date: 2017-04-18T23:32:49Z
+ * Date: 2017-04-26T01:05:10Z
  */
 ( function ( OO ) {
 
diff --git a/resources/lib/oojs-ui/oojs-ui-toolbars-apex.css b/resources/lib/oojs-ui/oojs-ui-toolbars-apex.css
index 53c5bf36e7..0bc7c94928 100644
--- a/resources/lib/oojs-ui/oojs-ui-toolbars-apex.css
+++ b/resources/lib/oojs-ui/oojs-ui-toolbars-apex.css
@@ -1,12 +1,12 @@
 /*!
- * OOjs UI v0.21.1
+ * OOjs UI v0.21.2
  * https://www.mediawiki.org/wiki/OOjs_UI
  *
  * Copyright 2011–2017 OOjs UI Team and other contributors.
  * Released under the MIT license
  * http://oojs.mit-license.org
  *
- * Date: 2017-04-18T23:32:54Z
+ * Date: 2017-04-26T01:05:15Z
  */
 .oo-ui-popupTool .oo-ui-popupWidget-popup,
 .oo-ui-popupTool .oo-ui-popupWidget-anchor {
diff --git a/resources/lib/oojs-ui/oojs-ui-toolbars-mediawiki.css b/resources/lib/oojs-ui/oojs-ui-toolbars-mediawiki.css
index a82a8b287f..f046fa5e46 100644
--- a/resources/lib/oojs-ui/oojs-ui-toolbars-mediawiki.css
+++ b/resources/lib/oojs-ui/oojs-ui-toolbars-mediawiki.css
@@ -1,12 +1,12 @@
 /*!
- * OOjs UI v0.21.1
+ * OOjs UI v0.21.2
  * https://www.mediawiki.org/wiki/OOjs_UI
  *
  * Copyright 2011–2017 OOjs UI Team and other contributors.
  * Released under the MIT license
  * http://oojs.mit-license.org
  *
- * Date: 2017-04-18T23:32:54Z
+ * Date: 2017-04-26T01:05:15Z
  */
 .oo-ui-tool.oo-ui-widget-enabled {
   -webkit-transition: background-color 100ms;
diff --git a/resources/lib/oojs-ui/oojs-ui-toolbars.js b/resources/lib/oojs-ui/oojs-ui-toolbars.js
index 9ef478b475..97c99ef374 100644
--- a/resources/lib/oojs-ui/oojs-ui-toolbars.js
+++ b/resources/lib/oojs-ui/oojs-ui-toolbars.js
@@ -1,12 +1,12 @@
 /*!
- * OOjs UI v0.21.1
+ * OOjs UI v0.21.2
  * https://www.mediawiki.org/wiki/OOjs_UI
  *
  * Copyright 2011–2017 OOjs UI Team and other contributors.
  * Released under the MIT license
  * http://oojs.mit-license.org
  *
- * Date: 2017-04-18T23:32:49Z
+ * Date: 2017-04-26T01:05:10Z
  */
 ( function ( OO ) {
 
diff --git a/resources/lib/oojs-ui/oojs-ui-widgets-apex.css b/resources/lib/oojs-ui/oojs-ui-widgets-apex.css
index dc149fbba0..77b6b8113d 100644
--- a/resources/lib/oojs-ui/oojs-ui-widgets-apex.css
+++ b/resources/lib/oojs-ui/oojs-ui-widgets-apex.css
@@ -1,12 +1,12 @@
 /*!
- * OOjs UI v0.21.1
+ * OOjs UI v0.21.2
  * https://www.mediawiki.org/wiki/OOjs_UI
  *
  * Copyright 2011–2017 OOjs UI Team and other contributors.
  * Released under the MIT license
  * http://oojs.mit-license.org
  *
- * Date: 2017-04-18T23:32:54Z
+ * Date: 2017-04-26T01:05:15Z
  */
 .oo-ui-draggableElement-handle:not( .oo-ui-draggableElement-undraggable ).oo-ui-widget {
   cursor: move;
@@ -663,22 +663,21 @@
 }
 .oo-ui-tabOptionWidget {
   display: inline-block;
+  -webkit-box-sizing: border-box;
+  -moz-box-sizing: border-box;
+  box-sizing: border-box;
   vertical-align: bottom;
-  padding: 0.5em 1em;
   margin: 0.5em 0 0 0.75em;
-  border: 1px solid transparent;
-  border-bottom: 0;
+  border-color: transparent;
+  border-style: solid;
+  border-width: 1px 1px 0 1px;
   border-top-left-radius: 0.5em;
   border-top-right-radius: 0.5em;
+  padding: 0.5em 1em;
 }
-.oo-ui-tabOptionWidget.oo-ui-indicatorElement .oo-ui-labelElement-label {
-  padding-right: 1.5em;
-}
-.oo-ui-tabOptionWidget.oo-ui-indicatorElement .oo-ui-indicatorElement-indicator {
-  opacity: 0.5;
-}
-.oo-ui-selectWidget-pressed .oo-ui-tabOptionWidget.oo-ui-optionWidget-pressed {
-  background-color: transparent;
+.oo-ui-tabOptionWidget.oo-ui-optionWidget-selected {
+  background-color: #fff;
+  border-color: #ddd;
 }
 .oo-ui-tabOptionWidget.oo-ui-widget-enabled:hover {
   background-color: rgba(255, 255, 255, 0.2);
@@ -688,11 +687,8 @@
   background-color: #fff;
   border-color: #ddd;
 }
-.oo-ui-selectWidget-pressed .oo-ui-tabOptionWidget.oo-ui-optionWidget-selected,
-.oo-ui-selectWidget-depressed .oo-ui-tabOptionWidget.oo-ui-optionWidget-selected,
-.oo-ui-tabOptionWidget.oo-ui-optionWidget-selected:hover {
+.oo-ui-tabOptionWidget.oo-ui-widget-enabled.oo-ui-optionWidget-selected:hover {
   background-color: #fff;
-  border-color: #ddd;
 }
 .oo-ui-tagMultiselectWidget {
   display: inline-block;
@@ -1059,13 +1055,10 @@
   max-width: 50em;
 }
 .oo-ui-numberInputWidget-buttoned .oo-ui-buttonWidget,
-.oo-ui-numberInputWidget-buttoned .oo-ui-textInputWidget {
+.oo-ui-numberInputWidget-buttoned .oo-ui-inputWidget-input {
   display: table-cell;
   height: 100%;
 }
-.oo-ui-numberInputWidget-buttoned .oo-ui-textInputWidget input {
-  height: 100%;
-}
 .oo-ui-numberInputWidget-field {
   display: table;
   table-layout: fixed;
@@ -1084,6 +1077,6 @@
   border-bottom-left-radius: 0;
   border-left-width: 0;
 }
-.oo-ui-numberInputWidget-buttoned .oo-ui-textInputWidget input {
+.oo-ui-numberInputWidget-buttoned .oo-ui-inputWidget-input {
   border-radius: 0;
 }
diff --git a/resources/lib/oojs-ui/oojs-ui-widgets-mediawiki.css b/resources/lib/oojs-ui/oojs-ui-widgets-mediawiki.css
index 9b065737cd..d83f97fa5e 100644
--- a/resources/lib/oojs-ui/oojs-ui-widgets-mediawiki.css
+++ b/resources/lib/oojs-ui/oojs-ui-widgets-mediawiki.css
@@ -1,12 +1,12 @@
 /*!
- * OOjs UI v0.21.1
+ * OOjs UI v0.21.2
  * https://www.mediawiki.org/wiki/OOjs_UI
  *
  * Copyright 2011–2017 OOjs UI Team and other contributors.
  * Released under the MIT license
  * http://oojs.mit-license.org
  *
- * Date: 2017-04-18T23:32:54Z
+ * Date: 2017-04-26T01:05:15Z
  */
 .oo-ui-draggableElement {
   padding: 1.0546875em 0.9375em 0.9375em;
@@ -769,36 +769,39 @@
 }
 .oo-ui-tabOptionWidget {
   display: inline-block;
+  -webkit-box-sizing: border-box;
+  -moz-box-sizing: border-box;
+  box-sizing: border-box;
   vertical-align: bottom;
   color: #222;
-  margin: 0.5em 0 0 0.75em;
-  border: 1px solid transparent;
-  border-bottom: 0;
+  margin: 0.46875em 0 0 0.46875em;
+  border-color: transparent;
+  border-style: solid;
+  border-width: 1px 1px 0 1px;
   border-top-left-radius: 2px;
   border-top-right-radius: 2px;
-  padding: 0.35em 1em;
+  padding: 0.625em 1.015625em 0.546875em;
   font-weight: bold;
+  line-height: 1;
   -webkit-transition: background-color 100ms, color 100ms;
   -moz-transition: background-color 100ms, color 100ms;
   transition: background-color 100ms, color 100ms;
 }
+.oo-ui-tabOptionWidget.oo-ui-optionWidget-selected {
+  background-color: #fff;
+  color: #000;
+}
+.oo-ui-tabOptionWidget .oo-ui-labelElement-label {
+  line-height: 1.172em;
+}
 .oo-ui-tabOptionWidget.oo-ui-widget-enabled:hover {
   background-color: rgba(255, 255, 255, 0.3);
 }
 .oo-ui-tabOptionWidget.oo-ui-widget-enabled:active {
   background-color: rgba(255, 255, 255, 0.8);
 }
-.oo-ui-tabOptionWidget.oo-ui-indicatorElement .oo-ui-labelElement-label {
-  padding-right: 1.5em;
-}
-.oo-ui-tabOptionWidget.oo-ui-indicatorElement .oo-ui-indicatorElement-indicator {
-  opacity: 0.5;
-}
-.oo-ui-selectWidget-pressed .oo-ui-tabOptionWidget.oo-ui-optionWidget-selected,
-.oo-ui-selectWidget-depressed .oo-ui-tabOptionWidget.oo-ui-optionWidget-selected,
-.oo-ui-tabOptionWidget.oo-ui-optionWidget-selected:hover {
+.oo-ui-tabOptionWidget.oo-ui-widget-enabled.oo-ui-optionWidget-selected:hover {
   background-color: #fff;
-  color: #000;
 }
 .oo-ui-tagMultiselectWidget {
   display: inline-block;
@@ -918,7 +921,7 @@
   border-bottom-left-radius: 0;
   border-bottom-right-radius: 0;
 }
-.oo-ui-tagMultiselectWidget.oo-ui-widget-enabled.oo-ui-tagMultiselectWidget-outlined .oo-ui-tagMultiselectWidget-handle .oo-ui-tagItemWidget.oo-ui-widget-enabled {
+.oo-ui-tagMultiselectWidget.oo-ui-widget-enabled.oo-ui-tagMultiselectWidget-outlined .oo-ui-tagItemWidget.oo-ui-widget-enabled {
   background-color: #fff;
 }
 .oo-ui-tagMultiselectWidget.oo-ui-widget-enabled.oo-ui-tagMultiselectWidget-outlined .oo-ui-inputWidget-input {
@@ -961,16 +964,6 @@
   overflow: hidden;
   cursor: text;
 }
-.oo-ui-tagItemWidget.oo-ui-flaggedElement-invalid {
-  border-color: #d33;
-}
-.oo-ui-tagItemWidget.oo-ui-flaggedElement-invalid:hover {
-  border-color: #d33;
-}
-.oo-ui-tagItemWidget.oo-ui-flaggedElement-invalid:focus {
-  border-color: #d33;
-  box-shadow: inset 0 0 0 1px #d33;
-}
 .oo-ui-tagItemWidget.oo-ui-widget-enabled {
   background-color: #f8f9fa;
   color: #222;
@@ -989,6 +982,16 @@
   box-shadow: inset 0 0 0 1px #36c;
   outline: 0;
 }
+.oo-ui-tagItemWidget.oo-ui-widget-enabled.oo-ui-flaggedElement-invalid {
+  border-color: #d33;
+}
+.oo-ui-tagItemWidget.oo-ui-widget-enabled.oo-ui-flaggedElement-invalid:hover {
+  border-color: #d33;
+}
+.oo-ui-tagItemWidget.oo-ui-widget-enabled.oo-ui-flaggedElement-invalid:focus {
+  border-color: #d33;
+  box-shadow: inset 0 0 0 1px #d33;
+}
 .oo-ui-tagItemWidget.oo-ui-widget-enabled > .oo-ui-buttonElement {
   display: block;
   position: absolute;
@@ -1234,16 +1237,17 @@
   overflow-y: auto;
 }
 .oo-ui-searchWidget-query {
-  height: 4em;
-  padding: 0 1em;
-  border-bottom: 1px solid #a2a9b1;
+  height: 4.375em;
+  padding: 0 1.25em;
+  border-bottom: 1px solid #c8ccd1;
+  box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.1);
 }
 .oo-ui-searchWidget-query .oo-ui-textInputWidget {
-  margin: 0.75em 0;
+  margin: 0.9375em 0;
 }
 .oo-ui-searchWidget-results {
-  top: 4em;
-  padding: 1em;
+  top: 4.375em;
+  padding: 1.25em;
   line-height: 0;
 }
 .oo-ui-numberInputWidget {
@@ -1252,13 +1256,10 @@
   max-width: 50em;
 }
 .oo-ui-numberInputWidget-buttoned .oo-ui-buttonWidget,
-.oo-ui-numberInputWidget-buttoned .oo-ui-textInputWidget {
+.oo-ui-numberInputWidget-buttoned .oo-ui-inputWidget-input {
   display: table-cell;
   height: 100%;
 }
-.oo-ui-numberInputWidget-buttoned .oo-ui-textInputWidget input {
-  height: 100%;
-}
 .oo-ui-numberInputWidget-field {
   display: table;
   table-layout: fixed;
@@ -1274,7 +1275,7 @@
   padding-left: 0;
   padding-right: 0;
 }
-.oo-ui-numberInputWidget-buttoned .oo-ui-textInputWidget input {
+.oo-ui-numberInputWidget-buttoned .oo-ui-inputWidget-input {
   border-radius: 0;
 }
 .oo-ui-numberInputWidget-minusButton.oo-ui-buttonElement-framed > .oo-ui-buttonElement-button {
diff --git a/resources/lib/oojs-ui/oojs-ui-widgets.js b/resources/lib/oojs-ui/oojs-ui-widgets.js
index a2e6e34137..58ff9e5443 100644
--- a/resources/lib/oojs-ui/oojs-ui-widgets.js
+++ b/resources/lib/oojs-ui/oojs-ui-widgets.js
@@ -1,12 +1,12 @@
 /*!
- * OOjs UI v0.21.1
+ * OOjs UI v0.21.2
  * https://www.mediawiki.org/wiki/OOjs_UI
  *
  * Copyright 2011–2017 OOjs UI Team and other contributors.
  * Released under the MIT license
  * http://oojs.mit-license.org
  *
- * Date: 2017-04-18T23:32:49Z
+ * Date: 2017-04-26T01:05:10Z
  */
 ( function ( OO ) {
 
@@ -628,7 +628,8 @@ OO.ui.mixin.RequestManager.prototype.getRequestCacheDataFromResponse = null;
  *
  * @constructor
  * @param {Object} [config] Configuration options
- * @cfg {jQuery} [$overlay] Overlay for the lookup menu; defaults to relative positioning
+ * @cfg {jQuery} [$overlay] Overlay for the lookup menu; defaults to relative positioning.
+ *  See <https://www.mediawiki.org/wiki/OOjs_UI/Concepts#Overlays>.
  * @cfg {jQuery} [$container=this.$element] The container element. The lookup menu is rendered beneath the specified element.
  * @cfg {boolean} [allowSuggestionsWhenEmpty=false] Request and display a lookup menu when the text input is empty.
  *  By default, the lookup menu is not generated and displayed until the user begins to type.
@@ -669,6 +670,11 @@ OO.ui.mixin.LookupElement = function OoUiMixinLookupElement( config ) {
 	} );
 
 	// Initialization
+	this.$input.attr( {
+		role: 'combobox',
+		'aria-owns': this.lookupMenu.getElementId(),
+		'aria-autocomplete': 'list'
+	} );
 	this.$element.addClass( 'oo-ui-lookupElement' );
 	this.lookupMenu.$element.addClass( 'oo-ui-lookupElement-menu' );
 	this.$overlay.append( this.lookupMenu.$element );
@@ -3701,6 +3707,7 @@ OO.ui.CapsuleItemWidget.prototype.focus = function () {
  *  its containing `<div>`. The specified overlay layer is usually on top of
  *  the containing `<div>` and has a larger area. By default, the menu uses
  *  relative positioning.
+ *  See <https://www.mediawiki.org/wiki/OOjs_UI/Concepts#Overlays>.
  */
 OO.ui.CapsuleMultiselectWidget = function OoUiCapsuleMultiselectWidget( config ) {
 	var $tabFocus;
@@ -3795,6 +3802,7 @@ OO.ui.CapsuleMultiselectWidget = function OoUiCapsuleMultiselectWidget( config )
 		this.$input.prop( 'disabled', this.isDisabled() );
 		this.$input.attr( {
 			role: 'combobox',
+			'aria-owns': this.menu.getElementId(),
 			'aria-autocomplete': 'list'
 		} );
 	}
@@ -5512,7 +5520,8 @@ OO.ui.TagMultiselectWidget.prototype.isValid = function () {
  * @mixins OO.ui.mixin.PopupElement
  *
  * @param {Object} config Configuration object
- * @cfg {jQuery} [$overlay] An overlay for the popup
+ * @cfg {jQuery} [$overlay] An overlay for the popup.
+ *  See <https://www.mediawiki.org/wiki/OOjs_UI/Concepts#Overlays>.
  * @cfg {Object} [popup] Configuration options for the popup
  * @cfg {OO.ui.InputWidget} [popupInput] An input widget inside the popup that will be
  *  focused when the popup is opened and will be used as replacement for the
@@ -5566,6 +5575,7 @@ OO.ui.PopupTagMultiselectWidget = function OoUiPopupTagMultiselectWidget( config
 	}
 
 	// Events
+	this.on( 'resize', this.popup.updateDimensions.bind( this.popup ) );
 	this.popup.connect( this, { toggle: 'onPopupToggle' } );
 	this.$tabIndexed
 		.on( 'focus', this.focus.bind( this ) );
@@ -5675,7 +5685,8 @@ OO.ui.PopupTagMultiselectWidget.prototype.addTagByPopupValue = function ( data,
  * @constructor
  * @param {Object} [config] Configuration object
  * @cfg {Object} [menu] Configuration object for the menu widget
- * @cfg {jQuery} [$overlay] An overlay for the menu
+ * @cfg {jQuery} [$overlay] An overlay for the menu.
+ *  See <https://www.mediawiki.org/wiki/OOjs_UI/Concepts#Overlays>.
  * @cfg {Object[]} [options=[]] Array of menu options in the format `{ data: …, label: … }`
  */
 OO.ui.MenuTagMultiselectWidget = function OoUiMenuTagMultiselectWidget( config ) {
@@ -6546,14 +6557,13 @@ OO.ui.SearchWidget.prototype.getResults = function () {
  *     $( 'body' ).append( numberInput.$element );
  *
  * @class
- * @extends OO.ui.Widget
+ * @extends OO.ui.TextInputWidget
  *
  * @constructor
  * @param {Object} [config] Configuration options
- * @cfg {Object} [input] Configuration options to pass to the {@link OO.ui.TextInputWidget text input widget}.
  * @cfg {Object} [minusButton] Configuration options to pass to the {@link OO.ui.ButtonWidget decrementing button widget}.
  * @cfg {Object} [plusButton] Configuration options to pass to the {@link OO.ui.ButtonWidget incrementing button widget}.
- * @cfg {boolean} [isInteger=false] Whether the field accepts only integer values.
+ * @cfg {boolean} [allowInteger=false] Whether the field accepts only integer values.
  * @cfg {number} [min=-Infinity] Minimum allowed value
  * @cfg {number} [max=Infinity] Maximum allowed value
  * @cfg {number} [step=1] Delta when using the buttons or up/down arrow keys
@@ -6561,6 +6571,9 @@ OO.ui.SearchWidget.prototype.getResults = function () {
  * @cfg {boolean} [showButtons=true] Whether to show the plus and minus buttons.
  */
 OO.ui.NumberInputWidget = function OoUiNumberInputWidget( config ) {
+	var $field = $( '<div>' )
+		.addClass( 'oo-ui-numberInputWidget-field' );
+
 	// Configuration initialization
 	config = $.extend( {
 		isInteger: false,
@@ -6571,17 +6584,15 @@ OO.ui.NumberInputWidget = function OoUiNumberInputWidget( config ) {
 		showButtons: true
 	}, config );
 
+	// For backward compatibility
+	$.extend( config, config.input );
+	this.input = this;
+
 	// Parent constructor
-	OO.ui.NumberInputWidget.parent.call( this, config );
+	OO.ui.NumberInputWidget.parent.call( this, $.extend( config, {
+		type: 'number'
+	} ) );
 
-	// Properties
-	this.input = new OO.ui.TextInputWidget( $.extend(
-		{
-			disabled: this.isDisabled(),
-			type: 'number'
-		},
-		config.input
-	) );
 	if ( config.showButtons ) {
 		this.minusButton = new OO.ui.ButtonWidget( $.extend(
 			{
@@ -6604,11 +6615,7 @@ OO.ui.NumberInputWidget = function OoUiNumberInputWidget( config ) {
 	}
 
 	// Events
-	this.input.connect( this, {
-		change: this.emit.bind( this, 'change' ),
-		enter: this.emit.bind( this, 'enter' )
-	} );
-	this.input.$input.on( {
+	this.$input.on( {
 		keydown: this.onKeyDown.bind( this ),
 		'wheel mousewheel DOMMouseScroll': this.onWheel.bind( this )
 	} );
@@ -6621,40 +6628,31 @@ OO.ui.NumberInputWidget = function OoUiNumberInputWidget( config ) {
 		} );
 	}
 
-	// Initialization
-	this.setIsInteger( !!config.isInteger );
-	this.setRange( config.min, config.max );
-	this.setStep( config.step, config.pageStep );
-
-	this.$field = $( '<div>' ).addClass( 'oo-ui-numberInputWidget-field' )
-		.append( this.input.$element );
-	this.$element.addClass( 'oo-ui-numberInputWidget' ).append( this.$field );
+	// Build the field
+	$field.append( this.$input );
 	if ( config.showButtons ) {
-		this.$field
+		$field
 			.prepend( this.minusButton.$element )
 			.append( this.plusButton.$element );
-		this.$element.addClass( 'oo-ui-numberInputWidget-buttoned' );
 	}
-	this.input.setValidation( this.validateNumber.bind( this ) );
-};
-
-/* Setup */
 
-OO.inheritClass( OO.ui.NumberInputWidget, OO.ui.Widget );
+	// Initialization
+	this.setAllowInteger( config.isInteger || config.allowInteger );
+	this.setRange( config.min, config.max );
+	this.setStep( config.step, config.pageStep );
+	// Set the validation method after we set isInteger and range
+	// so that it doesn't immediately call setValidityFlag
+	this.setValidation( this.validateNumber.bind( this ) );
 
-/* Events */
+	this.$element
+		.addClass( 'oo-ui-numberInputWidget' )
+		.toggleClass( 'oo-ui-numberInputWidget-buttoned', config.showButtons )
+		.append( $field );
+};
 
-/**
- * A `change` event is emitted when the value of the input changes.
- *
- * @event change
- */
+/* Setup */
 
-/**
- * An `enter` event is emitted when the user presses 'enter' inside the text box.
- *
- * @event enter
- */
+OO.inheritClass( OO.ui.NumberInputWidget, OO.ui.TextInputWidget );
 
 /* Methods */
 
@@ -6663,19 +6661,23 @@ OO.inheritClass( OO.ui.NumberInputWidget, OO.ui.Widget );
  *
  * @param {boolean} flag
  */
-OO.ui.NumberInputWidget.prototype.setIsInteger = function ( flag ) {
+OO.ui.NumberInputWidget.prototype.setAllowInteger = function ( flag ) {
 	this.isInteger = !!flag;
-	this.input.setValidityFlag();
+	this.setValidityFlag();
 };
+// Backward compatibility
+OO.ui.NumberInputWidget.prototype.setIsInteger = OO.ui.NumberInputWidget.prototype.setAllowInteger;
 
 /**
  * Get whether only integers are allowed
  *
  * @return {boolean} Flag value
  */
-OO.ui.NumberInputWidget.prototype.getIsInteger = function () {
+OO.ui.NumberInputWidget.prototype.getAllowInteger = function () {
 	return this.isInteger;
 };
+// Backward compatibility
+OO.ui.NumberInputWidget.prototype.getIsInteger = OO.ui.NumberInputWidget.prototype.getAllowInteger;
 
 /**
  * Set the range of allowed values
@@ -6689,7 +6691,7 @@ OO.ui.NumberInputWidget.prototype.setRange = function ( min, max ) {
 	}
 	this.min = min;
 	this.max = max;
-	this.input.setValidityFlag();
+	this.setValidityFlag();
 };
 
 /**
@@ -6729,31 +6731,13 @@ OO.ui.NumberInputWidget.prototype.getStep = function () {
 	return [ this.step, this.pageStep ];
 };
 
-/**
- * Get the current value of the widget
- *
- * @return {string}
- */
-OO.ui.NumberInputWidget.prototype.getValue = function () {
-	return this.input.getValue();
-};
-
 /**
  * Get the current value of the widget as a number
  *
  * @return {number} May be NaN, or an invalid number
  */
 OO.ui.NumberInputWidget.prototype.getNumericValue = function () {
-	return +this.input.getValue();
-};
-
-/**
- * Set the value of the widget
- *
- * @param {string} value Invalid values are allowed
- */
-OO.ui.NumberInputWidget.prototype.setValue = function ( value ) {
-	this.input.setValue( value );
+	return +this.getValue();
 };
 
 /**
@@ -6783,7 +6767,6 @@ OO.ui.NumberInputWidget.prototype.adjustValue = function ( delta ) {
 		this.setValue( n );
 	}
 };
-
 /**
  * Validate input
  *
@@ -6793,6 +6776,10 @@ OO.ui.NumberInputWidget.prototype.adjustValue = function ( delta ) {
  */
 OO.ui.NumberInputWidget.prototype.validateNumber = function ( value ) {
 	var n = +value;
+	if ( value === '' ) {
+		return !this.isRequired();
+	}
+
 	if ( isNaN( n ) || !isFinite( n ) ) {
 		return false;
 	}
@@ -6827,7 +6814,7 @@ OO.ui.NumberInputWidget.prototype.onButtonClick = function ( dir ) {
 OO.ui.NumberInputWidget.prototype.onWheel = function ( event ) {
 	var delta = 0;
 
-	if ( !this.isDisabled() && this.input.$input.is( ':focus' ) ) {
+	if ( !this.isDisabled() && this.$input.is( ':focus' ) ) {
 		// Standard 'wheel' event
 		if ( event.originalEvent.deltaMode !== undefined ) {
 			this.sawWheelEvent = true;
@@ -6892,9 +6879,6 @@ OO.ui.NumberInputWidget.prototype.setDisabled = function ( disabled ) {
 	// Parent method
 	OO.ui.NumberInputWidget.parent.prototype.setDisabled.call( this, disabled );
 
-	if ( this.input ) {
-		this.input.setDisabled( this.isDisabled() );
-	}
 	if ( this.minusButton ) {
 		this.minusButton.setDisabled( this.isDisabled() );
 	}
diff --git a/resources/lib/oojs-ui/oojs-ui-windows-apex.css b/resources/lib/oojs-ui/oojs-ui-windows-apex.css
index c9c4c1bc38..422dbd2b7f 100644
--- a/resources/lib/oojs-ui/oojs-ui-windows-apex.css
+++ b/resources/lib/oojs-ui/oojs-ui-windows-apex.css
@@ -1,12 +1,12 @@
 /*!
- * OOjs UI v0.21.1
+ * OOjs UI v0.21.2
  * https://www.mediawiki.org/wiki/OOjs_UI
  *
  * Copyright 2011–2017 OOjs UI Team and other contributors.
  * Released under the MIT license
  * http://oojs.mit-license.org
  *
- * Date: 2017-04-18T23:32:54Z
+ * Date: 2017-04-26T01:05:15Z
  */
 .oo-ui-actionWidget.oo-ui-pendingElement-pending {
   background-image: /* @embed */ url(themes/apex/images/textures/pending.gif);
@@ -213,7 +213,7 @@
   left: 0;
   right: 0;
   bottom: 0;
-  z-index: 2;
+  z-index: 4;
   overflow-x: hidden;
   overflow-y: auto;
 }
diff --git a/resources/lib/oojs-ui/oojs-ui-windows-mediawiki.css b/resources/lib/oojs-ui/oojs-ui-windows-mediawiki.css
index f6828e27b9..8a69c0f099 100644
--- a/resources/lib/oojs-ui/oojs-ui-windows-mediawiki.css
+++ b/resources/lib/oojs-ui/oojs-ui-windows-mediawiki.css
@@ -1,12 +1,12 @@
 /*!
- * OOjs UI v0.21.1
+ * OOjs UI v0.21.2
  * https://www.mediawiki.org/wiki/OOjs_UI
  *
  * Copyright 2011–2017 OOjs UI Team and other contributors.
  * Released under the MIT license
  * http://oojs.mit-license.org
  *
- * Date: 2017-04-18T23:32:54Z
+ * Date: 2017-04-26T01:05:15Z
  */
 .oo-ui-window {
   background: transparent;
@@ -212,7 +212,7 @@
   left: 0;
   right: 0;
   bottom: 0;
-  z-index: 2;
+  z-index: 4;
   overflow-x: hidden;
   overflow-y: auto;
 }
diff --git a/resources/lib/oojs-ui/oojs-ui-windows.js b/resources/lib/oojs-ui/oojs-ui-windows.js
index c955919d91..5a06841e1b 100644
--- a/resources/lib/oojs-ui/oojs-ui-windows.js
+++ b/resources/lib/oojs-ui/oojs-ui-windows.js
@@ -1,12 +1,12 @@
 /*!
- * OOjs UI v0.21.1
+ * OOjs UI v0.21.2
  * https://www.mediawiki.org/wiki/OOjs_UI
  *
  * Copyright 2011–2017 OOjs UI Team and other contributors.
  * Released under the MIT license
  * http://oojs.mit-license.org
  *
- * Date: 2017-04-18T23:32:49Z
+ * Date: 2017-04-26T01:05:10Z
  */
 ( function ( OO ) {
 
@@ -1636,6 +1636,26 @@ OO.ui.Window = function OoUiWindow( config ) {
 	this.manager = null;
 	this.size = config.size || this.constructor.static.size;
 	this.$frame = $( '<div>' );
+	/**
+	 * Overlay element to use for the `$overlay` configuration option of widgets that support it.
+	 * Things put inside of it are overlaid on top of the window and are not bound to its dimensions.
+	 * See <https://www.mediawiki.org/wiki/OOjs_UI/Concepts#Overlays>.
+	 *
+	 *     MyDialog.prototype.initialize = function () {
+	 *       ...
+	 *       var popupButton = new OO.ui.PopupButtonWidget( {
+	 *         $overlay: this.$overlay,
+	 *         label: 'Popup button',
+	 *         popup: {
+	 *           $content: $( '<p>Popup contents.</p><p>Popup contents.</p><p>Popup contents.</p>' ),
+	 *           padded: true
+	 *         }
+	 *       } );
+	 *       ...
+	 *     };
+	 *
+	 * @property {jQuery}
+	 */
 	this.$overlay = $( '<div>' );
 	this.$content = $( '<div>' );
 
@@ -2492,21 +2512,15 @@ OO.ui.Dialog.prototype.getTeardownProcess = function ( data ) {
  * @inheritdoc
  */
 OO.ui.Dialog.prototype.initialize = function () {
-	var titleId;
-
 	// Parent method
 	OO.ui.Dialog.parent.prototype.initialize.call( this );
 
-	titleId = OO.ui.generateElementId();
-
 	// Properties
-	this.title = new OO.ui.LabelWidget( {
-		id: titleId
-	} );
+	this.title = new OO.ui.LabelWidget();
 
 	// Initialization
 	this.$content.addClass( 'oo-ui-dialog-content' );
-	this.$element.attr( 'aria-labelledby', titleId );
+	this.$element.attr( 'aria-labelledby', this.title.getElementId() );
 	this.setPendingElement( this.$head );
 };