wikimedia/mediawiki-extensions-RevisionSlider
1
0
Fork 0
mirror of https://gerrit.wikimedia.org/r/mediawiki/extensions/RevisionSlider synced 2024-11-15 03:33:45 +00:00
Code Issues Packages Projects Releases Wiki Activity

Append tooltip to focused pointer to allow tabbing into it

Browse source 
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
This commit is contained in:
WMDE-Fisch 2023-08-23 12:04:10 +02:00
parent 72ef3975c7
commit cd90d01977
2 changed files with 9 additions and 4 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

9
modules/ext.RevisionSlider.RevisionListView.js
View file

@ -289,7 +289,14 @@ $.extend( RevisionListView.prototype, {
// eslint-disable-next-line mediawiki/class-doc // eslint-disable-next-line mediawiki/class-doc
tooltip.$element.addClass( 'mw-revslider-revision-tooltip-' + pos ); 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 ); tooltip.toggle( true );
// TODO this line should move somewhere else // TODO this line should move somewhere else
$revisionWrapper.addClass( 'mw-revslider-revision-wrapper-hovered' ); $revisionWrapper.addClass( 'mw-revslider-revision-wrapper-hovered' );

4
modules/ext.RevisionSlider.less
View file

@ -125,7 +125,7 @@
} }
.mw-revslider-tooltip { .mw-revslider-tooltip {
font-size: 0.8em; font-size: 13px;
} }
.mw-revslider-revision-tooltip { .mw-revslider-revision-tooltip {
@ -429,8 +429,6 @@ of the frameless one (to fit the size of the toggle button */
.mw-revslider-highlightable-row { .mw-revslider-highlightable-row {
border: 1px solid transparent; border: 1px solid transparent;
border-radius: 5em; border-radius: 5em;
margin-left: -8px;
padding-left: 7px;
&.mw-revslider-highlight { &.mw-revslider-highlight {
border-color: #e0e0e0; border-color: #e0e0e0;