Subtask: checkbox best practices

Problem statement

The following have checkboxes that need to be checked for best practices:

[x] en-us/web/accessibility/aria/roles/checkbox_role: https://github.com/mdn/content/pull/31819

28: <input type="checkbox" id="chk1-label" />
29  <label for="chk1-label">Remember my preferences</label>

[x] en-us/web/accessibility/aria/roles/dialog_role:

116      </p>
117      <p>
118:       <input type="checkbox" id="autoLogin" />
119        <label for="autoLogin">Auto-login?</label>
120      </p>

[x] en-us/web/api/mouseevent:

113  <p>
114:   <label><input type="checkbox" id="checkbox" /> Checked</label>
115  </p>
116  <p>

[x] en-us/web/api/web_audio_api/controlling_multiple_parameters_with_constantsourcenode:

43  <div class="controls">
44:     <input type="checkbox" id="playButton">
45      <label for="playButton">Activate: </label>
46      <label for="volumeControl">Volume: </label>

[x] en-us/web/api/event/eventphase:

<li>Repeat the experience</li>
58  </ul>
59: <input type="checkbox" id="chCapture" />
60  <label for="chCapture">Use Capturing</label>
61  <div id="d1">

[ ] en-us/web/api/event/preventdefault:

58  <form>
59    <label for="id-checkbox">Checkbox:</label>
60:   <input type="checkbox" id="id-checkbox" />
61  </form>

[ ] en-us/web/api/formdata/formdata:

59    <input type="text" name="text2" value="bar" />
60    <input type="text" name="text2" value="baz" />
61:   <input type="checkbox" name="check" checked disabled />
62  </form>

[ ] en-us/web/html/element/label:


