How to classify the navigatable element and focusable element?

[jihyerish]

There is a difference between the focusable element and navigatable element. An element which is navigatable but not focusable (e.g., scrollable area) can contain focusable elements. If there is a JS API for knowing the element is navigatable or focusable, it will be useful for applying the focus navigation to the group of elements.

Here is the similar consideration in WICG discourse: (https://discourse.wicg.io/t/extending-element-level-focus-apis/726)

[frivoal]

The HTML definition of focusable area already includes things like a scroller in addition to normally interactive elements and to tabindexed elements (and a few other things).

[jihyerish]

Yes, focusable is defined in HTML. But there are many terms which are used often while we discuss focus navigation. Something like:

• Tabbable element

  • Could have the value of tabindex is greater than or equal to 0.
  • The focus is moved by pressing tab key.

• Keyboard focusable element

  • Must be visible in the viewport.
  • Could be the editable element.
  • Could be the element which has an event listener about one of the events among click, keydown, focus and blur if the spatial navigation mode is enabled.
  • Could have the value of tabindex is greater than or equal to 0.
  • The focus is moved by pressing arrow keys.

• Navigatabe (= selectable) element

  • Shows the focus ring.

The definition of Keyboard focusable element is in the heuristic spatial navigation algorithm implemented in blink. Do we have to make difference between tabbable and keyboard focusable in the spatial navigation? Also, I think the definition of the term above isn't perfect yet, so I need more opinion. : )

For the reference, you can find out an element is focusable or tabbable in here: https://allyjs.io/data-tables/focusable.html

[frivoal]

This is answered by https://wicg.github.io/spatial-navigation/#find-candidates