Re: [WICG/webcomponents] Template Instantiation Developer Productivity Proposal (Issue #1013)

Regarding the introduction, we shouldn't try to make that ergonomic. It's an antipattern and a significant accessibility and UX footgun, especially with ARIA attributes and form controls.

We should instead be nudging developers away from that antipattern (and `for`/`htmlFor` in general) to something like this:

```jsx
export default function Multiple() {
  ...

  return (
    <form onSubmit={handleSubmit}>
      <label>
        <div>Name:</div>
        <input type="text" name="name" value={formData.name} onChange={handleChange}/>
      </label>

      <label>
        <div>Email:</div>
        <input type="email" name="email" value={formData.email} onChange={handleChange}/>
      </label>

      <label>
        <div>Message:</div>
        <textarea id="message" name="message" value={formData.message} onChange={handleChange}/>
      </label>

      <button type="submit">Submit</button>
    </form>
  );
}
```

- It's much more accessible - users with accuracy issues can click on either the field or its label and gain focus on the field correctly. On mobile, this is important even for basic UX, since touch accuracy is much lower than mouse cursor accuracy for literally everyone.
    - `aria-labelledby` should also generally be avoided for similar reasons. It's less often avoidable, but it's also very frequently used unnecessarily.
- It's much easier to lay out in CSS. If you're doing flexbox, you can ensure that they're laid out in a single column in mobile while just as easily lay them out in rows or a grid on desktop, without having to be careful to ensure your labels stick with your data entry fields.
- It's easier to abstract. Form control `name`s have to be unique within a given form, but you don't have IDs that could clash with other IDs in the document.
    - Any time you have multiple microdata entries of the same type in a single document, you have to either ensure unique IDs or avoid IDs entirely. And the latter is much less brittle than the former.

And besides, you can get the names of the inner form controls without extra IDs via `form.elements.{name,email,...}`. You only need a reference to the form itself.

-----

TL;DR: I'm not fond of the idea of adding built-in support for automatic ID generation for anything. It's a recipe for disaster in multiple ways.

-- 
Reply to this email directly or view it on GitHub:
https://github.com/WICG/webcomponents/issues/1013#issuecomment-2257557589
You are receiving this because you are subscribed to this thread.

Message ID: <WICG/webcomponents/issues/1013/2257557589@github.com>