Using tab key to switch selected object

[mattbrand]

In the interest of WCAG accessibility I am adding keyboard commands to a game that I am prototyping. We want the user to be able to cycle through objects on the screen by using the Tab key. I am using this code to set up the keyboard detection:

this.input.keyboard.on("keydown", this.highlightBubble.bind(this));

And this code to detect the Tab key and do something:

highlightBubble(event)
{
	if (event.keyCode === Phaser.Input.Keyboard.KeyCodes.TAB)
	{
		...
	}
}

I am finding that the first Tab works and selects the item properly, but any further tabbing cycles through the browser's tab-context (meaning that on Chrome it goes to the address bar). If I use a different key the function works fine.

Is it possible to make this work with the Tab key? And is this something I change within Phaser or the html page?

Edited May 18, 2021 by mattbrand
Mistyped the keycode originally

[mattbrand]

I got this to work by detecting the Tab key like this:

this.tabKey = this.input.keyboard.addKey('TAB', true);

where enableCapture == true, which captures that key and doesn't let the DOM handle it.

 

And then in the handling function:

if (this.tabKey.isDown)