diff options
| author | Daniel Calviño Sánchez <danxuliu@gmail.com> | 2018-11-15 06:16:10 +0100 |
|---|---|---|
| committer | Daniel Calviño Sánchez <danxuliu@gmail.com> | 2018-11-20 12:18:15 +0100 |
| commit | 9fc7e916f8e5181ea7a1bf7dbe35fdf2440019c9 (patch) | |
| tree | 2e2b841ec7428b39968caef81c7ea310be1bbb13 | |
| parent | e96d9d19d9346854cad24dbc8993dae5f63f200b (diff) | |
Set "tabindex" to the container when it is scrollable
Firefox automatically includes scrollable elements in the sequential
keyboard navigation, but it needs to be explicitly done for Chromium.
Moreover, setting "tabindex" is also needed in Chromium to be able to
scroll by keeping a key pressed after focusing on the scrollable element
by clicking on one of its children; in Firefox the event keeps being
processed and the scrolling goes on until the key is released, but in
Chromium, when "tabindex" is not set, the scrolling stops as soon as the
child element is removed (which in the case of the virtual list happens
when the element goes out of view).
Signed-off-by: Daniel Calviño Sánchez <danxuliu@gmail.com>
| -rw-r--r-- | js/views/virtuallist.js | 27 |
1 files changed, 18 insertions, 9 deletions
diff --git a/js/views/virtuallist.js b/js/views/virtuallist.js index 38207322b..ec4f1fe29 100644 --- a/js/views/virtuallist.js +++ b/js/views/virtuallist.js @@ -387,7 +387,7 @@ this._$wrapper.appendTo(this._$container); // Reset wrapper background - this._$wrapperBackground.height(0); + this._setWrapperBackgroundHeight(0); this._loadInitialElements($initialElement); @@ -559,10 +559,7 @@ var wrapperHeightDifference = this._getElementHeight($wrapper) - previousWrapperHeight; - // Although getting the height with jQuery < 3.X rounds to the - // nearest integer setting the height respects the given float - // number. - this._$wrapperBackground.height(this._getElementHeight(this._$wrapperBackground) + wrapperHeightDifference); + this._setWrapperBackgroundHeight(this._getElementHeight(this._$wrapperBackground) + wrapperHeightDifference); // Note that the order of "first/last" is not the same for the main // elements and the elements passed to this method. @@ -640,10 +637,7 @@ var wrapperHeightDifference = this._getElementHeight($wrapper) - previousWrapperHeight; - // Although getting the height with jQuery < 3.X rounds to the - // nearest integer setting the height respects the given float - // number. - this._$wrapperBackground.height(this._getElementHeight(this._$wrapperBackground) + wrapperHeightDifference); + this._setWrapperBackgroundHeight(this._getElementHeight(this._$wrapperBackground) + wrapperHeightDifference); if (!this._$firstLoadedElement) { this._$firstLoadedElement = $firstElementToLoad; @@ -784,6 +778,21 @@ return this._getElementOuterHeightWithoutMargins($element) + marginTop + marginBottom; }, + _setWrapperBackgroundHeight: function(height) { + // Although getting the height with jQuery < 3.X rounds to the + // nearest integer setting the height respects the given float + // number. + this._$wrapperBackground.height(height); + + // If the container is scrollable set its "tabindex" attribute so it + // is included in the sequential keyboard navigation. + if (this._getElementHeight(this._$wrapperBackground) > this._getElementHeight(this._$container)) { + this._$container.attr('tabindex', 0); + } else { + this._$container.removeAttr('tabindex'); + } + }, + /** * Updates the visible elements. * |