Create Label component

[seancolsen]

Problem

We don't have a great way to associate form labels with our input components.

Nesting them like this

<label>
  <span>Foo</span>
  <Select options={choices} bind:value={foo} />
</label>

will work but the svelte a11y linter complains.

Also W3C says:

Generally, explicit labels are better supported by assistive technology.

Proposed solution

• Create a utility function

  getAppWideUniqueId();

  It will return a string containing an auto-incrementing intger each time the function is called.

  Then we can use that function within components to generate unique id values to use for form inputs.

• Create a Label component

  • If it recieves a for prop, it uses that on the DOM element.

    Otherwise, it uses a value from getAppWideUniqueId() and also passes that value down through context using a key of 'formInputId' so that nested form input components can read that context value.

• Modify input components to work with the Label component.

  • If they find a 'formInputId' context value they should use that for their id, (unles passed an id through props).

[seancolsen]

I've marked this as ready since @pavish and I discussed the design over private chat. Pavish, feel free to weigh in with additional clarifications or further ideas.