Add warning for h2[name] elements

[ddbeck]

If Kuma is going to do weird things with name attributes, I figured it wouldn't be a bad idea to warn about it.

[ddbeck]

At least for the time being, you can see how this works on a real page: text-rendering.

[ddbeck]

In our most recent call, Will made a good comment about how we shouldn't have to fight with fussy source stuff. With that in mind, I changed this warn only when a name attribute doesn't map to the innerText of the <h2> element.

[wbamberg]

Thanks for this, Daniel, and sorry to be slow reviewing.

This looks and seems to work great. But I'm not sure how it would be used.

Only logging a warning for a mismatch is not enough, I think - the problem with name is that if I'm making changes to lots of H2 headings (say, "Example" -> "Examples") then my changes will be undermined by Kuma's behaviour here even if the headings match.

So my first inclination is to log for any h2[name] occurrences. When I change your PR to do this, the number of warnings for Web/CSS goes from 12 to 311.

But even then, what am I supposed to do about these? Are we planning to have a task to fix them all manually? But I'm fixing them manually, anyway, when they give me problems fixing other errors. So I'm not sure who having a separate message is really useful here.

What I'd really like would be to fix Kuma's unhelpful behaviour :/. I've filed mdn/yari#6969.

[ddbeck]

My thinking here was to help you from seemingly "wrong" linter results caused by name attributes, rather than guard against all name attributes. Some examples:

Linter	Source	Commentary
⚠️	<h2 id="Example" name="Example">Examples</h2>	This one is a problem because name has clobbered the ID. You'll get a missing ingredient, even though you've written the right heading. The PR as it stands helps with this.
⚠️	<h2 id="Examples" name="Examples">Example</h2>	This one is a problem because name/id is correct but the text is wrong. This allows the ingredient check to pass, even though the text is incorrect. The PR as it stands helps with this.
✅	<h2 id="Examples" name="Examples">Examples</h2>	This one is harmless because everything—text, name, and id—is in agreement. That name exists is risky, but only hypothetically. The PR as it stands does not help with this.
✅	<h2 id="Examples">Examples</h2>	This is one is the ideal case: no dangerous name attribute and no problem. The PR as it stand (rightly) does not help with this.

You're suggesting making the third row a warning as well. The benefit of this is that you'd be warned before editing that name attributes might cause you problems. But that struck me as potentially fussy: if the name and text match up, it's not necessarily a content problem (i.e., a missing ingredient). That is to say, under your suggested change, you can fail this linter rule without having failed the recipe.

I can happily revert my change to capture those, I just thought I'd call attention to what that implies. Another route might be to make the ingredient check more aggressive: instead of checking h2#Examples we could check for both h2#Examples and that the text literal inside h2#Examples is exactly "Examples".