Skip to content

Commit

Permalink
Add support for alt+up/alt+down to expand/collapse. Don't expose drop…
Browse files Browse the repository at this point in the history
…down arrow to assistive tech
  • Loading branch information
matteason committed Jul 10, 2019
1 parent 3053256 commit 3b33901
Showing 1 changed file with 25 additions and 13 deletions.
38 changes: 25 additions & 13 deletions src/jquery.tagger.js
Original file line number Diff line number Diff line change
Expand Up @@ -281,8 +281,6 @@
this.taggerSuggestionsButton = $('<div>')
.addClass('droparrow')
.addClass('hittarget')
.attr('aria-label', 'Toggle option display')
.attr('role', 'button')
.bind('mouseup keyup', $.proxy(this._handleSuggestionsButtonInteraction, this))
.appendTo(this.taggerButtonsPanel);
$('<img>')
Expand All @@ -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);
Expand All @@ -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 comment has been minimized.

Copy link
@tylermos

tylermos Jul 18, 2019

Functionality-wise I'd presume one would show and one would hide. Looks like this will toggle both ways using both keys, are you happy with that? I guess ALT+UP kind of gestures expanding, but as it expands down so could ALT+DOWN

This comment has been minimized.

Copy link
@matteason

matteason Jul 23, 2019

Author Member

Yes, well spotted. I was going to do it that way originally but I tested the native <select> and that allows expanding and collapsing with both shortcuts so I've emulated that.

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
Expand Down Expand Up @@ -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);
}
Expand Down Expand Up @@ -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
*
Expand Down

0 comments on commit 3b33901

Please sign in to comment.