-
Notifications
You must be signed in to change notification settings - Fork 642
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
[css-nav-1] Clarify how sptialNavigationSearch() works #3743
Comments
While considering this issue, I think the result of In the current spec,
let spatnavContainer = A.parentElement.getSpatialNavigationContainer();
|
The behavior of
I suggest to change the IDL of
The
The naming of attribute The example below shows how the API with this IDL works:
FYI, the markup of the image would be: <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? |
I'd suggest making two changes:
|
I think this new API would be useful because it would be frequently used.
I think Also, with this change, if the author wants to find the best candidate outside of the target element , |
For reducing the confusion when using spatialNavigationSearch API. Related: w3c/csswg-drafts#3743
…ibute * Add the step for using `inside` attribute of `option` argument * Modify that the `candidates` are assigned after assigning the `container`. Related: w3c#3743
For reducing the confusion when using spatialNavigationSearch API. Related: w3c/csswg-drafts#3743
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
andC
are focusable elements inside thecontainer2
)What will be the result of
container2.spatialNavigationSearch({dir: 'right', container: document});
betweenB
andD
?I guess both results would be expected depending on the use case.
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:
container
option.container
option is null, container is the result of element.getSpatialNavigationContainer()outsideOnly
option is true, then find the best candidate outside of the element and inside the container.null
.outsideOnly
option is false, find the best candidate inside the element.null
.IDL may change as following:
More results of API with suggesting option will as below:
container3.spatialNavigationSearch('right');
(same withcontainer3.spatialNavigationSearch('right',{candidates: container3.focusableAreas(), container: container3, outsideOnly: false});
)container3.spatialNavigationSearch('right',{candidates: container2.focusableAreas(), container: container2, outsideOnly: true});
container2.spatialNavigationSearch('right');
(same withcontainer2.spatialNavigationSearch('right',{candidates: container2.focusableAreas(), container: container2, outsideOnly : false});
)container2.spatialNavigationSearch('right',{outsideOnly: true});
(same withcontainer2.spatialNavigationSearch('right',{candidates: container2.focusableAreas(), container: container2, outsideOnly: true});
)container2.spatialNavigationSearch('right',{container: document, outsideOnly: true});
(same withcontainer2.spatialNavigationSearch('right',{candidates: document.focusableAreas(), container: document, outsideOnly: true});
)The text was updated successfully, but these errors were encountered: