focus navigation
There are a few new properties in the basic user interface module that allow for controlling which elements get focus. Traditionally we have been able to control tab order using tabindex in HTML. This has been deprecated due to not being hardware agnostic. Phones or game consoles don’t have a tab key for example. It’s replacement is nav-index, which more or less does the same thing. A number can be specified for the position in the navigation order, or auto to let the user agent decide the order.
The other properties control the direction of the navigation focus. These are nav-up, nav-right, nav-down, and nav-right. Each one controls where the focus will move to when the user enters the responding direction, using however the user agent and/or device use to control focus. This could be the arrow keys, or w, a, s and d for example. The value used to identify the next element is # followed by the id. A target name can also be used.
An example of the CSS needed for the demo below is:
button#key-eight {
nav-index: 8;
nav-left:#key-seven;
nav-right:#key-nine;
nav-up:#key-five
nav-down:#key-zero;
}
The html would be regular buttons with ids, such as <button id="key-eight">8 tuv</button>. If there are a lot of elements that need to be specified, then the css can get verbose. The example below simulates a phone keypad and only currently works on the Internet Channel for Nintendo Wii. As of this writing the nav-* properties have not been back-ported to Opera Core-2. The layout uses nth-child so that selector also needs to be supported for the keypad to layout correctly. This currently only works in Core-2 based browsers.