Spatial Navigation

[srgloureiro]

Continuing the discussion we had, in the 22th issue beginning in the #22 (comment) comment, I will repost my thoughts about it:

I think Opera should also have a Modal Spatial Navigation mode. Why? Because, in that way the user could browse with only one hand/finger. Even handicaped people would feel great about this.
Of course, it should be disbaled by default. What I suggest is to have a combobox "Spatial navigation" with the following possible Options:
• Disabled
• By Key Combination
• By Key Mode

in the Preferences.

◦ The first option is pretty obvious, like Internet Explorer.
◦ The second is like the old Opera, where Ctrl+arrows or Shit+arrows did the spatial Navigation (BTW, does it make sense to have both Shift and Control keybindings for the same thing?)
◦ The third has a key that toggles the Spatial Navigation between Off and On. When this mode is On, simply pressing the arrows does the spatial navigation. I suggest Scroll Lock for toggling. And in the case that this mode is On and the user does a Shift+arrows / Ctrl+arrows it should do an exception and behave like the Spatial mode is disabled.

[Frenzie]

What do you mean, like Internet Explorer? I can't find anything about it sporting spatial navigation.

[srgloureiro]

@Frenzie : It is pretty obvious that the Disabled option should do nothing. For the sake of being customizable.

[Frenzie]

My bad, I needed sleep. I still think saying "like IE" is an incredibly convoluted way of saying "disabled" though. Ftr, Opera can also disable it: opera:config#UserPrefs|EnableSpatialNavigation

I vehemently disagree that disabled should be the default. Tabbing through elements falls apart horribly as soon as there's more than a dozen, maybe up to twenty or thirty of them. A key combo or a key toggle should be the default—obviously, I might add. ;)

The second is like the old Opera, where Ctrl+arrows or Shit+arrows did the spatial Navigation (BTW, does it make sense to have both Shift and Control keybindings for the same thing?)

I just checked Opera's defaults because I've got my Ctrl + arrow keys bound to other actions, and Opera's Ctrl + up/down are simply the equivalent to most other browser's Tab and Shift + Tab, except that Opera's easier to use because you can actually see which link you selected. However, that's not spatial navigation.

[Emdek]

You can check what is offered by QtWebKit by trying this patch:
https://gist.github.com/Emdek/ed948286df45c87ab9c3
It enables built in support, to disable it just recompile without patch.

[Katarn]

By the way, many of these issues is resolved in an alternative implementation of Firefox - https://github.com/QupZilla/qupzilla. You can see how it is implemented one or another function, and even share code with the author of this project.

[Emdek]

@Katarn, sure, but only when really needed. ;-)

[srgloureiro]

@Frenzie
"I still think saying "like IE" is an incredibly convoluted way of saying "disabled" though."
VERY GOOD JOKE

[Frenzie]

@srgloureiro Sorry. :)

[Emdek]

Anyone tried that "patch"?
Does it work as it should or (Qt)WebKit messed it up? ;-)

[srgloureiro]

@Frenzie
Yu do not have to say sorry to me.
When I said VERY GOOD JOKE, I was not being ironic. The joke of "IE means disabled" is sincerelly very good, at least in my opinion.

[delkano]

@Emdek I have tried the path, everything compiles fine and all, but I can't seem to make spatial navigation work. I've tried CTRL+Arrows (seen in the bug report over at WebCore), Shift+Arrows, nothing.

[Emdek]

@delkano, thanks for testing, could you please post link that that bug report?

According to docs arrows should be enough:

Enables or disables the Spatial Navigation feature, which consists in the ability to navigate between focusable elements in a Web page, such as hyperlinks and form controls, by using Left, Right, Up and Down arrow keys. For example, if a user presses the Right key, heuristics determine whether there is an element he might be trying to reach towards the right and which element he probably wants. This is disabled by default.

[Frenzie]

It works for me with the arrows, sort of. It's inferior to Opera in that it's hard to see, doesn't necessarily move to the most obvious link, and doesn't trigger hover on menus so they remain inaccessible, but that's all Webkit's fault. It does put a damper on my hopes. Perhaps I'd better migrate toward something like Vimperator instead.

[Emdek]

@Frenzie, don't give up too early. ;-)
It always can be improved upstream (but they to know what's wrong first), it might be also possible to improve that with some JS and CSS workarounds.

[Frenzie]

True, especially the hard to see part can probably be fixed within some default stylesheet. I heard Opera might actually be looking into improving spatial navigation for Blink.

[Emdek]

@Frenzie, it might be worth looking how they done it in that extension, I don't have time to work on that feature right now but if someone would do some research then it could be done earlier. ;-)

[Frenzie]

What, Vimperator?

[Emdek]

@Frenzie, yes.
Hopefully it uses only standard JavaScript functions, without any special, Gecko specific stuff.

[Frenzie]

@Emdek No such luck. And Vrome uses CoffeeScript.

[Emdek]

@Frenzie, most important part is algorithm that decides which element should be selected, it can be always ported to JS / C++ bindings. ;-)
But we would still need upstream support to show these SELECT pop-ups...

