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

[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:02 +0000
To: public-css-archive@w3.org
Message-ID: <issues.opened-512420859-1571997421-sysbot+gh@w3.org>
jihyerish has just created a new issue for https://github.com/w3c/csswg-drafts:

== [css-nav-1] Proper definition of 'spatial-navigation-action' property ==
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,
```html
<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?

Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/4449 using your GitHub account
Received on Friday, 25 October 2019 09:57:04 UTC

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