From 3b33901d0f59c62e163e62ce8ada0bfc6ec4dee0 Mon Sep 17 00:00:00 2001 From: Matt Eason Date: Wed, 10 Jul 2019 14:35:44 +0100 Subject: [PATCH] Add support for alt+up/alt+down to expand/collapse. Don't expose dropdown arrow to assistive tech --- src/jquery.tagger.js | 38 +++++++++++++++++++++++++------------- 1 file changed, 25 insertions(+), 13 deletions(-) diff --git a/src/jquery.tagger.js b/src/jquery.tagger.js index 53706cb..60b4ed1 100644 --- a/src/jquery.tagger.js +++ b/src/jquery.tagger.js @@ -281,8 +281,6 @@ this.taggerSuggestionsButton = $('
') .addClass('droparrow') .addClass('hittarget') - .attr('aria-label', 'Toggle option display') - .attr('role', 'button') .bind('mouseup keyup', $.proxy(this._handleSuggestionsButtonInteraction, this)) .appendTo(this.taggerButtonsPanel); $('') @@ -303,8 +301,6 @@ .appendTo(this.taggerSuggestionsButton); } - this.taggerSuggestionsButton.attr("tabindex", this.tabIndex); - // Add placeholder text to text input field if (this.options.placeholder !== null) { this.taggerInput.attr("placeholder", this.options.placeholder); @@ -325,6 +321,13 @@ // Select the widget itself again this._getWidgetFocusable().focus(); } + + if (event.target && event.altKey && (event.which === this.keyCodes.DOWN || event.which === this.keyCodes.UP)) { + this._toggleShowSuggestions(); + + // Select the widget itself again + this._getWidgetFocusable().focus(); + } }, this)); // Capture the keypress event for any child elements - redirect any chars to the current input field @@ -574,7 +577,7 @@ } } else if (event.which === this.keyCodes.DOWN) { // Down Arrow - if (isMainInput) { + if (isMainInput && !event.altKey) { if (!this.options.ajaxURL || this.taggerSuggestions.is(":visible")) { this._showSuggestions(true); } @@ -613,19 +616,28 @@ this.taggerWidget.find("input[tabindex]:visible").first().focus(); } else { - // If the suggestion list is visible already, then toggle it off - if (this.taggerSuggestions.is(":visible")) { - this._hideSuggestions(); - } - // otherwise show it - else { - this._showSuggestions(true); - } + this._toggleShowSuggestions(); } event.preventDefault(); } }, + /** + * Toggle whether suggestions are shown or not + * + * @private + */ + _toggleShowSuggestions: function() { + // If the suggestion list is visible already, then toggle it off + if (this.taggerSuggestions.is(":visible")) { + this._hideSuggestions(); + } + // otherwise show it + else { + this._showSuggestions(true); + } + }, + /** * When keypress events fire on the tagger widget redirect them to the filter input *