Re: [csswg-drafts] [css-nav-1] Focus delegation (#3378)

I'd like to propose supporting the focus delegation feature in the spec. The detail is as below.

## Problem

When there are nested spatial navigation containers, 

1. Too many key pressing is needed for reaching the target focusable element.
    e.g. https://jihyerish.github.io/spatial-navigation/demo/sample/api_spatial_navigation_nested_container.html
2. Focus may move to the spatial navigation container which doesn't have any focusable element.
    e.g. https://jihyerish.github.io/spatial-navigation/demo/sample/api_spatial_navigation_empty_nested_container.html

## Solution

If the spatial navigation container can be specified as **_delegable container_**, it can delegate the focus inside it. To be more specific, three updates may be needed to the spec.
#### (1) Add the new terminology: "Spatial navigation delegable container" (a.k.a. delegable container)

**Spatial navigation delegable container** is the spatial navigation container which doesn't hold the focus and give it to one of its focusable child elements.

> NOTE: 
> - Best candidate: the element which will gain the focus from the currently focused element
> - Focusable element: focusable area specified in HTML Spec
> - Spatial navigation container: browsing context, scrollable element, the element specified with 'spatial-navigation-contain: contain'

#### (2) Add "delegable" value to the [`spatial-navigation-contain`](https://drafts.csswg.org/css-nav-1/#container) for specifying the spatial navigation delegable container
For example, the value of the property can be:
`spatial-navigation-contain:  [auto | contain] && delegable?`

- `delegable` value can only be specified to the spatial navigation container. (whether the element is focusable or not)
- By default, the spatial navigation container is non-focusable and doesn't delegate the focus to its focusable children elements.

#### (3) Add the spatial navigation delegable container for the condition of candidates for searching the next target
The changes in the processing model will be:

1. Find the search origin
2. Find candidates
   2-1. Find focusable elements and **delegable containers**
   2-2. Find visible elements
3. Select the best candidate
   3-1. If the best candidate is a delegable container, find candidates (step 2) inside it.
          3-1-1. If there is a best candidate inside the delegable container, focus it.
          3-1-2. Else, move the focus to the closest spatial navigation container of it.
  3-2. Else, move the focus to the best candidate.

## More discussions

1. Do we have to delegate the focus to the focusable child elements which are visually outside of the delegable container?
 => To be simple, we need to consider this as an incorrect implementation.

2. If there is a scrollable and delegable container **_C_** of which focusable child elements are out of the view, which child element will gain the focus by delegating the focus?
=> There can be several approaches:
A:  the first focusable child element of the container **_C_**
B: the closest focusable child element from the edge of the container **_C_**

-- 
GitHub Notification of comment by jihyerish
Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/3378#issuecomment-458387533 using your GitHub account

Received on Tuesday, 29 January 2019 02:52:08 UTC