Add accessibility labels to a few controls

Topic title field and old wikitext reply field had only placeholders,
but no labels.

Mode selector had labels on individual items, but not on the main
control.

Change-Id: I422e7e5baa8711340a1bb82255e788f2272c45c9

extension.json

@@ -151,7 +151,8 @@
 				"discussiontools-replywidget-transcluded",
 				"visualeditor-key-ctrl",
 				"visualeditor-key-enter",
-				"visualeditor-key-escape"
+				"visualeditor-key-escape",
+				"visualeditor-mweditmode-tooltip"
 			],
 			"dependencies": [
 				"oojs-ui-widgets",

modules/NewTopicController.js

@@ -19,6 +19,7 @@ function NewTopicController( $pageContainer, $replyLink ) {
 		placeholder: mw.msg( 'discussiontools-newtopic-placeholder-title' ),
 		spellcheck: true
 	} );
+	this.sectionTitle.$input.attr( 'aria-label', mw.msg( 'discussiontools-newtopic-placeholder-title' ) );
 	this.sectionTitleField = new OO.ui.FieldLayout( this.sectionTitle, {
 		align: 'top'
 	} );

modules/dt.ui.ReplyWidget.js

@@ -100,6 +100,7 @@ function ReplyWidget( commentController, comment, pageName, oldId, config ) {
 		],
 		framed: false
 	} );
+	this.modeTabSelect.$element.attr( 'aria-label', mw.msg( 'visualeditor-mweditmode-tooltip' ) );
 	// Make the option for the current mode disabled, to make it un-interactable
 	// (we override the styles to make it look as if it was selected)
 	this.modeTabSelect.findItemFromData( this.getMode() ).setDisabled( true );

modules/dt.ui.ReplyWidgetPlain.js

@@ -40,6 +40,7 @@ ReplyWidgetPlain.prototype.createReplyBodyWidget = function ( config ) {
 		// * mw-editfont-serif
 		classes: [ 'mw-editfont-' + mw.user.options.get( 'editfont' ) ]
 	}, config ) );
+	textInput.$input.attr( 'aria-label', config.placeholder );
 	// Fix jquery.ime position (T255191)
 	textInput.$input.addClass( 'ime-position-inside' );
 	return textInput;