W3C home > Mailing lists > Public > public-css-archive@w3.org > December 2018

Re: [csswg-drafts] Reordered sequential navigation (#3377)

From: Florian Rivoal via GitHub <sysbot+gh@w3.org>
Date: Mon, 03 Dec 2018 07:46:39 +0000
To: public-css-archive@w3.org
Message-ID: <issue_comment.created-443617536-1543823198-sysbot+gh@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

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