W3C home > Mailing lists > Public > public-css-archive@w3.org > October 2019

Re: [csswg-drafts] [css-nav-1] Proper definition of 'spatial-navigation-action' property (#4449)

From: Jihye Hong via GitHub <sysbot+gh@w3.org>
Date: Fri, 25 Oct 2019 09:57:55 +0000
To: public-css-archive@w3.org
Message-ID: <issue_comment.created-546289073-1571997474-sysbot+gh@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?


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

This archive was generated by hypermail 2.4.0 : Tuesday, 5 July 2022 06:41:55 UTC