Skip to content

Commit

Permalink
Rearrangeable Listbox Examples: Update keyboard shortcuts (pull #479)
Browse files Browse the repository at this point in the history 
For issue #123, change keyboard shortcuts so that:

* Shortcut for Add button is enter instead of delete
* Shortcut for Important button is enter instead of delete.

Fix bug where selecting the last items in the list and performing an action made the list unfocusable.
  • Loading branch information
@tatermelon @mcking65
tatermelon authored and mcking65 committed Oct 18, 2017
1 parent c98a878 commit 43f88c7
Show file tree
Hide file tree
Showing 3 changed files with 64 additions and 28 deletions.
8 changes: 4 additions & 4 deletions examples/listbox/js/listbox-rearrangeable.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,13 +14,13 @@ window.addEventListener('load', function () {
document.getElementById('ex1-up'),
document.getElementById('ex1-down')
);
ex1ImportantListbox.setupDelete(document.getElementById('ex1-delete'), ex1UnimportantListbox);
ex1UnimportantListbox.setupDelete(document.getElementById('ex1-add'), ex1ImportantListbox);
ex1ImportantListbox.setupMove(document.getElementById('ex1-delete'), ex1UnimportantListbox);
ex1UnimportantListbox.setupMove(document.getElementById('ex1-add'), ex1ImportantListbox);

var ex2 = document.getElementById('ex2');
var ex2ImportantListbox = new aria.Listbox(document.getElementById('ms_imp_list'));
var ex2UnimportantListbox = new aria.Listbox(document.getElementById('ms_unimp_list'));

ex2ImportantListbox.setupDelete(document.getElementById('ex2-add'), ex2UnimportantListbox);
ex2UnimportantListbox.setupDelete(document.getElementById('ex2-delete'), ex2ImportantListbox);
ex2ImportantListbox.setupMove(document.getElementById('ex2-add'), ex2UnimportantListbox);
ex2UnimportantListbox.setupMove(document.getElementById('ex2-delete'), ex2ImportantListbox);
});
80 changes: 58 additions & 22 deletions examples/listbox/js/listbox.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -20,7 +20,7 @@ aria.Listbox = function (listboxNode) {
this.siblingList = null;
this.upButton = null;
this.downButton = null;
this.deleteButton = null;
this.moveButton = null;
this.keysSoFar = '';

this.registerEvents();
Expand Down Expand Up @@ -109,6 +109,16 @@ aria.Listbox.prototype.checkKeyPress = function (evt) {
case aria.KeyCode.DOWN:
evt.preventDefault();

if (this.moveUpDownEnabled && evt.altKey) {
if (key === aria.KeyCode.UP) {
this.moveUpItems();
}
else {
this.moveDownItems();
}
return;
}

if (key === aria.KeyCode.UP) {
nextItem = nextItem.previousElementSibling;
}
Expand All @@ -135,19 +145,45 @@ aria.Listbox.prototype.checkKeyPress = function (evt) {
break;
case aria.KeyCode.BACKSPACE:
case aria.KeyCode.DELETE:
case aria.KeyCode.RETURN:
if (!this.moveButton) {
return;
}

var keyshortcuts = this.moveButton.getAttribute('aria-keyshortcuts');
if (key === aria.KeyCode.RETURN && keyshortcuts.indexOf('Enter') === -1) {
return;
}
if (
(key === aria.KeyCode.BACKSPACE || key === aria.KeyCode.DELETE) &&
keyshortcuts.indexOf('Delete') === -1
) {
return;
}

evt.preventDefault();

if (nextItem.nextElementSibling) {
nextItem = nextItem.nextElementSibling;
var nextUnselected = nextItem.nextElementSibling;
while (nextUnselected) {
if (nextUnselected.getAttribute('aria-selected') != 'true') {
break;
}
nextUnselected = nextUnselected.nextElementSibling;
}
else {
nextItem = nextItem.previousElementSibling;
if (!nextUnselected) {
nextUnselected = nextItem.previousElementSibling;
while (nextUnselected) {
if (nextUnselected.getAttribute('aria-selected') != 'true') {
break;
}
nextUnselected = nextUnselected.previousElementSibling;
}
}

this.shiftItems();
this.moveItems();

if (!this.activeDescendant && nextItem) {
this.focusItem(nextItem);
if (!this.activeDescendant && nextUnselected) {
this.focusItem(nextUnselected);
}
break;
default:
Expand Down Expand Up @@ -240,12 +276,12 @@ aria.Listbox.prototype.toggleSelectItem = function (element) {
element.getAttribute('aria-selected') === 'true' ? 'false' : 'true'
);

if (this.deleteButton) {
if (this.moveButton) {
if (this.listboxNode.querySelector('[aria-selected="true"]')) {
this.deleteButton.setAttribute('aria-disabled', 'false');
this.moveButton.setAttribute('aria-disabled', 'false');
}
else {
this.deleteButton.setAttribute('aria-disabled', 'true');
this.moveButton.setAttribute('aria-disabled', 'true');
}
}
}
Expand Down Expand Up @@ -290,8 +326,8 @@ aria.Listbox.prototype.focusItem = function (element) {
}
}

if (!this.multiselectable && this.deleteButton) {
this.deleteButton.setAttribute('aria-disabled', false);
if (!this.multiselectable && this.moveButton) {
this.moveButton.setAttribute('aria-disabled', false);
}

this.checkUpDownButtons();
Expand Down Expand Up @@ -394,8 +430,8 @@ aria.Listbox.prototype.clearActiveDescendant = function () {
this.activeDescendant = null;
this.listboxNode.setAttribute('aria-activedescendant', null);

if (this.deleteButton) {
this.deleteButton.setAttribute('aria-disabled', 'true');
if (this.moveButton) {
this.moveButton.setAttribute('aria-disabled', 'true');
}

this.checkUpDownButtons();
Expand Down Expand Up @@ -449,7 +485,7 @@ aria.Listbox.prototype.moveDownItems = function () {
* @desc
* Delete the currently selected items and add them to the sibling list.
*/
aria.Listbox.prototype.shiftItems = function () {
aria.Listbox.prototype.moveItems = function () {
if (!this.siblingList) {
return;
}
Expand Down Expand Up @@ -478,17 +514,17 @@ aria.Listbox.prototype.enableMoveUpDown = function (upButton, downButton) {

/**
* @desc
* Enable Delete controls. Deleting removes selected items from the current
* Enable Move controls. Moving removes selected items from the current
* list and adds them to the sibling list.
*
* @param button
* Delete button to trigger delete
* Move button to trigger delete
*
* @param siblingList
* Listbox to add deleted items to
* Listbox to move items to
*/
aria.Listbox.prototype.setupDelete = function (button, siblingList) {
aria.Listbox.prototype.setupMove = function (button, siblingList) {
this.siblingList = siblingList;
this.deleteButton = button;
button.addEventListener('click', this.shiftItems.bind(this));
this.moveButton = button;
button.addEventListener('click', this.moveItems.bind(this));
};
4 changes: 2 additions & 2 deletions examples/listbox/listbox-rearrangeable.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -69,7 +69,7 @@ <h3 id="ex1_label">Example 1: Single-Select Listbox</h3>
<span id="ss_unimp_l">Unimportant Features:</span>
<ul id="ss_unimp_list" tabindex="0" role="listbox" aria-labelledby="ss_unimp_l" aria-activedescendant="">
</ul>
<button id="ex1-add" class="move-left-btn" aria-keyshortcuts="Alt+ArrowLeft Delete" aria-disabled="true">Important</button>
<button id="ex1-add" class="move-left-btn" aria-keyshortcuts="Alt+ArrowLeft Enter" aria-disabled="true">Important</button>
</div>
</div>
</div>
Expand Down Expand Up @@ -122,7 +122,7 @@ <h3 id="ex2_label">Example 2: Multi-Select Listbox</h3>
<li id="ms_opt9" role="option" aria-selected="false">Advanced waste recycling system</li>
<li id="ms_opt10" role="option" aria-selected="false">Turbo vertical take-off capability</li>
</ul>
<button id="ex2-add" class="move-right-btn" aria-keyshortcuts="Alt+ArrowRight Delete" aria-disabled="true">Add</button>
<button id="ex2-add" class="move-right-btn" aria-keyshortcuts="Alt+ArrowRight Enter" aria-disabled="true">Add</button>
</div>
<div class="right-area">
<span id="ms_ch_l">Upgrades you have chosen:</span>
Expand Down

0 comments on commit 43f88c7

Please sign in to comment.