Skip to content

Heuristic focus navigation algorithm in blink

Jump to bottom
Jihye Hong edited this page Dec 15, 2017 · 5 revisions

Heuristic focus navigation algorithm in blink

This describes the heuristic focus navigation algorithm implemented in blink. This can be a reference to the basic focus navigation heuristic for the spatial navigation.

[ Precondition ]

There is only one moving focus in the top-level browsing context.

[ Terminology ]

  • Sequential navigation: The focus navigation using the tab key
  • Initially focused element: the element which is a starting point of the spatial focus navigation
  • Currently focused element: the element which has focus
  • Previously focused element: the element which had focus right before the currently focused element
  • Next focused element: the element which the focus will move to
  • Navigation direction: the direction where the focus will go caused by pressing the keyboard.
  • Candidate elements: the elements which can get focus from the currently focused element.

[ Spatial Focus Navigation Algorithm ]

  1. If there isn’t the previously focused element, select the initially focused element.

    1. Among all the focusable areas, the element on the topmost and the leftmost in the current level of browsing context is the initially focused element.
    2. Let the initially focused element be the currently focused element.

  2. Otherwise, let the previously focused element be the currently focused element.

  3. Move focus to the currently focused element.

  4. Get the direction of the spatial navigation.

  5. Find the candidate elements.

    [ Finding the Candidate Elements Algorithm ]

    Note: The element which is overlapped by the focused element is also the candidate element.

    1. If the up arrow key or the down arrow key is pressed, the axis A is Y. Otherwise, the left arrow key or the right arrow key is pressed, the axis A is X.
    2. If the right arrow key or the down arrow key is pressed, the direction D is positive. Otherwise, the left arrow key or the up arrow key is pressed, the direction D is negative.
    3. Find the candidate elements which satisfy the conditions below:
      • the element should be focusable.
      • the element should be visible within the viewport.
      • The position value of the element should be greater than that of the currently focused element in the direction D on the axis A.
      • The position value of the edge in the navigation direction of the element should be greater than that of the currently focused element in the direction D on the axis A.

  6. Find the next focused element.

    [ Finding the Next Focused Element Algorithm ]

    Note: Consider the element as a square.

    1. Find the entry point and exit point for each candidate element. Find the combination of the vertex on the currently focused element and the vertex on the candidate element which can make the shortest distance between the elements.

      • Select the exit point from the currently focused element.
      • Select the entry point from the candidate element.

    2. Calculate the distance between the exit point and the entry point for each candidate element.

      The Distance function is:

      distance = A + B + C - D

      (This refers to the old WICD Spec: https://www.w3.org/TR/WICD/#focus-handling)

      A: The euclidian distance between the exit point and the entry point.

      B: The absolute distance in the navigation direction between the exit point and the entry point.

      e.g.) If the right arrow key is pressed, abs((x position of the exit point) - (x position of the entry point))

      C: The absolute distance in the direction which is orthogonal to the navigation direction between the exit point and the entry point.

      e.g.) If the right arrow key is pressed, abs((y position of the exit point) - (y position of the entry point))

      D: The square root of the overlapped area between the candidate element and the currently focused element.

    3. Select the element which distance is the least among the candidate elements.

  7. Move focus to the next focused element.

Clone this wiki locally