From 70ac607c42000bac7ab341a88db18fb58e89062b Mon Sep 17 00:00:00 2001
From: Akinwale Alagbe <akalagbe@microsoft.com>
Date: Fri, 28 Feb 2020 13:42:02 -0800
Subject: [PATCH] RCFilters: Add ARIA label to filters namespaces and tags
 select widget

Bug: T246179
Change-Id: Id40b536b8e2a8fd35861fdd89ba7ce79ef14458e
---
 languages/i18n/en.json                                |  1 +
 languages/i18n/qqq.json                               |  1 +
 resources/Resources.php                               |  1 +
 .../ui/FilterTagMultiselectWidget.js                  | 11 ++++++++++-
 4 files changed, 13 insertions(+), 1 deletion(-)

diff --git a/languages/i18n/en.json b/languages/i18n/en.json
index 237f5fc9401..742aa09fec0 100644
--- a/languages/i18n/en.json
+++ b/languages/i18n/en.json
@@ -1563,6 +1563,7 @@
 	"rcfilters-tag-prefix-tags": "#$1",
 	"rcfilters-exclude-button-off": "Exclude selected",
 	"rcfilters-exclude-button-on": "Excluding selected",
+	"rcfilters-view-filter-select-widget-aria-label": "Select filter results changes filters",
 	"rcfilters-view-tags": "Tagged edits",
 	"rcfilters-view-namespaces-tooltip": "Filter results by namespace",
 	"rcfilters-view-tags-tooltip": "Filter results using edit tags",
diff --git a/languages/i18n/qqq.json b/languages/i18n/qqq.json
index 22a60e7515d..f862800dc89 100644
--- a/languages/i18n/qqq.json
+++ b/languages/i18n/qqq.json
@@ -1777,6 +1777,7 @@
 	"rcfilters-tag-prefix-tags": "Prefix for the edit tags in [[Special:RecentChanges]]. Edit tags use a hash (#) as prefix. Please keep this format.\n\nParameters:\n* $1 - Tag display name.",
 	"rcfilters-exclude-button-off": "Title for the button that excludes selected namespaces, when it is not yet active.",
 	"rcfilters-exclude-button-on": "Title for the button that excludes selected namespaces, when it is active.",
+	"rcfilters-view-filter-select-widget-aria-label": "Label to be used by screen reader to identify the filter results select filter widget in [[Special:RecentChanges]]",
 	"rcfilters-view-tags": "Title for the tags view in [[Special:RecentChanges]].",
 	"rcfilters-view-namespaces-tooltip": "Tooltip for the button that loads the namespace view in [[Special:RecentChanges]]",
 	"rcfilters-view-tags-tooltip": "Tooltip for the button that loads the tags view in [[Special:RecentChanges]]",
diff --git a/resources/Resources.php b/resources/Resources.php
index 2409248affe..6ead139af8e 100644
--- a/resources/Resources.php
+++ b/resources/Resources.php
@@ -1676,6 +1676,7 @@ return [
 			'rcfilters-tag-prefix-tags',
 			'rcfilters-exclude-button-off',
 			'rcfilters-exclude-button-on',
+			'rcfilters-view-filter-select-widget-aria-label',
 			'rcfilters-view-tags',
 			'rcfilters-view-namespaces-tooltip',
 			'rcfilters-view-tags-tooltip',
diff --git a/resources/src/mediawiki.rcfilters/ui/FilterTagMultiselectWidget.js b/resources/src/mediawiki.rcfilters/ui/FilterTagMultiselectWidget.js
index 211bc506e57..d71bfdee298 100644
--- a/resources/src/mediawiki.rcfilters/ui/FilterTagMultiselectWidget.js
+++ b/resources/src/mediawiki.rcfilters/ui/FilterTagMultiselectWidget.js
@@ -105,6 +105,8 @@ FilterTagMultiselectWidget = function MwRcfiltersUiFilterTagMultiselectWidget( c
 		}
 	}, config ) );
 
+	this.input.$input.attr( 'aria-label', mw.msg( 'rcfilters-search-placeholder' ) );
+
 	this.savedQueryTitle = new OO.ui.LabelWidget( {
 		label: '',
 		classes: [ 'mw-rcfilters-ui-filterTagMultiselectWidget-wrapper-content-savedQueryTitle' ]
@@ -259,7 +261,7 @@ OO.inheritClass( FilterTagMultiselectWidget, OO.ui.MenuTagMultiselectWidget );
  * @return {OO.ui.ButtonSelectWidget}
  */
 FilterTagMultiselectWidget.prototype.createViewsSelectWidget = function () {
-	return new OO.ui.ButtonSelectWidget( {
+	var viewsSelectWidget = new OO.ui.ButtonSelectWidget( {
 		classes: this.isMobile ?
 			[
 				'mw-rcfilters-ui-table',
@@ -286,6 +288,13 @@ FilterTagMultiselectWidget.prototype.createViewsSelectWidget = function () {
 			} )
 		]
 	} );
+
+	viewsSelectWidget.$element.attr( 'aria-label', mw.msg( 'rcfilters-view-filter-select-widget-aria-label' ) );
+	viewsSelectWidget.items.forEach( function ( item ) {
+		item.$element.attr( 'aria-label', item.title );
+	} );
+
+	return viewsSelectWidget;
 };
 
 /**