- From: Florian Rivoal via GitHub <sysbot+gh@w3.org>
- Date: Mon, 03 Dec 2018 07:46:39 +0000
- To: public-css-archive@w3.org
--- Migrated from https://github.com/WICG/spatial-navigation/issues/10#issuecomment-347048754 Originally created by @Nadya678 on *Sun, 26 Nov 2017 23:42:41 GMT* --- Any equivalent for focusing the HTML object and/or to make it tabbable is needed. I use in many html5 projects `tabindex="-1"` on span to make the element focusable by mouse/touch and `tabindex="0"` to make te element tabbable. There are specialized controls made from `<span/>, <input/>` and `<label/>` elements. Part of these projects are commercial and they validate on W3C.org including html5 and css3. Because users (my clients) need select/option field fully styled (including dropdown arrow and list), I also made <select/> equivalent with use of `<span/>, <input/>` and `<label/>` elements. The dropdown works via :focus on span (tabindex="-1"). There is no tab-index="0" because the used <input type="radio"/> are tabbable. This control works with touch/mouse and keyboard without any JS. I read the attribute "tabindex" will be removed from html5 (probably without changing DOCTYPE declaration- why?) It is in use. In new specification **(if tabindex will be removed - WITHOUT DEPRECATION - YES, tabindex is not deprecated now**), there is needed new CSS style. Because in CSS is possible absolute positioning and fixed positioning, there will be needed also positive values of tab-index/nav-index according to w3c/csswg-drafts#1748. Probably also nav-group due to discussions. Other proposed solution for the problem (in other threads) are often buggy for absolute-positioned elements and for fixed positioned elements. There is also needed "nav-index: none;" if a "modal" "window" (a `<section/>, <aside/>, <form/>` or `</div>` only looking like dialog window) will be shown for example with any form. `user-select:none;` still lock only clicks but no keyboard navigation. There is many questions on stack overflow to this problem. Not solved. I patially solved this problem for radio+label and checkbox+label fields and for `<a><span/></a>` sequence with manipulation of visibility but no solution for TextBox and `<textarea/>`. The solution is hard but shall be easy to use... (additionally in last example - without internal `<span/>`). **BTW: my clients won't understand, the `<select/>` cannot be fully styled and they need... solution for this problem with change ONLY FRONT-END. If html5 attribute tabindex for `<span/>` will be removed, I have no solution for them for the moment.** -- GitHub Notification of comment by frivoal Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/3377#issuecomment-443617536 using your GitHub account
Received on Monday, 3 December 2018 07:46:40 UTC