- From: Jihye Hong via GitHub <sysbot+gh@w3.org>
- Date: Fri, 25 Oct 2019 09:57:55 +0000
- To: public-css-archive@w3.org
> There is [`spatial-navigation-action` CSS property ](https://drafts.csswg.org/css-nav-1/#propdef-spatial-navigation-action)which can define the spatial navigation behavior for the scrollable element.
>
> Currently, the spec describes this property is applied to **scroll containers** and **not be inherited**.
> I'd like to ask if this description is proper.
>
> If the scrollable element is specified with `spatial-navigation-action`, its children element which are all kinds of element also be affected by the feature of the property.
>
> For example, if there is a page like below,
>
> ```
> <div class="container" tabindex="0" style="width:600px; height:100px; overflow-y: scroll; spatial-navigation-action: focus;">
> <button id="box1" class="box" style="top: 170px; left: 100px;"></button>
> <button id="box2" class="box" style="top: 550px; left: 100px;"></button>
> ...
> <button id="box10" class="box" style="top: 550px; left: 100px;"></button>
> </div>
> ```
>
> ('focus' value for `spatial-navigation-action` means that the directional input only works for moving the focus, not scrolling.)
> Once the focus moves inside `.container` element, the focus moves among button elements.
> But the behavior of moving the focus by directional input works as just moving the focus and not scrolling manually. This is because the button elements still are affected by `spatial-navigation-action: focus` which specified on the `.container` element.
>
> [This demo](https://wicg.github.io/spatial-navigation/demo/sample/api_spatial_navigation_action.html) shows how this works.
>
> Does the current description of the property suit the intended behavior that is described in the spec and shown in the demo above?
>
> For my understanding, the CSS property which isn't inherited but affects the applied element's children is the one who creates the stacking context.
> Am I understanding right?
> Can `spatial-navigation-action` also create a stacking context?
@frivoal
--
GitHub Notification of comment by jihyerish
Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/4449#issuecomment-546289073 using your GitHub account
Received on Friday, 25 October 2019 09:57:56 UTC