Can this be used with canvas/webgl/pixi.js?

[EloB]

Can I use this somehow with non DOM/HTML things like Canvas/Webgl. I been looking for something like this for Pixi.js.

Haven't had time to dig deep into this.

[jihyerish]

Hi @EloB, I think this polyfill won't work with canvas/webGL. In general, the polyfill moves the focus among focusable DOM elements. Therefore the canvas element will be considered as just one element, and the focus won't move inside it.

[EloB]

I haven’t used the specification before. It won’t be extendable?

[abhijeetk]

HTML5 canvas element doesn't remember contents drawn inside it. Most of JS libraries working with canvas element maintain there own data structure to remember what is drawn inside the canvas. There are some complexities as below :

1. Focus: browser can focus element which is part of DOM only. (Let's say you can show focus ring using some canvas API)
2. Events: Focused element is not part of DOM so no browser events. (Let's say you don't need it. refer point 3)
3. Finding candidate node: You need logic to traverse and identify the element from(DOM + DS maintain by JS libraries). Even if you can do that, there is will be a lot of use cases related to Canvas which you need to handle.

[anawhj]

@abhijeetk, Great description!

If someone wants to use something like spatial navigation polyfill, you need to make a data structure for each object inside and make a virtual focus indicator by your own model. The spatial navigation polyfill could be referred to design the virtual focus management module triggered by the arrow key input.

[Martin-Pitt]

You can have DOM elements inside your canvas and have them be focusable, but that is managing the focus manually via calling the focus method and the elements don't have layout so don't think that spatial nav would be able to help here.

See example on MDN: https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/drawFocusIfNeeded