Refer to attached html: nav_priority.html

Case 1.
button>start</button>
<div tabindex="0" style="position: absolute; top: 50px; background-color: green; width: 100px; height: 100px"></div>
<div tabindex="0" style="position: absolute; top: 50px; background-color: yellow; width: 50px; height: 50px"></div>

In this case, yellow element gets focus because intersecting(yellow-green) rect = yellow element's rect.


Case 2.
<button>start</button>
<div tabindex="0" style="position: absolute; top: 300px; background-color: green; width: 100px; height: 100px"></div>
<div tabindex="0" style="position: absolute; top: 300px; left: -5px; background-color: yellow; width: 50px; height: 50px"></div>

In this case, green element gets focus because its distance is shorter than yellow element


Case 3.
<button>start</button>
<div tabindex="0" style="position: absolute; top: 550px; background-color: green; width: 100px; height: 100px"></div>
<div tabindex="0" style="position: absolute; top: 600px; background-color: yellow; width: 50px; height: 50px"></div>

In this case, yellow element gets focus because intersecting(yellow-green) rect = yellow element's rect.


As we can see, the behavior is very ambigous. Sometimes yellow element gets focus, sometimes green element gets focus
even though the visual different is very small.

To keep consistent behavior, suggestion is:
1. Always choice shortest element.
2. If two element have shortest distance, and the two elements are overlapped each other, choice top element.
3. If two element have shortest distance, and not overlapped, choice by DOM order(prior is higher)


 

Deleted: nav_priority.html 1.3 KB

nav_priority.html 1.3 KB View Download