- From: Nadya678 via GitHub <sysbot+gh@w3.org>
- Date: Thu, 31 Aug 2017 08:55:43 +0000
- To: public-css-archive@w3.org
Summary od discussion about tab-index/nav-index, tab-index-group, nav-up, nav-left, nav-top, nav-right.
Please remember, the TAB key is the the most important way for navigation, the nav-up etc. is only auxiliary way (works for the moment only for radiobutton gruop and option in select?)
tab-index: <signed number> | none| inherit | unset | initial;
tab-index-group: <signed number> | inherit | unset | initial;
The default values:
*
{
tab-index: none;
tab-index-group: inherit;
}
input, textarea, a, button /* ... and other focusable by default */
{
tab-index: 0;
}
[tabindex]
{
tab-index: attr( tabindex );
}
html
{
tab-index-group: 0;
}
Specification:
`tab-index: 0` - means "use first free number in range [1..infinite] in DOM document". The element is accessible via keyboard TAB/SHIFT+TAB keys and is focusable. 0 is converted to any number due to DOM position.
`tab-index: none`- means The element is unfocusable (also via keyboard)
`tab-index: <negative number>` means: the element is focusable only via keyboard. It is removed from tab queue. In this case tab-index**-group** can pointer to start tab queue after using TAB key if the element is focused.
**tab-index: <positive number>**: the non-descending position in TAB queue. If two or more elements has the same tab-index, there is used internal TAB queue according to DOM position.
tab-index-group: enclose elements in tab group. tab-groups are arranged in non descending behaviour.
An example (with inline styles for easier understanding):
```
<form id="e1" style="tab-index:none;">
<input type="text" style="tab-index:2;" id="e2"/>
<input type="text" style="tab-index:4;" id="e3"/>
<input type="text" style="tab-index:0;" id="e4"/>
<input type="text" style="tab-index:0;" id="e5"/>
<div id="e6" style="tab-index:-1; tab-index-group:2">
<input id="e7" style="text" tab-index:3 />
<input id="e8" style="text" tab-index:0 />
<div id="e9" style="tab-index:-1; tab-index-group:1">
<input id="e10" type="text" style="tab-index:1" />
</div>
</div>
<input id="e11" style="tab-index-group:-3; tab-index:100;" />
<input id="e12" style="tab-index-group:-3; tab-index:100;" />
</form>
```
translated to group/index:
e1: removed from queue
e2: 0/2,
e3: 0/4
e4: 0/1 (first free number)
e5: 0/3 (first free number)
e6:2/-1 (removed from queue)
e7: 2/3
e8: 2/1 (first free tab-index in the group 2)
e9: 1/-1 (removed from queue)
e10: 1/1
e11: -3/1
e12: -3/1 (but before e11 due to DOM model)
Tab-order (ascending): `#e11, #e12, #e4, #e2, #e5, #e3, #e10, #e8, #e7, [browser GUI] `.
Navigation with arrows:
nav-top: "<CSS3 selector>" | relative "<CSS3 selector>" | inherit | none | unset | initial; /* pressing of top arrow */
nav-left: "<CSS3 selector>" | relative "<CSS3 selector>" | inherit | none | unset | initial; /* pressing of left arrow */
nav-right: "<CSS3 selector>" | relative "<CSS3 selector>" | inherit | none | unset | initial; /* pressing of right arrow */
nav-bottom: "<CSS3 selector>" | relative "<CSS3 selector>" | inherit | none | unset | initial; /* pressing of bottom arrow */
Note: here can be recognized (by nav-up, nav-down, nav-left, nav-right) only elements with tab-index other than none.
Behaviour of detection:
<CSS3 selector> (for LTR reading):
nav-down and nav-right: first FOCUSABLE element found in selected set after the current element. If no element is found after, then the first element in selected set.
nav-up and nav-left: first FOCUSABLE element found in selected set before the current element. If no element is found before, then the last element in selected set.
If no element is found the arrow key do nothink or do default browser action.
Option relative: the CSS set is calculated via **currentElement.parentNode**.querySelectorAll(selector) instead of document.querySelectorAll(selector).
If selector contains "\" or double quote - it shall be escaped via back-slash (0x5C) character.
default value:
*
{
nav-top:none;
nav-bottom:none;
nav-left:none;
nav-right:none;
}
input[type="text"], input[type="password"], input[type="email"], input[type="tel"] /* , etc.*/
{
/* to prevent discord with edition of text */
nav-left: none !important;
nav-right: none !important;
}
textarea
{
/* to prevent discord with edition of text */
nav-left: none !important;
nav-right: none !important;
nav-left: none !important;
nav-top: none !important;
}
select
{
nav-up: relative "select option:not(:disabled)";
nav-down: relative "select option:not(:disabled)";
}
option
{
nav-down: relative "option";
nav-up: relative "option";
}
input[type="radio"]:checked
{
/* the initial definition shall use "name" of this element. the attr(name) cannot be used in selector.
the browser shall select next/previous radio due to nav-left and nav-right and this shall not be possible
to change*/
}
**if RTL reading is set the behaviour for nav-right and nav-left are swapped (words: after and before shall be swapped).**
--
GitHub Notification of comment by Nadya678
Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/1748#issuecomment-326233863 using your GitHub account
Received on Thursday, 31 August 2017 08:55:39 UTC