Skip to content

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

Closed
@jihyerish

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,
image
(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, the candidates are 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()
  • 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

Metadata

Assignees

Type

No type

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions