From be5289689f3e06797714514f0f6ce43c408e90a5 Mon Sep 17 00:00:00 2001
From: hunter <jhobbs14@msudenver.edu>
Date: Fri, 13 Apr 2018 12:45:03 -0600
Subject: [PATCH] Add label to Options dialog > Categories input fields

Add label to indicate the function of the input field underneath the
categories label in the options dialog. The <label> element is
preferred for screen readers and users with visual disabilities.

Bug: T146966
Change-Id: Ib300ca7a1fd55d320c1a1a8c8c7fd01ab8b0b9c5
---
 extension.json                                   |  1 +
 i18n/ve-mw/en.json                               |  1 +
 i18n/ve-mw/qqq.json                              |  1 +
 modules/ve-mw/ui/pages/ve.ui.MWCategoriesPage.js | 14 +++++++++++++-
 4 files changed, 16 insertions(+), 1 deletion(-)

diff --git a/extension.json b/extension.json
index f7d97593bd..6b39519467 100644
--- a/extension.json
+++ b/extension.json
@@ -1693,6 +1693,7 @@
 				"visualeditor-categories-tool",
 				"visualeditor-dialog-meta-advancedsettings-label",
 				"visualeditor-dialog-meta-advancedsettings-section",
+				"visualeditor-dialog-meta-categories-addcategory-label",
 				"visualeditor-dialog-meta-categories-category",
 				"visualeditor-dialog-meta-categories-data-label",
 				"visualeditor-dialog-meta-categories-defaultsort-help",
diff --git a/i18n/ve-mw/en.json b/i18n/ve-mw/en.json
index 37b279ccf4..7597f0832b 100644
--- a/i18n/ve-mw/en.json
+++ b/i18n/ve-mw/en.json
@@ -151,6 +151,7 @@
 	"visualeditor-dialog-media-upload": "Upload",
 	"visualeditor-dialog-meta-advancedsettings-label": "Advanced settings",
 	"visualeditor-dialog-meta-advancedsettings-section": "Advanced settings",
+	"visualeditor-dialog-meta-categories-addcategory-label": "Add a category to this page",
 	"visualeditor-dialog-meta-categories-category": "Category",
 	"visualeditor-dialog-meta-categories-data-label": "Categories",
 	"visualeditor-dialog-meta-categories-defaultsort-help": "You can override how this page is sorted when displayed within a category by setting a different index to sort with instead. This is often used to make pages about people show by last name, but be named with their first name shown first.",
diff --git a/i18n/ve-mw/qqq.json b/i18n/ve-mw/qqq.json
index fda8b47771..56698e0147 100644
--- a/i18n/ve-mw/qqq.json
+++ b/i18n/ve-mw/qqq.json
@@ -165,6 +165,7 @@
 	"visualeditor-dialog-media-upload": "Label for the upload button\n{{Identical|Upload}}",
 	"visualeditor-dialog-meta-advancedsettings-label": "Title for the advanced settings dialog section.\n{{Identical|Advanced settings}}",
 	"visualeditor-dialog-meta-advancedsettings-section": "Label for the advanced settings dialog section.\n{{Identical|Advanced settings}}",
+	"visualeditor-dialog-meta-categories-addcategory-label": "Label for field that adds a category to the page",
 	"visualeditor-dialog-meta-categories-category": "Title of popup for editing category options.\n{{Identical|Category}}",
 	"visualeditor-dialog-meta-categories-data-label": "Label for the categories sub-section.\n{{Identical|Category}}",
 	"visualeditor-dialog-meta-categories-defaultsort-help": "Message displayed as contextual help about the <nowiki>{{DEFAULTSORT:…}}</nowiki> control to editors in the page categories panel.",
diff --git a/modules/ve-mw/ui/pages/ve.ui.MWCategoriesPage.js b/modules/ve-mw/ui/pages/ve.ui.MWCategoriesPage.js
index 99ca522e9c..59cd5e48a3 100644
--- a/modules/ve-mw/ui/pages/ve.ui.MWCategoriesPage.js
+++ b/modules/ve-mw/ui/pages/ve.ui.MWCategoriesPage.js
@@ -31,13 +31,25 @@ ve.ui.MWCategoriesPage = function VeUiMWCategoriesPage( name, config ) {
 		label: ve.msg( 'visualeditor-dialog-meta-categories-data-label' ),
 		icon: 'tag'
 	} );
+
 	this.categoryOptionsFieldset = new OO.ui.FieldsetLayout( {
 		label: ve.msg( 'visualeditor-dialog-meta-categories-options' ),
 		icon: 'advanced'
 	} );
+
 	this.categoryWidget = new ve.ui.MWCategoryWidget( {
 		$overlay: config.$overlay
 	} );
+
+	this.addCategory = new OO.ui.FieldLayout(
+		this.categoryWidget,
+		{
+			$overlay: config.$overlay,
+			align: 'top',
+			label: ve.msg( 'visualeditor-dialog-meta-categories-addcategory-label' )
+		}
+	);
+
 	this.defaultSortInput = new OO.ui.TextInputWidget( {
 		placeholder: this.fallbackDefaultSortKey
 	} );
@@ -64,7 +76,7 @@ ve.ui.MWCategoriesPage = function VeUiMWCategoriesPage( name, config ) {
 	} );
 
 	// Initialization
-	this.categoriesFieldset.$element.append( this.categoryWidget.$element );
+	this.categoriesFieldset.addItems( [ this.addCategory ] );
 	this.categoryOptionsFieldset.addItems( [ this.defaultSort ] );
 	this.$element.append( this.categoriesFieldset.$element, this.categoryOptionsFieldset.$element );
 };