Re: [css3-ui] Aligning 'nav-index' with HTML5 tabindex

On Sun, Nov 20, 2011 at 3:09 PM, L. David Baron <dbaron@dbaron.org> wrote:
> One of the issues that came up in the joint meeting between CSS and
> WAI Protocols & Formats at TPAC (on October 31) was the 'nav-index'
> property in http://dev.w3.org/csswg/css3-ui/#nav-index .  (This is
> the first of two messages (on different topics) to follow up on that
> discussion.)

Thanks for the followup, David!

> There was some discussion about aligning it with HTML5.  In
> particular, HTML5 introduces additional rules for negative values of
> the tabindex attribute:
> http://dev.w3.org/html5/spec/editing.html#sequential-focus-navigation-and-the-tabindex-attribute
> which should probably be representable via a value in CSS.  It's
> probably more CSS-like to call this 'nav-index: none' than to assign
> special semantics to negative numbers as HTML does.  (CSS
> 'nav-index: auto' already corresponds, I believe, to HTML5
> tabindex="0".)

Not quite.  'auto' corresponds to omitting the HTML attribute
entirely.  HTML's "0" value puts it in the 'auto' order, but also
makes it focusable if it wasn't already.  'none' is indeed a better
name for the "-1" value.  Given that, I think we might be better
served by putting this into a different property, since it's
controlling focusability rather than navigation order.


> Additionally, I suspect some additional changes are needed to align
> the description with the one given in HTML5, though I haven't looked
> into this closely.  (I did notice that css3-ui refers to content
> order as "the order they appear in the character stream", which
> doesn't appear to me to be a sensible definition following DOM
> manipulation.)

Shame on Tantek for the layering violation!  Nothing in the platform
sees a character stream unless it's actually doing parsing.  Just
doing a s/the order they appear in the character stream/document
order/ will fix it.

I also note that nav-index commits the cardinal sin of allowing only
non-zero positive <number>s, which means that its range is bounded but
has no minimum value.  This should either allow 0 or allow the full
<number> range.

HTML only allows integers, but I don't think we should follow, for the
same reasons that flex-order is a <number> (and z-index should be).

HTML defines that setting tabindex to a valid positive integer *makes*
the element focusable.  UI currently does it the other way around -
*if* it's focusable, *then* it pays attention to a valid positive
nav-index.  We should match HTML here.

Finally, at the last f2f we expressed that -order is a better name for
these kinds of properties than -index.  Several compatibility tables
tell me that *no one* supports nav-index yet, so can we change this to
nav-order?


Given all this, I suggest the following:

1. Add a property called 'nav-focus', which controls whether an
element is focusable or not.  It takes 3 values, 'focus', 'none', and
'auto' (the default).  'focus' makes the element focusable, 'none'
makes it unfocusable, and 'auto' makes it focusable if the UA wants
to, or if the 'nav-index' property has a <number> value.  Regardless
of the value, the UA should apply additional heuristics to determine
whether an element can be focused, such as disallowing it if the
element is display:none or visibility:hidden.

2. Change 'nav-index' or 'nav-order', to match the future precedent
being set by 'flex-order' rather than the old precedent set by
'z-index', because the WG generally agrees that it's a better name.

3. Make 'nav-order' follow the HTML tabindex conventions, where
providing a value makes the element focusable (mention the 'nav-focus'
property here?).  Then, just lean on the set of focusable elements,
rather than trying to be explicit about what's navigable, so that
future changes to HTML or CSS can grow or shrink the set of focusable
elements without us needing to update anything.

4. Make 'nav-order' accept 0 as a valid value.  Preferably, make it
accept negative numbers as well.

5. Change the UA stylesheet, removing the current rule about
"*[tabindex]" and replacing it with:

[tabindex] { nav-order: attr(tabindex as number, auto); }
[tabindex=0] { nav-focus: focus; nav-order: auto; }
[tabindex=-1] { nav-focus: none; }

~TJ

Received on Monday, 21 November 2011 17:24:14 UTC