label:not([for]) is valid when has nested input field

[victor-homyakov]

You indicate label without [for] attribute as invalid at https://github.com/redroot/holmes/blob/master/holmes.css#L89.

HTML4 spec (http://www.w3.org/TR/html401/interact/forms.html#h-17.9.1):

When attribute is absent, the label being defined is associated with the element's contents.

HTML5 spec (http://www.w3.org/TR/html5/forms.html#attr-label-for)):

If the for attribute is not specified, but the label element has a labelable element descendant, then the first such descendant in tree order is the label element's labeled control.

E.g. this example is valid: <label><textarea name="text"></textarea></label>

IMHO .holmes-debug label:not([for]) can be changed to something more strict, e.g. .holmes-debug label:not([for]):empty

[danielgwood]

It's a good point, that is valid, and currently marked not valid by Holmes. However, it can't be as simple as just adding :empty to the selector, because this makes a lot of invalid cases appear valid. Example:

<div>
    <h3>1. Valid</h3>
    <label for="foo">Label for foo</label>
    <input type="text" id="foo" name="foo" />
</div>

<div>
    <h3>2. Also valid</h3>
    <label>
        Label for bar
        <input type="text" name="bar" />
    </label>
</div>

<div>
    <h3>3. Not valid</h3>
    <label>Label "for" baz</label>
    <input type="text" name="baz" />
</div>

<div>
    <h3>4. Not valid</h3>
    <label for="">Label "for" baz</label>
    <input type="text" name="baz" />
</div>

According to the spec, cases 1 and 2 should be valid, 3 and 4 should not. Holmes currently only shows case 1 as valid. If you make the change you suggest, cases 1, 2 and 3 will all appear valid.

[danielgwood]

Here's the basic test case I worked up for this: http://danielgwood.com/lab/holmes/issue-20.html

[justmarkup]

The problem is that case 2 can not be detected via css, because there is no selector for "label that contains an input as children", at least as far as I know.

[danielgwood]

Indeed - I was unable to think of a CSS solution. I believe you're right, without a "has" or "contains" selector, you can't test case 2 without also hitting case 3.