Skip to content

Commit 6124511

Browse files
author
Jihye Hong
committed
Merge remote-tracking branch 'upstream/master'
2 parents 85f6957 + 0bd2d5c commit 6124511

6 files changed

Lines changed: 226 additions & 30 deletions

File tree

‎demo/sample/heuristic_inert_attribute.html‎

Lines changed: 54 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,54 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6+
<meta name="application-name" content="inert attribute">
7+
<meta name="author" content="Jihye Hong">
8+
<meta name="description" content="Element which has the value of inert is true is considered as a non-focusable element.
9+
It is shown in the page, but it's impossible to interact with it.">
10+
<link rel="stylesheet" href="spatnav-style.css">
11+
<script src="spatnav-utils.js"></script>
12+
<script src="../../polyfill/spatnav-heuristic.js"></script>
13+
</head>
14+
<body>
15+
<div class="container" style="width:600px; height:500px;">
16+
<input type="text" value="You can edit this element"><br>
17+
<input id="option" type="checkbox">Check this to edit the forms below:
18+
19+
<br><br>
20+
<div id="inert_elm" inert style="border: 1px solid gray; padding: 10px; opacity: 0.5;">
21+
<textarea>type something</textarea><br>
22+
<input type="radio" name="radio1" checked> radio1
23+
<input type="radio" name="radio1" > radio2
24+
<input type="radio" name="radio1" > radio3
25+
<br><br>
26+
<select>
27+
<option>Hi</option>
28+
<option>Ho</option>
29+
</select>
30+
</div>
31+
</div>
32+
</body>
33+
<script type="text/javascript">
34+
const el = document.querySelector('#inert_elm');
35+
let check_box = document.getElementById('option');
36+
37+
if(check_box.checked)
38+
applyInert(el, check_box.checked);
39+
40+
check_box.onchange = function() {
41+
applyInert(el, check_box.checked);
42+
}
43+
44+
function applyInert(elm, boolean) {
45+
if (boolean) {
46+
elm.inert = false;
47+
elm.style.opacity = '1';
48+
} else {
49+
elm.inert = true;
50+
elm.style.opacity = '0.5';
51+
}
52+
}
53+
</script>
54+
</html>

‎demo/sample/heuristic_role_attribute.html‎

Lines changed: 37 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,37 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6+
<meta name="application-name" content="inert attribute">
7+
<meta name="author" content="Jihye Hong">
8+
<link rel="stylesheet" href="spatnav-style.css">
9+
<script src="../../polyfill/spatnav-heuristic.js"></script>
10+
<link rel="stylesheet" href="https://www.w3.org/TR/wai-aria-practices/examples/tabs/css/tabs.css">
11+
</head>
12+
<body>
13+
<div class="container" style="width:600px; height:500px;">
14+
<div class="tabs" style="width: 100%; font-size: 1.5rem;">
15+
<div role="tablist" style="font-size: 1.0rem" aria-label="Entertainment">
16+
<button role="tab" aria-selected="true" aria-controls="nils-tab" id="nils">Nils Frahm</button>
17+
<button role="tab" aria-selected="false" aria-controls="agnes-tab" id="agnes" tabindex="-1">Agnes Obel</button>
18+
<button role="tab" aria-selected="false" aria-controls="complexcomplex" id="complex" tabindex="-1" data-deletable="">Joke</button>
19+
</div>
20+
21+
<div tabindex="0" role="tabpanel" id="nils-tab" aria-labelledby="nils">
22+
<p>Nils Frahm is a German musician, composer and record producer based in Berlin. He is known for combining classical and electronic music and for an unconventional approach to the piano in which he mixes a grand piano, upright piano, Roland Juno-60, Rhodes piano, drum machine, and Moog Taurus.</p>
23+
</div>
24+
25+
<div tabindex="0" role="tabpanel" id="agnes-tab" aria-labelledby="agnes" hidden="hidden">
26+
<p>Agnes Caroline Thaarup Obel is a Danish singer/songwriter. Her first album, Philharmonics, was released by PIAS Recordings on 4 October 2010 in Europe. Philharmonics was certified gold in June 2011 by the Belgian Entertainment Association (BEA) for sales of 10,000 Copies.</p>
27+
</div>
28+
29+
<div tabindex="0" role="tabpanel" id="complexcomplex" aria-labelledby="complex" hidden="hidden">
30+
<p>Fear of complicated buildings:</p>
31+
<p>A complex complex complex.</p>
32+
</div>
33+
</div>
34+
</div>
35+
<script src="https://www.w3.org/TR/wai-aria-practices/examples/tabs/tabs-1/js/tabs.js"></script>
36+
</body>
37+
</html>

‎demo/style.css‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -19,6 +19,10 @@ body {
1919
word-break: break-word;
2020
}
2121

