From cd90d019779bca0ab95931dc78304d3d5f831e01 Mon Sep 17 00:00:00 2001
From: WMDE-Fisch <christoph.jauera@wikimedia.de>
Date: Wed, 23 Aug 2023 12:04:10 +0200
Subject: [PATCH] Append tooltip to focused pointer to allow tabbing into it

When the user uses the keyboard to interact with the slider, the
revisions can changed by moving the pointers with the arrorw keys.

In that case the pointers have keyboard focus. To allow tabbing
into the popup from that position, the tooltip needs to follow the
pointer in the DOM. That's what's done in this patch.

Bug: T341872
Change-Id: I75ef7c32fb105526552eac387ff5a5bda8eefe1b
---
 modules/ext.RevisionSlider.RevisionListView.js | 9 ++++++++-
 modules/ext.RevisionSlider.less                | 4 +---
 2 files changed, 9 insertions(+), 4 deletions(-)

diff --git a/modules/ext.RevisionSlider.RevisionListView.js b/modules/ext.RevisionSlider.RevisionListView.js
index 2461427a..6cd6a7e8 100644
--- a/modules/ext.RevisionSlider.RevisionListView.js
+++ b/modules/ext.RevisionSlider.RevisionListView.js
@@ -289,7 +289,14 @@ $.extend( RevisionListView.prototype, {
 		// eslint-disable-next-line mediawiki/class-doc
 		tooltip.$element.addClass( 'mw-revslider-revision-tooltip-' + pos );
 
-		$( document.body ).append( tooltip.$element );
+		const $focusedRevisionPointer = $( '.mw-revslider-pointer[data-pos="' + pos + '"]' );
+		if ( $focusedRevisionPointer.length ) {
+			// Make sure tooltips are added next to the pointer so they can be reached when tabbing
+			$focusedRevisionPointer.parent().append( tooltip.$element );
+		} else {
+			$( document.body ).append( tooltip.$element );
+		}
+
 		tooltip.toggle( true );
 		// TODO this line should move somewhere else
 		$revisionWrapper.addClass( 'mw-revslider-revision-wrapper-hovered' );
diff --git a/modules/ext.RevisionSlider.less b/modules/ext.RevisionSlider.less
index 2518ebfe..a16de043 100644
--- a/modules/ext.RevisionSlider.less
+++ b/modules/ext.RevisionSlider.less
@@ -125,7 +125,7 @@
 }
 
 .mw-revslider-tooltip {
-	font-size: 0.8em;
+	font-size: 13px;
 }
 
 .mw-revslider-revision-tooltip {
@@ -429,8 +429,6 @@ of the frameless one (to fit the size of the toggle button */
 .mw-revslider-highlightable-row {
 	border: 1px solid transparent;
 	border-radius: 5em;
-	margin-left: -8px;
-	padding-left: 7px;
 
 	&.mw-revslider-highlight {
 		border-color: #e0e0e0;