Bugzilla

I looked at the email addresses input table, and the design seems slightly broken.

Currently it is

```html
<!-- These labels seem to be duplicates, and very far away structurally from where they are used. -->
<label id="vcard-email-table-header-type-label" hidden="">Email address</label>
<label id="vcard-email-table-header-email-label" hidden="">Email address</label>
<!-- This label shouldn't have both text content and an aria-label. Moreover, the aria-label is not an appropriate label for a checkbox. -->
<label id="vcard-email-table-header-primary" hidden="" aria-label="Choose your primary email address">Default</label>
...
<table>
  <thead>
    <tr>
      <th scope="col">Type</th>
      <th scope="col">Email address</th>
      <!-- Same issue with the aria-label as above. Also, this is hidden when creating a new contact. -->
      <th scope="col" aria-label="Choose your primary email address" hidden="">Default</th>
    </tr>
  </thead>
  <tbody>
    <!-- I'm not sure why a role of "row" was set. -->
    <tr is="vcard-email" slot="v-email" role="row">
      <td>
        <select class="vcard-type-selection" aria-labelledby="vcard-email-table-header-type-label">
        </select>
      </td>
      <td>
        <input type="email" aria-labelledby="vcard-email-table-header-email-label" />
      </td>
      <td>
        <input type="checkbox" aria-labelledby="vcard-email-table-header-primary" />
      </td>
    </tr>
  </tbody>
</table>
```

Whereas a simpler design would be (following https://webaim.org/techniques/forms/advanced#multiple)

```html
<!-- No extra labels. -->
<table>
  <thead>
    <tr>
      <th scope="col" id="vcard-email-table-header-type-label">Type</th>
      <th scope="col" id="vcard-email-table-header-email-label">Email address</th>
      <!-- "Default" or "Default email" is a fine label for the checkbox. -->
      <th scope="col" id="vcard-email-table-header-primary">Default</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>
        <select class="vcard-type-selection" aria-labelledby="vcard-email-table-header-type-label">
        </select>
      </td>
      <td>
        <input type="email" aria-labelledby="vcard-email-table-header-email-label" />
      </td>
      <td>
        <input type="checkbox" aria-labelledby="vcard-email-table-header-primary" />
      </td>
    </tr>
  </tbody>
</table>
```

Please let me know if there is some specific problem that motivated the current design and maybe I can give a solution.

I looked at the email addresses input table, and the design seems slightly broken.

Currently it is

```html
<!-- These labels seem to be duplicates, and very far away structurally from where they are used. -->
<label id="vcard-email-table-header-type-label" hidden="">Email address</label>
<label id="vcard-email-table-header-email-label" hidden="">Email address</label>
<!-- This label shouldn't have both text content and an aria-label. Moreover, the aria-label is not an appropriate label for a checkbox. -->
<label id="vcard-email-table-header-primary" hidden="" aria-label="Choose your primary email address">Default</label>
...
<table>
  <thead>
    <tr>
      <th scope="col">Type</th>
      <th scope="col">Email address</th>
      <!-- Same issue with the aria-label as above. Also, this is hidden when creating a new contact. -->
      <th scope="col" aria-label="Choose your primary email address" hidden="">Default</th>
    </tr>
  </thead>
  <tbody>
    <!-- I'm not sure why a role of "row" was set. -->
    <tr is="vcard-email" slot="v-email" role="row">
      <td>
        <select class="vcard-type-selection" aria-labelledby="vcard-email-table-header-type-label">
        </select>
      </td>
      <td>
        <input type="email" aria-labelledby="vcard-email-table-header-email-label" />
      </td>
      <td>
        <input type="checkbox" aria-labelledby="vcard-email-table-header-primary" />
      </td>
    </tr>
  </tbody>
</table>
```

Whereas a simpler design would be (following https://webaim.org/techniques/forms/advanced#multiple)

```html
<!-- No extra labels. -->
<table>
  <thead>
    <tr>
      <th scope="col" id="vcard-email-table-header-type-label">Type</th>
      <th scope="col" id="vcard-email-table-header-email-label">Email address</th>
      <!-- "Default" or "Default email" is a fine label for the checkbox. -->
      <th scope="col" id="vcard-email-table-header-primary">Default</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>
        <!-- Labelled by the heading. -->
        <select class="vcard-type-selection" aria-labelledby="vcard-email-table-header-type-label">
        </select>
      </td>
      <td>
        <input type="email" aria-labelledby="vcard-email-table-header-email-label" />
      </td>
      <td>
        <input type="checkbox" aria-labelledby="vcard-email-table-header-primary" />
      </td>
    </tr>
  </tbody>
</table>
```

Please let me know if there is some specific problem that motivated the current design and maybe I can give a solution.