How to disable key event on #ui-bar-body elements?

Question

Twine 1.4.2, SugarCube (v2.17.0)

It seems like Sugar Cube 2 slide bars have [space] and [enter] keys binded by default. How to disable this handlers? I want to keep keyboard listeners active for other elements.

Answer 1

All anchor and button elements within SugarCube, which make up the vast majority of its clickable elements, allow using the keyboard for accessibility reasons, which is mostly consistent with how browsers handle those elements by default.  Both are guided by the WAI-ARIA Recommendation.

Why do you wish to remove keyboard accessibility for the UI bar menus?

 

Comments

Because I'm adding my own event handlers and default behaviour conflicts with my actions.

I want players to be able to navigate through the story using keyboard, space being the default "action" key. As you rightly said, this is common behaviour on many webpages. I know I can use "tab" to move focus on [[clickable]] elements, but with listener it's not even necessary to have it. Focus can be anywhere on a page, and pressing space is moving story one passage forward. I hate moving my mouse around if there is no choice to be made.

One problem I have with this approach is using, for example, "Save" option. When player clicks "Save" from the menu bar, save "popup" appears. After closing save menu, browser focus is still on "Save" button. User has to either click on passage area or press "tab" to shift focus. As result, if there is event handler active on link element within passage, when user presses "space" after closing save menu, both events fire, so "Save" popup appears and whatever function I have bined to this event runs in the background.

Maybe you can see from my description, that removing keyboard accessibility is not the only solution. Another would be to move focus from Save button to passage element each time save menu is closed.

---

[…]  When player clicks "Save" from the menu bar, save "popup" appears. After closing save menu, browser focus is still on "Save" button.  […]

It's more correct to say that focus is restored to the Save button.  When a dialog is opened two things happen:

• The dialog gains focus.
• Page elements are denied the ability to gain focus.

When the dialog is closed, focus is restored to the previously active element, if possible.

 

Maybe you can see from my description, that removing keyboard accessibility is not the only solution. Another would be to move focus from Save button to passage element each time save menu is closed.

Which could still hurt accessibility, since you've stolen focus from the menu which is where the player had explicitly placed it.  I should think that it would certainly be surprising to someone using the keyboard out of necessity, at the very least.

I think the best outcome in this case would probably be to check whether the player had used the keyboard or mouse last when a dialog is closed.  If the keyboard was used, do nothing.  If the mouse was used, then focus the document element.  That way, accessibility is not lost for players exclusively using the keyboard, while players using a mix of mouse and keyboard would still be able to use the spacebar to trigger your default navigation action, as you'd prefer.

Try something like the following:

(function () {
	var lastInterface;
	$(document)
		.on('mousedown.lycoris keydown.lycoris', function (ev) {
			lastInterface = ev.type;
		})
		.on(':dialogclose.lycoris', function (ev) {
			if (lastInterface === 'mousedown') {
				$(document.documentElement).focus();
			}
		});
})();

 

---

TheMadExile, what you have suggested works as intended. Thank you for your time.

Answer 2

Spacebar and Enter simulate mouse clicks on elements in most browsers for accessibility reasons, while Tab can be used to cycle elements that can be selected, like links.  There are other keys that browser use too.  By default, the last thing your mouse clicked on, or whatever you've Tabbed over to, is selected and can be activated by Space or Enter.  If you add an event handler to any of the buttons, excluding some function keys in some browsers and some more complex key commands, the browser will hand control of that key over to you, so you don't need to worry too much about it, outside of some potential accessibility issues.

To my knowledge, which is admittedly incomplete, SugarCube itself does not have any key event handlers.  If you bind a handler to space, it should work fine.  Here's some test code I used, though it was in 2.18.0, I can confirm that code like this worked since 2.13.0 or so, so I can't imagine it wouldn't work fine in 2.17.0.

!function(){
    $(document).keyup(function(e){
        if(e.keyCode == 32){
            alert('Space');
        }
    });
}();

 

Comments

Sugar Cube handles key presses on Story Menu items. You can test by creating new story in Twine 1.4, clicking "restart", closing popup, and pressing "space". If you click on the passage area, you shift focus from UI bar, and pressing space does nothing.

As for your proposed mehod of adding event handler it will of course work, but Sugar Cube documentation provides different way. At http://www.motoslave.net/sugarcube/2/docs/object-methods.html you can find <jQuery>.ariaClick with following snippet:

// Given an existing element: <a id="me-so-clicky">Click me</a>
$('#me-so-clicky').ariaClick(function (event) {
    /* do stuff */
});

// Creates a basic link and appends it to the `output` element
$('<a>Click me</a>')
    .ariaClick(function (event) {
        /* do stuff */
    })
    .appendTo(output);

// Creates a basic button and appends it to the `output` element
$('<button>Click me</button>')
    .ariaClick(function (event) {
        /* do stuff */
    })
    .appendTo(output);

// Creates a link with options and appends it to the `output` element
$('<a>Click me</a>')
    .ariaClick({
        one   : true,
        label : 'This single-use link does stuff.'
    }, function (event) {
        /* do stuff */
    })
    .appendTo(output);

Bottom line is, we know how to handle keyboard events, but I want to disable key presses binded with menu items.