[ersi-dnd]

Some sort of primitive spatial navigation seems to be present, but the elements don't get highlighted properly and when hidden menus are selected, the menus don't autoexpand like in Opera. Is it possible to implement at least better highlighting or is it impossible due to the way webkit is built?

Also, Opera has these navigation actions that jump between webpage (html) elements:
s = Highlight next heading
w = Highlight previous heading
d = Highlight next element
e = Highlight previous element
3 = Focus next frame
3 shift = Focus previous frame
Actually Opera has more of course :) but are these possible to make into actions? Is it possible to find shortcuts for them that would work and won't be eaten?

[Emdek]

@ersi-dnd, there is no API for doing so in clean way, so the only possibility seems to be custom JS and CSS, which won't play well with each website...

[ersi-dnd]

How about a simple "Focus page" action at least? We have ActivateAddressField, but when I need to get the focus back into webspace from there, is there an action for that? In old Opera there was F9 for this. (Not sure how this would work on webpages that are made up of frames though.)

If "Focus page" can be made to work so that the focus will be on the entire webspace, not a single frame, it would be very good. The action should work by taking the focus away from any specific element on the interface (such as the address field or menu or the dragonfly) or from the specific element on the webpage (such as a form field) and apply the focus to the entire webpage (it's what I call webspace).

[Emdek]

@ersi-dnd, that is doable, setting focus to WebWidget should be enough.

[Frenzie]

For @annulen I'll try to synthesize some of this in a slightly more organized manner.

Spatial navigation

1. Shift+down starts from the top of the page.

2. Shift+up starts from the bottom of the page.

3. Shift+right starts from the left of the page.

4. Shift+left starts from the right of the page.

All of these except the first are broken.

Also note that WebKit spatial navigation does not trigger hover menus such as this one: https://www.w3schools.com/howto/howto_css_dropdown.asp.

Escape removes the link highlight and resets what you're doing. This way you can accidentally start from the top, press Escape and start from the bottom or use header navigation instead.

Element navigation

1. Next/previous header. You can use these to navigate through the page instead of or in addition to Pg Up/Down, and you can use them as a starting point for spatial navigation. Refer to @ersi-dnd 's comment above Spatial Navigation #119 (comment)

2. Next/previous element. Same as for headers, but more precise.

None of this exists in WebKit at all afaik.

PS There are also some additional issues that are slightly less severe, which ranges from simple detection of which link to go to (seems less logical) to special cases. For example, on the right of the top menu on https://tweakers.net/ there's a "Meer" (more) dropdown. WebKit spatial navigation skips right over it because it's not actually a link at all, but a Javascript onclick handler. Opera can deal with this.

Opera can also spatially navigate to regular form elements, see https://www.w3schools.com/html/html_forms.asp and https://www.w3schools.com/tags/tryit.asp?filename=tryhtml5_ev_onclick

In short, WebKit spatial navigation is extremely inefficient about selecting the right element when it works (due to lack of starting position and header/element navigation), but more fundamentally it's also significantly more limited.

[annulen]

Element navigation is a topic for Otter, nothing to do on WebKit side. Escape handling - probably too

[annulen]

Escape handling probably requires exposing Document::setFocusedElement() from WebCore to call it with nullptr

[lanodan]

Just a sidenote:
@Frenzie

Also note that WebKit spatial navigation does not trigger hover menus such as this one

This issue is present in all browser (regarding Spatial Navigation like focusing with tab), I think you have to do some ARIA tweaks. (I used to have a dropdown menu that worked in 1+ engine using ARIA but I lost it).

And anyway I think this is an upstream issue as it’s from (Qt)WebKit.

[Frenzie]

This issue is present in all browser

You can add that as a sidenote to pretty much every statement. :-P

Take your pick:

1. Opera and Prince always better (i.e., more polished).
2. All other browsers are so much worse in so many different ways that it defies belief.
3. Post-2011 browsers have pro-actively jumped off a cliff so they're even worse.

[annulen]

4. Web developers are too lazy to add tabindex to all control elements

[Frenzie]

@annulen But that's besides the point for the quoted issue as the BUTTON element comes with a default implicit source order tabindex. The case you refer to isn't handled by Opera either, but while not perfect it's still better. :-P

[mariokamenjak]

Spatial navigation could be a killer feature for many users. Almost on the level of a integrated mail client.