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

The behavior of `getSpatialNavigationContainer()` had been [changed](https://drafts.csswg.org/css-nav-1/#dom-element-getspatialnavigationcontainer). It returns the nearest parent node, which is the spatial navigation container, even if the target element is a container(precisely, it's spatial navigation container, but I'll write it shortly in this thread).
This change affects the [initial proposal](https://github.com/w3c/csswg-drafts/issues/3743#issue-422622669), as below:

- API searches the best candidate outside of the target element within the container of the target element. (even if the target element itself is the container)
   - This means that if the target element itself is the container, the API cannot find the best candidate inside the target element because when there isn't any candidate the API returns `null`.
   - Therefore, the `outsideOnly` in initially proposed IDL would be changed to `inside`
- API returns the best candidate which meets all the conditions specified in `SpatialNavigationSearchOptions`.

I suggest to change the IDL of `spatialNavigationSearch()` :

```
dictionary SpatialNavigationSearchOptions {
    sequence<Node>? candidates;
    Node? container;
    boolean inside = false;
}; 

Node? spatialNavigationSearch(SpatialNavigationDirection dir, 
                                   optional SpatialNavigationSearchOptions arg);
```
The `inside` attribute indicates  whether candidates should be selected inside of the target element or not.

- It's `false` by default, but if it's `true`,
  - the API searches the best candidate inside the target element first.
  - If the best candidate isn't found inside, then it searches the best candidate outside the target element within the container.

The naming of attribute `inside` in `SpatialNavigationSearchOptions` isn't straightforward to me.
So it would be very helpful for me to know other suggestions instead of it.

The example below shows how the API with this IDL works:

![image](https://user-images.githubusercontent.com/6636090/58242071-223e2380-7d89-11e9-94e2-ec31dd5e0592.png)


Example Code | Result
-- | --
container2.spatialNavigationSearch(“right"); | button2
container2.spatialNavigationSearch(“left"); | null
container2.spatialNavigationSearch(“right“, {inside: true}); | button1
container2.spatialNavigationSearch(“left“, {inside: true}); | container3
container1.spatialNavigationSearch("right”); | null
container1.spatialNavigationSearch(“left”); | null
container1.spatialNavigationSearch("right”, {inside: true}); | container2
container1.spatialNavigationSearch(“left”, {inside: true}); | button2
container3.spatialNavigationSearch(“right“); | null
container3.spatialNavigationSearch(“left"); | button1
container3.spatialNavigationSearch(“right“, {inside: true}); | null
container3.spatialNavigationSearch(“left“, {inside: true}); | button1

FYI, the markup of the image would be:
```html
<div id="container1" style="overflow-x: scroll; border: 1px solid red;">
  <div id="container2" style="overflow-x: scroll; border: 1px solid blue;">
    <button id="button1" style="background-color: green;"></button>
    <div id="container3" style="overflow-x: scroll; border: 1px solid yellow;"></div>  
  </div>  
  <button id="button2" style="background-color: purple;"></button>
</div>
```

@frivoal Would this change be reasonable?

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

Received on Thursday, 23 May 2019 10:35:31 UTC