Description
There is ambiguity in the behavior of spatialNavigationSearch()
,
if the element which triggers the API is the spatial navigation container.
The reason for this ambiguity is 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,
(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 thecandidate
option is omitted, the candidates are decided by the value ofcontainer
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() - 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.
- If there isn't any candidate inside the element, then find the best candidate outside of the element and inside the container.
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 |