Skip to content

template-require-valid-form-groups.md

Latest commit

 

History

History
69 lines (57 loc) · 2.31 KB

template-require-valid-form-groups.md

File metadata and controls

69 lines (57 loc) · 2.31 KB

ember/template-require-valid-form-groups

Require grouped form controls to have appropriate semantics.

This rule requires appropriate semantics for grouped form controls. Correctly grouped form controls will take one of two approaches:

  • use <fieldset> + <legend> (preferred)
  • associate controls using WAI-ARIA (also acceptable)

Examples

This rule forbids the following:

<template>
  <div>
    <label for="radio-001">Chicago Zoey</label>
    <input id="radio-001" type="radio" name="prefMascot-Zoey" value="chicago zoey" />
    <label for="radio-002">Office Hours Tomster</label>
    <input id="radio-002" type="radio" name="prefMascot-OfficeHoursTomster" value="office hours tomster" />
    <label for="radio-003">A11y Zoey</label>
    <input id="radio-003" type="radio" name="prefMascot-Zoey" value="a11y zoey" />
  </div>
</template>

This rule allows the following:

<template>
  <div role="group" aria-labelledby="preferred-mascot-heading">
    <div id="preferred-mascot-heading">Preferred Mascot Version</div>
    <label for="radio-001">Chicago Zoey</label>
    <input id="radio-001" type="radio" name="prefMascot-Zoey" value="chicago zoey" />
    <label for="radio-002">Office Hours Tomster</label>
    <input id="radio-002" type="radio" name="prefMascot-OfficeHoursTomster" value="office hours tomster" />
    <label for="radio-003">A11y Zoey</label>
    <input id="radio-003" type="radio" name="prefMascot-Zoey" value="a11y zoey" />
  </div>
</template>
<template>
  <fieldset>
    <legend>Preferred Mascot Version</legend>
      <div>
        <label for="radio-001">Chicago Zoey</label>
        <input id="radio-001" type="radio" name="prefMascot-Zoey" value="chicago zoey" />
      </div>
      <div>
        <label for="radio-002">Office Hours Tomster</label>
        <input id="radio-002" type="radio" name="prefMascot-OfficeHoursTomster" value="office hours tomster" />
      </div>
      <div>
        <label for="radio-003">A11y Zoey</label>
        <input id="radio-003" type="radio" name="prefMascot-Zoey" value="a11y zoey" />
      </div>
  </fieldset>
</template>

References