22+
:focus {
23+
outline: 2px solid #1E90FF;
24+
}
25+
2226
/* style for side menu area */
2327
nav {
2428
font-family:'LG Smart';
@@ -197,6 +201,10 @@ iframe:focus {
197201
outline: 5px solid #1E90FF;
198202
}
199203

204+
iframe:focus-within {
205+
outline: 5px solid #1E90FF;
206+
}
207+
200208
a {
201209
color: #0049bf;
202210
text-decoration: none;

‎explainer.md‎

Lines changed: 74 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -170,6 +170,9 @@ the specification exposes Javascript APIs and Events that enable authors to inte
170170

171171
#### JS APIs
172172

173+
* navigate()
174+
- Moves the focus to the best target in the corresponding direction
175+
173176
* getSpatialNavigationContainer()
174177
- Returns the spatial navigation focus container of an element.
175178

@@ -325,11 +328,77 @@ The approach we have chosen seems more inline with how existing implementations
325328
simpler and therefore easier to understand,
326329
and authors can switch to the other approaches using the APIs.
327330

328-
## Demo
329-
- [Blog using the spatial navigation polyfill](https://wicg.github.io/spatial-navigation/demo/blog/)
331+
## Open Questions
332+
### How can the developer knows weather the spatial navigation is supported or not?
333+
There are several approaches.
334+
1. Using the Media Query
335+
336+
```
337+
@media (navigation: spatial) { ... }
338+
@media (navigation: sequential) { ... }
339+
```
340+
341+
* related github issue: https://github.com/WICG/spatial-navigation/issues/41
342+
343+
2. Using the spatial navigation API
344+
If the spatial navigation is implemented, one of the API can be the criteria for the enablility of the spatial navigation
345+
For example,
346+
347+
```
348+
349+
if (document.body.spatialNavigationSearch) {
350+
// The spatial navigator is supported
351+
} else {
352+
//The spatial navigator is not supported
353+
}
354+
```
355+
356+
### How can the spatial navigation works for the iframe?
330357

331-
- [Samples using the spatial navigation polyfill](https://wicg.github.io/spatial-navigation/sample/)
358+
The iframe element needs to be consider carefully for moving the focus.
359+
Using the Feature Policy API can be the solution.
332360

333-
- [Samples for testing the implementation in Blink](https://wicg.github.io/spatial-navigation/blink_impl/heuristic_default_move.html)
361+
By default the focus can move to the iframe element which are the same-origin.
362+
But for the iframe with `spatialnavigation` value is given to `allow` attribute (Feature Policy API), the focus can move inside it.
334363

335-
***Note***: Samples work best in the latest Chrome with the experimental web platform features enabled (--enable-spatial-navigation flag) otherwise they won't work.
364+
In detail, the approach for the Feature policy would be like below:
365+
366+
* Default policy: spatialnavigation 'self'
367+
368+
* `Feature-Policy` HTTP header
369+
370+
A page can declare the spatial navigation feature in its HTTP headers as follows:
371+
```
372+
Feature policy: spatialnavigation 'self'
373+
```
374+
It means that only same-origin iframe elements are allowed for the spatial navigation.
375+
376+
* iframe `allow` attribute
377+
378+
The feature can be specified for a single iframe element using `allow` attribute as below:
379+
```
380+
<iframe src="https://example.com..." allow="spatialnavigation 'none'"></iframe>
381+
```
382+
This will block the spatial navigation feature for the corresponding iframe element.
383+
384+
For example, the spatial navigation feature is allowed when the feature policy is specified as below:
385+
![<img>featurepolicy-example](https://github.com/jihyerish/jihyerish.github.io/blob/master/img/featurepolicy.png)
386+
387+
| Origin | Policy |
388+
|-|-|
389+
| Default | sptialnavigation 'self' |
390+
| example.com | `Feature-Policy: spatialnavigation https://game.com` |
391+
| game.com | `<iframe src=“game.com" allow=“spatialnavigation https://good-ad.com"></iframe>` |
392+
393+
The spatial navigation feature cannot be used for "ad.com" and "bad-ad.com"
394+
395+
### How can the spatial navigation works for the HTMLFormElement?
396+
397+
In some browser, the HTMLFormElement is implemented like the UA-defined shadow dom.
398+
It makes hard to handle those element with JS lib.
399+
Therefore, we propose the guideline for handling the focus on those element.
400+
* Guideline: https://github.com/WICG/spatial-navigation/wiki/Spatial-Navigation-Guideline-for-HTMLFormElement
401+
402+
## Demo
403+
- [Demo Center](https://wicg.github.io/spatial-navigation/demo/)
404+
- [Blog using the spatial navigation polyfill](https://wicg.github.io/spatial-navigation/demo/blog/)

‎polyfill/README.md‎

Lines changed: 10 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -138,7 +138,7 @@ NOTE: The APIs below are non-standard and experimental features of the spatial n
138138
* Parameter
139139
* element : Required.
140140
- Any element.
141-
* <code>findCandidates (element, dir)</code> :
141+
* <code>findCandidates (element, dir, option)</code> :
142142
* Searchs all valid candidates for a certain direction.
143143
* Returns a list of elements.
144144
* Parameter
@@ -147,7 +147,11 @@ NOTE: The APIs below are non-standard and experimental features of the spatial n
147147
* dir : Required.
148148
- The direction to find candidates.
149149
- It should be one of <code>['up', 'down', 'left', 'right']</code>.
150-
* <code>findNextTarget (element, dir)</code> :
150+
* option : Optional.
151+
- Default value is <code>{'mode': 'visible'}</code>.
152+
- The FocusableAreasOptions to find candidates.
153+
- It should be <code>{'mode': 'visible'}</code> or <code>{ mode: 'all' }</code>.
154+
* <code>findNextTarget (element, dir, option)</code> :
151155
* Indicates what is the best element to move the focus for a certain direction.
152156
* Returns the next target element.
153157
- If there is no target for the direction, it returns <code>null</code>.
@@ -158,6 +162,10 @@ NOTE: The APIs below are non-standard and experimental features of the spatial n
158162
* dir : Required.
159163
- The direction to find candidates.
160164
- It should be one of <code>['up', 'down', 'left', 'right']</code>.
165+
* option : Optional.
166+
- Default value is <code>{'mode': 'visible'}</code>.
167+
- The FocusableAreasOptions to find candidates.
168+
- It should be <code>{'mode': 'visible'}</code> or <code>{ mode: 'all' }</code>.
161169
* <code>getDistanceFromTarget (element, candidateElement, dir)</code> :
162170
* Calculates the distance between the currently focused element and a certain candiate element.
163171
* Parameter

0 commit comments

Comments
 (0)