[csswg-drafts] [css-nav-1] Clarify how sptialNavigationSearch() works (#3743)

jihyerish has just created a new issue for https://github.com/w3c/csswg-drafts:

== [css-nav-1] Clarify how sptialNavigationSearch() works ==
There is ambiguity in the behavior of [`spatialNavigationSearch()`](https://drafts.csswg.org/css-nav-1/#dom-element-spatialnavigationsearch), 
if **the element which triggers the API is the spatial navigation container**.

The reason for this ambiguity is because the direction of spatial navigation means not only moving the focus in 4-ways but also moving the focus inside or outside of the container element.
It isn't clear what will be the scope of candidates in this case.

For example like this, 
![image](https://user-images.githubusercontent.com/6636090/54588800-40289880-4a67-11e9-8ad6-a70f2b787c14.png)
(`B` and `C` are focusable elements inside the `container2`)

What will be the result of 
`container2.spatialNavigationSearch({dir: 'right', container: document});` between `B` and `D`?
I guess both results would be expected depending on the use case.

> [NOTE] 
> I assumed if the `candidate` option is omitted, it is decided by the value of `container` option.
> 
> For example, 
> `container2.spatialNavigationSearch({dir: 'right', container: document});` is equal to
> `container2.spatialNavigationSearch({dir: 'right', candidate: document.focusAreas(), container: document});`

Therefore, I suggest the option `outsideOnly` for spatialNavigationSearch API which will **_decide  where to find the best candidate first - inside or outside of the element_**.

The detail of how it works is:
* Let _container_ be the value of `container` option. 
* If the value of `container` option is null, _container_ is the result of element[.getSpatialNavigationContainer()](https://drafts.csswg.org/css-nav-1/#dom-element-getspatialnavigationcontainer)
* If the value of `outsideOnly` option is true, then find the best candidate outside of the element and inside the  _container_.
   * If there is the best candidate, then return it.
   * Else, return `null`.
* Else if the value of `outsideOnly` option is false, find the best candidate inside the element.
   * If there isn't any candidate inside the element, then find the best candidate outside of the element and inside the  _container_.
       * If there is the best candidate, then return it.
       * Else, return `null`.
   * Else, return the best candidate.

IDL may change as following:
```
dictionary SpatialNavigationSearchOptions {
    sequence<Node>? candidates;
    Node? container;
    boolean outsideOnly = false;
}; 
 
Node? spatialNavigationSearch(SpatialNavigationDirection dir, 
                              optional SpatialNavigationSearchOptions arg);
```


More results of API with suggesting option will as below:

Code | Result
-- | --
`container3.spatialNavigationSearch('right');` (same with `container3.spatialNavigationSearch('right',{candidates: container3.focusableAreas(), container: container3, outsideOnly: false});`) | null
`container3.spatialNavigationSearch('right',{candidates: container2.focusableAreas(), container: container2, outsideOnly: true});` | C
`container2.spatialNavigationSearch('right');` (same with `container2.spatialNavigationSearch('right',{candidates: container2.focusableAreas(), container: container2, outsideOnly : false});`) | B
`container2.spatialNavigationSearch('right',{outsideOnly: true});` (same with `container2.spatialNavigationSearch('right',{candidates: container2.focusableAreas(), container: container2, outsideOnly: true});`) | null
`container2.spatialNavigationSearch('right',{container: document, outsideOnly: true});` (same with `container2.spatialNavigationSearch('right',{candidates: document.focusableAreas(), container: document, outsideOnly: true});`) | D



Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/3743 using your GitHub account

Received on Tuesday, 19 March 2019 09:25:31 UTC