From 538d1d2c9ec2f129eb3b2c72f25ff6da65e2aba6 Mon Sep 17 00:00:00 2001
From: Moriel Schottlender <moriel@gmail.com>
Date: Fri, 18 Aug 2017 16:01:30 -0700
Subject: [PATCH] RCFilters: Add title attribute to highlighted rows

For accessibility and screen readers, add the actual highlighted
filter names to a title attribute in rows that are highlighted.

Bug: T173608
Change-Id: Id71a45621e545897988010acfd054760a617b1f1
---
 languages/i18n/en.json                        |  1 +
 languages/i18n/qqq.json                       |  1 +
 resources/Resources.php                       |  1 +
 ...w.rcfilters.ui.ChangesListWrapperWidget.js | 28 ++++++++++++++++++-
 4 files changed, 30 insertions(+), 1 deletion(-)

diff --git a/languages/i18n/en.json b/languages/i18n/en.json
index 6126bbd6e7..b5cc6a59b3 100644
--- a/languages/i18n/en.json
+++ b/languages/i18n/en.json
@@ -1362,6 +1362,7 @@
 	"rcfilters-hours-title": "Recent hours",
 	"rcfilters-days-show-days": "$1 {{PLURAL:$1|day|days}}",
 	"rcfilters-days-show-hours": "$1 {{PLURAL:$1|hour|hours}}",
+	"rcfilters-highlighted-filters-list": "Highlighted: $1",
 	"rcfilters-quickfilters": "Saved filters",
 	"rcfilters-quickfilters-placeholder-title": "No links saved yet",
 	"rcfilters-quickfilters-placeholder-description": "To save your filter settings and reuse them later, click the bookmark icon in the Active Filter area, below.",
diff --git a/languages/i18n/qqq.json b/languages/i18n/qqq.json
index bc0fe2c657..25517b9a0a 100644
--- a/languages/i18n/qqq.json
+++ b/languages/i18n/qqq.json
@@ -1552,6 +1552,7 @@
 	"rcfilters-hours-title": "Title for the options to change the number of hours for the results shown.",
 	"rcfilters-days-show-days": "Title for the button that opens the operation to control the day range for the results. \n\nParameters: $1 - Number of days shown",
 	"rcfilters-days-show-hours": "Title for the button that opens the operation to control the hour range for the results. \n\nParameters: $1 - Number of hours shown",
+	"rcfilters-highlighted-filters-list": "Text for the tooltip that is displayed over highlighted results, specifying which filters the result matches in [[Special:RecentChanges]] when RCFilters are enabled. \n\nParameters: $1 - A comma separated list of matching filter names.",
 	"rcfilters-quickfilters": "Label for the button that opens the saved filter settings menu in [[Special:RecentChanges]]",
 	"rcfilters-quickfilters-placeholder-title": "Title for the text shown in the quick filters menu on [[Special:RecentChanges]] if the user has not saved any quick filters.",
 	"rcfilters-quickfilters-placeholder-description": "Description for the text shown in the quick filters menu on [[Special:RecentChanges]] if the user has not saved any quick filters.",
diff --git a/resources/Resources.php b/resources/Resources.php
index c0c5d9ed27..0216471c93 100644
--- a/resources/Resources.php
+++ b/resources/Resources.php
@@ -1842,6 +1842,7 @@ return [
 			'rcfilters-hours-title',
 			'rcfilters-days-show-days',
 			'rcfilters-days-show-hours',
+			'rcfilters-highlighted-filters-list',
 			'rcfilters-quickfilters',
 			'rcfilters-quickfilters-placeholder-title',
 			'rcfilters-quickfilters-placeholder-description',
diff --git a/resources/src/mediawiki.rcfilters/ui/mw.rcfilters.ui.ChangesListWrapperWidget.js b/resources/src/mediawiki.rcfilters/ui/mw.rcfilters.ui.ChangesListWrapperWidget.js
index 28a80cca1c..955e01dd70 100644
--- a/resources/src/mediawiki.rcfilters/ui/mw.rcfilters.ui.ChangesListWrapperWidget.js
+++ b/resources/src/mediawiki.rcfilters/ui/mw.rcfilters.ui.ChangesListWrapperWidget.js
@@ -303,10 +303,33 @@
 		}
 
 		this.filtersViewModel.getHighlightedItems().forEach( function ( filterItem ) {
+			var $elements = this.$element.find( '.' + filterItem.getCssClass() );
+
 			// Add highlight class to all highlighted list items
-			this.$element.find( '.' + filterItem.getCssClass() )
+			$elements
 				.addClass( 'mw-rcfilters-highlight-color-' + filterItem.getHighlightColor() );
+
+			$elements.each( function () {
+				var filterString = $( this ).attr( 'data-highlightedFilters' ) || '',
+					filters = filterString ? filterString.split( '|' ) : [];
+
+				if ( filters.indexOf( filterItem.getLabel() ) === -1 ) {
+					filters.push( filterItem.getLabel() );
+				}
+
+				$( this )
+					.attr( 'data-highlightedFilters', filters.join( '|' ) );
+			} );
 		}.bind( this ) );
+		// Apply a title for relevant filters
+		this.$element.find( '[data-highlightedFilters]' ).each( function () {
+			var filterString = $( this ).attr( 'data-highlightedFilters' ) || '',
+				filters = filterString ? filterString.split( '|' ) : [];
+
+			if ( filterString ) {
+				$( this ).attr( 'title', mw.msg( 'rcfilters-highlighted-filters-list', filters.join( ', ' ) ) );
+			}
+		} );
 
 		// Turn on highlights
 		this.$element.addClass( 'mw-rcfilters-ui-changesListWrapperWidget-highlighted' );
@@ -321,6 +344,9 @@
 			this.$element.find( '.mw-rcfilters-highlight-color-' + color ).removeClass( 'mw-rcfilters-highlight-color-' + color );
 		}.bind( this ) );
 
+		this.$element.find( '[data-highlightedFilters]' )
+			.removeAttr( 'title' )
+			.removeAttr( 'data-highlightedFilters' );
 		// Turn off highlights
 		this.$element.removeClass( 'mw-rcfilters-ui-changesListWrapperWidget-highlighted' );
 	};
-- 
2.20.1