30  <label>
31    Do you like peas?
32:   <input type="checkbox" name="peas" />
33  </label>
34  ```

[ ] en-us/web/html/element/input:

1379  <label for="peas">Do you like peas?</label>
1380: <input type="checkbox" name="peas" id="peas" />

[ ] en-us/web/css/transform-style:

73  <div class="checkbox">
74    <label for="preserve"><code>preserve-3d</code></label>
75:   <input type="checkbox" id="preserve" checked />
76  </div>

[ ] en-us/web/css/_colon_checked:

51  <div>
52:   <input type="checkbox" name="my-checkbox" id="opt-in" />
53    <label for="opt-in">Check me!</label>
54  </div>

104: <input type="checkbox" id="expand-toggle" />
105  
106  <table>

[ ] en-us/web/css/_colon_disabled:

42      <legend>Billing address</legend>
43      <label for="billing-checkbox">Same as shipping address:</label>
44:     <input type="checkbox" id="billing-checkbox" checked />
45      <br />
46      <input type="text" placeholder="Name" disabled />

[ ] en-us/web/css/accent-color:

72: <input type="checkbox" checked />
73: <input type="checkbox" class="custom" checked />

[ ] en-us/web/css/_colon_indeterminate:

51    <legend>Checkbox</legend>
52    <div>
53:     <input type="checkbox" id="checkbox" />
54      <label for="checkbox">This checkbox label starts out lime.</label>
55    </div>

[ ] en-us/learn/tools_and_testing/client-side_javascript_frameworks/vue_styling:

465  <template>
466    <div class="custom-checkbox">
467:     <input type="checkbox" :id="id" :checked="isDone" class="checkbox" />
468      <label :for="id" class="checkbox-label">\{{label}}</label>
469    </div>

[ ] en-us/learn/tools_and_testing/client-side_javascript_frameworks/vue_first_component:

93     <template>
94       <div>
95:        <input type="checkbox" id="todo-item" />
96         <label for="todo-item">My Todo Item</label>
97       </div>

203  <template>
204    <div>
205:     <input type="checkbox" id="todo-item" />
206      <label for="todo-item">\{{label}}</label>
207    </div>

288: <input type="checkbox" id="todo-item" v-bind:checked="isDone" />
289  
290: <input type="checkbox" id="todo-item" :checked="isDone" />

356  <template>
357    <div>
358:     <input type="checkbox" :id="id" :checked="isDone" />
359      <label :for="id">\{{label}}</label>
360    </div>

[ ] en-us/learn/tools_and_testing/client-side_javascript_frameworks/svelte_components:

231     <div class="stack-small">
232       <div class="c-cb">
233:        <input type="checkbox" id="todo-{todo.id}"
234           on:click={() => todo.completed = !todo.completed}
235           checked={todo.completed}
...
401  {:else}
402    <div class="c-cb">
403:     <input type="checkbox" id="todo-{todo.id}"
404        on:click={onToggle} checked={todo.completed}
405      >
...
486       <!-- markup for displaying todo: checkbox, label, Edit and Delete Button -->
487       <div class="c-cb">
488:        <input type="checkbox" id="todo-{todo.id}"
489           on:click={onToggle} checked={todo.completed}
490         >

[ ] en-us/learn/tools_and_testing/client-side_javascript_frameworks/svelte_todo_list_beginning:

220        <div class="stack-small">
221          <div class="c-cb">
222:           <input type="checkbox" id="todo-2" checked />
223            <label for="todo-2" class="todo-label">
224              Create your first component
...
242        <div class="stack-small">
243          <div class="c-cb">
244:           <input type="checkbox" id="todo-3" />
245            <label for="todo-3" class="todo-label">
246              Complete the rest of the tutorial

[ ] en-us/learn/tools_and_testing/client-side_javascript_frameworks/svelte_variables_props:

127     {#each todos as todo, index (todo.id)}
128       <li>
129:        <input type="checkbox" checked={todo.completed}/> {index}. {todo.name} (id: {todo.id})
130       </li>
131     {:else}
...

224:    <input type="checkbox" id="todo-{todo.id}"
225       on:click={() => todo.completed = !todo.completed}
226       checked={todo.completed}

[ ] en-us/learn/tools_and_testing/client-side_javascript_frameworks/vue_conditional_rendering:

149    <div class="stack-small">
150      <div class="custom-checkbox">
151:       <input type="checkbox" class="checkbox" :id="id" :checked="isDone"
152               @change="$emit('checkbox-changed')" />
153        <label :for="id" class="checkbox-label">\{{label}}</label>

[ ] en-us/learn/tools_and_testing/client-side_javascript_frameworks/vue_computed_properties:

101: <input type="checkbox" class="checkbox" :id="id" :checked="isDone"
102         @change="$emit('checkbox-changed')" />

[ ] en-us/learn/css/css_layout/practical_positioning_examples:

356  <label for="toggle">❔</label>
357: <input type="checkbox" id="toggle">
358  <aside>

[ ] en-us/learn/forms/ui_pseudo-classes:

370        <label for="billing-checkbox">Same as shipping address:</label>
371:       <input type="checkbox" id="billing-checkbox" checked />

[ ] en-us/learn/mathml/first_steps/fractions_and_roots:

120    <ol id="options">
121      <li>
122:       <input type="checkbox" data-comment="Verify the order of children in an mfrac!">
123        An mfrac with an mroot as its first child and an msqrt as its second child.
124      </li>
125      <li>
126:       <input type="checkbox" data-highlight="mroot2" data-comment="The '6 over 7'-th root of five.">
127        An mroot with an mn as its first child and mfrac as its second child.
128      </li>
129      <li>
130:       <input type="checkbox" data-comment="This formula does not contain any fraction inside a square root!">
131        An msqrt containing an mfrac element.
132     </li>
133      <li>
134:       <input type="checkbox" data-comment="The square root of two." data-highlight="msqrt1">
135        An msqrt with one mn child.
136      </li>
137      <li>
138:       <input type="checkbox" data-comment="Verify the order of children in an mroot!">
139        An mroot with an mfrac as its first child and mn as its second child.
140      </li>
141      <li>
142:       <input type="checkbox" data-comment="The square root of 'eight minus nine'." data-highlight="msqrt2">
143        An msqrt with the following list of children: mn, mo, mn.
144      </li>
145      <li>
146:       <input type="checkbox" data-comment="The square root of two over the cubic root of four." data-highlight="mfrac1">
147        An mfrac with an msqrt as its first child and an mroot as its second child.
148      </li>
149      <li>
150:       <input type="checkbox" data-comment="mfrac must have exactly two children!">
151        An mfrac with the following list of children: msqrt, mn, msqrt.
152      </li>
153      <li>
154:       <input type="checkbox" data-comment="mroot must have exactly two children!">
155        An mroot with one mn child.
156      </li>
157      <li>
158:       <input type="checkbox" data-comment="The fraction six over seven." data-highlight="mfrac2">
159        An mfrac with two mn children.
160      </li>
161      <li>
162:       <input type="checkbox" data-comment="This formula does not contain any square root with more than two numbers!">
163        An msqrt with five mn children.
164      </li>
165      <li>
166:       <input type="checkbox" data-highlight="mroot1" data-comment="The cubic root of four.">
167        An mroot with two mn children.
168      </li>

/css-examples/css-text/word-break-checkbox.html:

   32      <section class="preview">
   33        <div class="field">
   34:         <input type="checkbox" id="one"><label for="one">LongWordThatHasNoBreakingPossibilities</label>
   35        </div>
   36  
   37        <div class="field field-br">
   38:         <input type="checkbox" id="two"><label for="two">LongWordThatHasNoBreakingPossibilities</label>
   39        </div>
   40      </section>
   ..
   48      <textarea class="playable playable-html" style="height: 180px;">
   49  <div class="field">
   50:   <input type="checkbox" id="one"><label for="one">LongWordThatHasNoBreakingPossibilities</label>
   51  </div>
   52  
   53  <div class="field field-br">
   54:   <input type="checkbox" id="two"><label for="two">LongWordThatHasNoBreakingPossibilities</label>
   55  </div>
   56      </textarea>

/interactive-examples/live-examples/html-examples/forms/label.html:

    1  <div class="preference">
    2      <label for="cheese">Do you like cheese?</label>
    3:     <input type="checkbox" name="cheese" id="cheese">
    4  </div>
    5  
    6  <div class="preference">
    7      <label for="peas">Do you like peas?</label>
    8:     <input type="checkbox" name="peas" id="peas">
    9  </div>

/learning-area/accessibility/aria/form-validation-checkbox-disabled.html:

   82        <div>
   83          <label for="musician">Musician:</label>
   84:         <input type="checkbox" name="musician" id="musician">
   85        </div>
   86        <div>

/learning-area/javascript/building-blocks/allowance-updater.html:

    8    <body>
    9      <label for="shopping-check">Has the shopping been done? </label>
   10:     <input type="checkbox" id="shopping-check">

/learning-area/html/forms/pseudo-classes/enabled-disabled-shipping.html:

   87          <div>
   88            <label for="billing-checkbox">Same as shipping address:</label>
   89:           <input type="checkbox" id="billing-checkbox" checked>
   90          </div>

/learning-area/html/forms/toggle-switch-example/index.html:

  111      <ul>
  112        <li>
  113:         <input type="checkbox" name="power" id="power">
  114          <label for="power"><span class="on">On</span> <span class="off">Off</span></label>
  115        </li>

/learning-area/css/css-layout/practical-positioning-examples/hidden-info-panel.html:

   53    <label for="toggle">❔</label>
   54:   <input type="checkbox" id="toggle">
   55    <aside>
   56      <h2>Information</h2>

/learning-area/css/css-layout/practical-positioning-examples/hidden-info-panel-start.html:

   16    <label for="toggle">❔</label>
   17:   <input type="checkbox" id="toggle">
   18    <aside>
   19      <h2>Information</h2>

/learning-area/tools-testing/cross-browser-testing/strategies/hidden-info-panel.html:

   59    <label for="toggle">❔</label>
   60:   <input type="checkbox" id="toggle">
   61    <aside>
   62      <h2>Information</h2>

Proposed solutions

Some may be ok, but these are the ones that still need to be individually checked.

openwebdocs / project

Subtask: checkbox best practices #134

Problem statement

Proposed solutions