[bug] webapp: Hitting the Space Bar on Safari on iPad scrolls the page

[cameronbroe]

When using the web version of TIC-80 on an iPad with a Magic Keyboard (and probably other Bluetooth keyboards), you can't input a space into the editor/command line for TIC-80. Instead, the default behavior for the browser with a Spacebar event, which is scrolling the page down, is observed instead.

[learosema]

Can confirm this happens when visiting https://tic80.com/create on iPad Safari.

UPDATE: below experiment didn't work.

A tabindex="0" attribute on the canvas can help. This way it is recognized by browsers as an interactive (focusable) element.

Possibly disturbing side effect may be the focus ring which could be styled via canvas:focus { outline: none; } (and maybe :focus-visible styles for keyboard users)

As a good side effect, it could also improve keyboard accessibility as the "click to start" overlay could be achieved with a canvas:not(:focus) css selector, which allows the tic80 control to be activated not only with a click but also with tabbing into it. As of current, it requires a click (this is possibly because browsers require some interaction to enable web audio api).

Besides that, I'm not into emscripten, but I applied the tabindex="0" technique to an own javascript canvas game.