Bootlint: Always set a type value for buttons

Default is the submit behaviour which isn’t indicated in the demos that excluded the attribute
wet-boew · Oct 8, 2014 · b08024d · b08024d
1 parent 55dac95
commit b08024d
Show file tree

Hide file tree

Showing 13 changed files with 64 additions and 65 deletions.
diff --git a/Gruntfile.coffee b/Gruntfile.coffee
@@ -929,7 +929,6 @@ module.exports = (grunt) ->
 						# We recommend handling this through the server headers so it never appears in the markup
 						"<head> is missing X-UA-Compatible <meta> tag that disables old IE compatibility modes"
 						# TODO: The rules below should be resolved
-						"Always set a `type` on `<button>`s."
 						"Only columns (.col-*-*) may be children of `.row`s"
 						"Unable to locate jQuery, which is required for Bootstrap's JavaScript plugins to work"
 						"Columns (.col-*-*) can only be children of `.row`s or `.form-group`s"

diff --git a/src/plugins/data-inview/data-inview-en.hbs b/src/plugins/data-inview/data-inview-en.hbs
@@ -43,7 +43,7 @@
 	</section>
 
 	<p>Different example text. Different example text. Different example text. Different example text. Different example text. Different example text. Different example text. Different example text.</p>
-	
+
 	<section class="wb-inview show-none bar-demo" data-inview="top-bar">
 		<h3 class="no-gutter">Section with a conditional top bar</h3>
 		<p>A bar will be displayed at the top when this section is <strong>fully out</strong> of the viewport (<code>class="show-none"</code>).</p>
@@ -116,7 +116,7 @@ wb.doc.on( &quot;all.wb-inview partial.wb-inview none.wb-inview&quot;, function(
 			</section>
 		</details>
 	</section>
-	
+
 	<p>Different example text. Different example text. Different example text. Different example text. Different example text. Different example text. Different example text. Different example text.</p>
 	<p>Other example text. Other example text. Other example text. Other example text. Other example text. Other example text. Other example text. Other example text. Other example text. Other example text. Other example text. Other example text.</p>
 	<p>Example text. Example text. Example text. Example text. Example text. Example text. Example text. Example text. Example text. Example text. Example text. Example text. Example text. Example text. Example text.</p>
@@ -145,13 +145,13 @@ wb.doc.on( &quot;all.wb-inview partial.wb-inview none.wb-inview&quot;, function(
 	</header>
 	<ul class="list-inline">
 		<li>
-			<button class="btn btn-default">Button 1</button>
+			<button class="btn btn-default" type="button">Button 1</button>
 		</li>
 		<li>
-			<button class="btn btn-default">Button 2</button>
+			<button class="btn btn-default" type="button">Button 2</button>
 		</li>
 		<li>
-			<button class="btn btn-default">Button 3</button>
+			<button class="btn btn-default" type="button">Button 3</button>
 		</li>
 	</ul>
 </section>
@@ -162,13 +162,13 @@ wb.doc.on( &quot;all.wb-inview partial.wb-inview none.wb-inview&quot;, function(
 	</header>
 	<ul class="list-inline">
 		<li>
-			<button class="btn btn-default">Button 1</button>
+			<button class="btn btn-default" type="button">Button 1</button>
 		</li>
 		<li>
-			<button class="btn btn-default">Button 2</button>
+			<button class="btn btn-default" type="button">Button 2</button>
 		</li>
 		<li>
-			<button class="btn btn-default">Button 3</button>
+			<button class="btn btn-default" type="button">Button 3</button>
 		</li>
 	</ul>
 </section>
diff --git a/src/plugins/data-inview/data-inview-fr.hbs b/src/plugins/data-inview/data-inview-fr.hbs
@@ -145,13 +145,13 @@ wb.doc.on( &quot;all.wb-inview partial.wb-inview none.wb-inview&quot;, function(
 	</header>
 	<ul class="list-inline">
 		<li>
-			<button class="btn btn-default">Bouton 1</button>
+			<button class="btn btn-default" type="button">Bouton 1</button>
 		</li>
 		<li>
-			<button class="btn btn-default">Bouton 2</button>
+			<button class="btn btn-default" type="button">Bouton 2</button>
 		</li>
 		<li>
-			<button class="btn btn-default">Bouton 3</button>
+			<button class="btn btn-default" type="button">Bouton 3</button>
 		</li>
 	</ul>
 </section>
@@ -162,13 +162,13 @@ wb.doc.on( &quot;all.wb-inview partial.wb-inview none.wb-inview&quot;, function(
 	</header>
 	<ul class="list-inline">
 		<li>
-			<button class="btn btn-default">Bouton 1</button>
+			<button class="btn btn-default" type="button">Bouton 1</button>
 		</li>
 		<li>
-			<button class="btn btn-default">Bouton 2</button>
+			<button class="btn btn-default" type="button">Bouton 2</button>
 		</li>
 		<li>
-			<button class="btn btn-default">Bouton 3</button>
+			<button class="btn btn-default" type="button">Bouton 3</button>
 		</li>
 	</ul>
 </section>
diff --git a/src/plugins/lightbox/lightbox-en.hbs b/src/plugins/lightbox/lightbox-en.hbs
@@ -103,7 +103,7 @@
 									</ol>
 								</li>
 							</ol>
-							<button class="btn btn-primary popup-modal-dismiss">Close modal popup</button>
+							<button class="btn btn-primary popup-modal-dismiss" type="button">Close modal popup</button>
 						</div>
 					</section>
 				</li>
@@ -141,7 +141,7 @@
 			&lt;/header&gt;
 			&lt;div class="modal-body"&gt;
 				...
-				&lt;button class="btn btn-primary popup-modal-dismiss"&gt;Close modal popup&lt;/button&gt;
+				&lt;button class="btn btn-primary popup-modal-dismiss" type="button"&gt;Close modal popup&lt;/button&gt;
 			&lt;/div&gt;
 		&lt;/section&gt;
 	&lt;/li&gt;
@@ -412,7 +412,7 @@
 				<option value="4">Modal popup</option>
 				<option value="5">Image gallery</option>
 			</select>
-			<button id="lbx-open-btn">Open lightbox</button>
+			<button id="lbx-open-btn" type="button">Open lightbox</button>
 
 			<section>
 				<h4>Code</h4>
@@ -428,7 +428,7 @@
 	&lt;option value=&quot;4&quot;&gt;Modal popup&lt;/option&gt;
 	&lt;option value=&quot;5&quot;&gt;Image gallery&lt;/option&gt;
 &lt;/select&gt;
-&lt;button id=&quot;lbx-open-btn&quot;&gt;Open lightbox&lt;/button&gt;</code></pre>
+&lt;button id=&quot;lbx-open-btn&quot; type=&quot;button&quot;&gt;Open lightbox&lt;/button&gt;</code></pre>
 						</section>
 
 					<section>

diff --git a/src/plugins/lightbox/lightbox-fr.hbs b/src/plugins/lightbox/lightbox-fr.hbs
@@ -102,7 +102,7 @@
 								</li>
 							</ol>
 							<p><a href="#">Lien - apparence par défaut</a></p>
-							<button class="btn btn-primary popup-modal-dismiss">Fermer le contenu superposé modal</button>
+							<button class="btn btn-primary popup-modal-dismiss" type="button">Fermer le contenu superposé modal</button>
 						</div>
 					</section>
 				</li>
@@ -145,7 +145,7 @@
 				&lt;/header&gt;
 				&lt;div class="modal-body"&gt;
 					...
-					&lt;button class="btn btn-primary popup-modal-dismiss"&gt;Fermer le contenu superposé modal&lt;/button&gt;
+					&lt;button class="btn btn-primary popup-modal-dismiss" type="button"&gt;Fermer le contenu superposé modal&lt;/button&gt;
 				&lt;/div&gt;
 			&lt;/section&gt;
 		&lt;/div&gt;
@@ -308,7 +308,7 @@
 		&lt;/li&gt;
 	&lt;/ul&gt;
 &lt;/section&gt;</code></pre>
-					</details>						
+					</details>
 				</section>
 			</section>
 
@@ -417,7 +417,7 @@
 				<option value="4">Contenu superposé modal</option>
 				<option value="5">Galerie d'images</option>
 			</select>
-			<button id="lbx-open-btn">Ouvrir le contenu superposé &#171;&#160;Lightbox&#160;&#187;</button>
+			<button id="lbx-open-btn" type="button">Ouvrir le contenu superposé &#171;&#160;Lightbox&#160;&#187;</button>
 
 			<section>
 				<h4>Code</h4>
@@ -433,7 +433,7 @@
 	&lt;option value=&quot;4&quot;&gt;Contenu superposé modal&lt;/option&gt;
 	&lt;option value=&quot;5&quot;&gt;Galerie d'images&lt;/option&gt;
 &lt;/select&gt;
-&lt;button id=&quot;lbx-open-btn&quot;&gt;Ouvrir le contenu superposé &#171;&#160;Lightbox&#160;&#187;&lt;/button&gt;</code></pre>
+&lt;button id=&quot;lbx-open-btn&quot; type=&quot;button&quot;&gt;Ouvrir le contenu superposé &#171;&#160;Lightbox&#160;&#187;&lt;/button&gt;</code></pre>
 					</section>
 
 					<section>

diff --git a/src/plugins/multimedia/multimedia-en.hbs b/src/plugins/multimedia/multimedia-en.hbs
@@ -217,8 +217,8 @@
 					<source type="video/mp4" src="http://video2.servicecanada.gc.ca/video/boew-wet/te-lj-eng.mp4" />
 					<track src="#inline-captions" kind="captions" data-type="text/html" srclang="en" label="English" />
 				</video>
-				<button class="btn btn-info cuepoint" data-cuepoint="45s">Cue point - 45s</button>
-				<button class="btn btn-info cuepoint" data-cuepoint="01:10">Cue point - 01:10</button>
+				<button class="btn btn-info cuepoint" data-cuepoint="45s" type="button">Cue point - 45s</button>
+				<button class="btn btn-info cuepoint" data-cuepoint="01:10" type="button">Cue point - 01:10</button>
 				<figcaption>
 					<p>Looking for a Job (<a href="http://www.servicecanada.gc.ca/eng/video/lj.shtml">Transcript</a>)</p>
 				</figcaption>
@@ -230,8 +230,8 @@
 		&lt;source type=&quot;video/mp4&quot; src=&quot;http://video2.servicecanada.gc.ca/video/boew-wet/te-lj-eng.mp4&quot; /&gt;
 		&lt;track src=&quot;#inline-captions&quot; kind=&quot;captions&quot; data-type=&quot;text/html&quot; srclang=&quot;en&quot; label=&quot;English&quot; /&gt;
 	&lt;/video&gt;
-	&lt;button class="btn btn-info cuepoint" data-cuepoint="45s"&gt;Cue point - 45s&lt;/button&gt;
-	&lt;button class="btn btn-info cuepoint" data-cuepoint="01:10"&gt;Cue point - 01:10&lt;/button&gt;
+	&lt;button class="btn btn-info cuepoint" data-cuepoint="45s" type="button"&gt;Cue point - 45s&lt;/button&gt;
+	&lt;button class="btn btn-info cuepoint" data-cuepoint="01:10" type="button"&gt;Cue point - 01:10&lt;/button&gt;
 	&lt;figcaption&gt;
 		&lt;p&gt;Looking for a Job (&lt;a href="http://www.servicecanada.gc.ca/eng/video/lj.shtml"&gt;Transcript&lt;/a&gt;)&lt;/p&gt;
 	&lt;/figcaption&gt;

diff --git a/src/plugins/multimedia/multimedia-fr.hbs b/src/plugins/multimedia/multimedia-fr.hbs
@@ -214,7 +214,7 @@
 	&lt;/figcaption&gt;
 &lt;/figure&gt;</code></pre>
 			</details>
-		</section>		
+		</section>
 		<section class="col-md-6">
 			<h3>MPEG4 (H264 + AAC) Source avec marqueurs temporels (cue points)</h3>
 			<p>Cet exemple illustre l'utilisation de boutons pour naviguer à des marqueurs temporels dans une vidéo.</p>
@@ -223,22 +223,22 @@
 					<source type="video/mp4" src="http://video2.servicecanada.gc.ca/video/boew-wet/te-lj-fra.mp4" />
 					<track src="#inline-captions" kind="captions" data-type="text/html" srclang="fr" label="Français" />
 				</video>
-				<button class="btn btn-info cuepoint" data-cuepoint="45s">Marqueur temporel - 45s</button>
-				<button class="btn btn-info cuepoint" data-cuepoint="01:10">Marqueur temporel - 01:10</button>
+				<button class="btn btn-info cuepoint" data-cuepoint="45s" type="button">Marqueur temporel - 45s</button>
+				<button class="btn btn-info cuepoint" data-cuepoint="01:10" type="button">Marqueur temporel - 01:10</button>
 				<figcaption>
 					<p>Trouver un emploi (<a href="http://www.servicecanada.gc.ca/fra/video/te.shtml">Transcription</a>)</p>
 				</figcaption>
 			</figure>
-			
+
 			<details class="mrgn-tp-md">
 				<summary>Visualiser le code</summary>
 				<pre><code>&lt;figure class=&quot;wb-mltmd&quot;&gt;
 	&lt;video poster=&quot;http://www.servicecanada.gc.ca/fra/video/images/te-lj-fra.jpg&quot; title=&quot;Trouver un emploi&quot;&gt;
 		&lt;source type=&quot;video/mp4&quot; src=&quot;http://video2.servicecanada.gc.ca/video/boew-wet/te-lj-fra.mp4&quot; /&gt;
 		&lt;track src=&quot;#inline-captions&quot; kind=&quot;captions&quot; data-type=&quot;text/html&quot; srclang=&quot;en&quot; label=&quot;Français&quot; /&gt;
 	&lt;/video&gt;
-	&lt;button class="btn btn-info cuepoint" data-cuepoint="45s"&gt;Marqueur temporel - 45s&lt;/button&gt;
-	&lt;button class="btn btn-info cuepoint" data-cuepoint="01:10"&gt;Marqueur temporel - 01:10&lt;/button&gt;
+	&lt;button class="btn btn-info cuepoint" data-cuepoint="45s" type="button"&gt;Marqueur temporel - 45s&lt;/button&gt;
+	&lt;button class="btn btn-info cuepoint" data-cuepoint="01:10" type="button"&gt;Marqueur temporel - 01:10&lt;/button&gt;
 	&lt;figcaption&gt;
 		&lt;p&gt;Trouver un emploi (&lt;a href="http://www.servicecanada.gc.ca/fra/video/te.shtml"&gt;Transcription&lt;/a&gt;)&lt;/p&gt;
 	&lt;/figcaption&gt;

diff --git a/src/plugins/overlay/overlay-en.hbs b/src/plugins/overlay/overlay-en.hbs
@@ -65,7 +65,7 @@
 		&lt;h2 class=&quot;modal-title&quot;&gt;Top bar&lt;/h2&gt;
 	&lt;/header&gt;
 	...
-&lt;/section&gt;</code></pre>				
+&lt;/section&gt;</code></pre>
 			</details>
 		</li>
 		<li>
@@ -110,7 +110,7 @@
 	&lt;/header&gt;
 	&lt;div class=&quot;modal-body&quot;&gt;
 		...
-		&lt;button class=&quot;btn btn-primary popup-modal-dismiss&quot;&gt;Close modal popup&lt;/button&gt;
+		&lt;button class=&quot;btn btn-primary popup-modal-dismiss&quot; type=&quot;button&quot;&gt;Close modal popup&lt;/button&gt;
 	&lt;/div&gt;
 &lt;/section&gt;</code></pre>
 			</details>
@@ -164,7 +164,7 @@
 			<option value="full-screen">Full-screen overlay</option>
 			<option value="hidden-header">Full-screen overlay - Hidden header</option>
 		</select>
-		<button id="overlay-open-btn">Open overlay</button>
+		<button id="overlay-open-btn" type="button">Open overlay</button>
 
 		<section>
 			<h4>Code</h4>
@@ -268,13 +268,13 @@ wb.doc.on( "click vclick", "#overlay-open-btn", function( event ) {
 	</header>
 	<ul class="list-inline">
 		<li>
-			<button class="btn btn-default">Button 1</button>
+			<button class="btn btn-default" type="button">Button 1</button>
 		</li>
 		<li>
-			<button class="btn btn-default">Button 2</button>
+			<button class="btn btn-default" type="button">Button 2</button>
 		</li>
 		<li>
-			<button class="btn btn-default">Button 3</button>
+			<button class="btn btn-default" type="button">Button 3</button>
 		</li>
 	</ul>
 </section>
@@ -285,13 +285,13 @@ wb.doc.on( "click vclick", "#overlay-open-btn", function( event ) {
 	</header>
 	<ul class="list-inline">
 		<li>
-			<button class="btn btn-default">Button 1</button>
+			<button class="btn btn-default" type="button">Button 1</button>
 		</li>
 		<li>
-			<button class="btn btn-default">Button 2</button>
+			<button class="btn btn-default" type="button">Button 2</button>
 		</li>
 		<li>
-			<button class="btn btn-default">Button 3</button>
+			<button class="btn btn-default" type="button">Button 3</button>
 		</li>
 	</ul>
 </section>
@@ -338,7 +338,7 @@ wb.doc.on( "click vclick", "#overlay-open-btn", function( event ) {
 				</ol>
 			</li>
 		</ol>
-		<button class="btn btn-primary popup-modal-dismiss">Close modal popup</button>
+		<button class="btn btn-primary popup-modal-dismiss" type="button">Close modal popup</button>
 	</div>
 </section>
 

diff --git a/src/plugins/overlay/overlay-fr.hbs b/src/plugins/overlay/overlay-fr.hbs
@@ -164,7 +164,7 @@
 			<option value="cs-plein-ecran">Contenu superposé plein écran</option>
 			<option value="en-tete-cache">Contenu superposé plein écran - En-tête caché</option>
 		</select>
-		<button id="overlay-open-btn">Ouvrir le contenu superposé</button>
+		<button id="overlay-open-btn" type="button">Ouvrir le contenu superposé</button>
 
 		<section>
 			<h4>Code</h4>
@@ -181,7 +181,7 @@
 	&lt;option value="cs-plein-ecran"&gt;Contenu superposé plein écran&lt;/option&gt;
 	&lt;option value="en-tete-cache"&gt;Contenu superposé plein écran - En-tête caché&lt;/option&gt;
 &lt;/select&gt;
-&lt;button id="overlay-open-btn"&gt;Open overlay&lt;/button&gt;</code></pre>
+&lt;button id="overlay-open-btn" type="button"&gt;Ouvrir le contenu superposé&lt;/button&gt;</code></pre>
 						</section>
 
 					<section>
@@ -268,13 +268,13 @@ wb.doc.on( "click vclick", "#overlay-open-btn", function( event ) {
 	</header>
 	<ul class="list-inline">
 		<li>
-			<button class="btn btn-default">Bouton 1</button>
+			<button class="btn btn-default" type="button">Bouton 1</button>
 		</li>
 		<li>
-			<button class="btn btn-default">Bouton 2</button>
+			<button class="btn btn-default" type="button">Bouton 2</button>
 		</li>
 		<li>
-			<button class="btn btn-default">Bouton 3</button>
+			<button class="btn btn-default" type="button">Bouton 3</button>
 		</li>
 	</ul>
 </section>
@@ -285,13 +285,13 @@ wb.doc.on( "click vclick", "#overlay-open-btn", function( event ) {
 	</header>
 	<ul class="list-inline">
 		<li>
-			<button class="btn btn-default">Bouton 1</button>
+			<button class="btn btn-default" type="button">Bouton 1</button>
 		</li>
 		<li>
-			<button class="btn btn-default">Bouton 2</button>
+			<button class="btn btn-default" type="button">Bouton 2</button>
 		</li>
 		<li>
-			<button class="btn btn-default">Bouton 3</button>
+			<button class="btn btn-default" type="button">Bouton 3</button>
 		</li>
 	</ul>
 </section>
@@ -339,7 +339,7 @@ wb.doc.on( "click vclick", "#overlay-open-btn", function( event ) {
 			</li>
 		</ol>
 		<p><a href="#">Lien - apparence par défaut</a></p>
-		<button class="btn btn-primary popup-modal-dismiss">Fermer le contenu superposé modal</button>
+		<button class="btn btn-primary popup-modal-dismiss" type="button">Fermer le contenu superposé modal</button>
 	</div>
 </section>
 

diff --git a/src/polyfills/meter/meter-en.hbs b/src/polyfills/meter/meter-en.hbs
@@ -71,8 +71,8 @@
 				<td><meter min="100" low="120" value="115" max="200" high="180">15% (too low)</meter></td>
 			</tr>
 			<tr>
-				<td colspan="3"><button class="btn btn-default" id="decreaseMeter">Decrease</button></td>
-				<td colspan="3"><button class="btn btn-default" id="increaseMeter">Increase</button></td>
+				<td colspan="3"><button class="btn btn-default" id="decreaseMeter" type="button">Decrease</button></td>
+				<td colspan="3"><button class="btn btn-default" id="increaseMeter" type="button">Increase</button></td>
 				<td><meter id="updateTest" min="100" low="120" value="150" max="200" high="180"><span class="wb-inv">150</span></meter>
 			</tr>
 		</tbody>
@@ -123,8 +123,8 @@
 			&lt;td&gt;&lt;meter min=&quot;100&quot; low=&quot;120&quot; value=&quot;115&quot; max=&quot;200&quot; high=&quot;180&quot;&gt;15% (too low)&lt;/meter&gt;&lt;/td&gt;
 		&lt;/tr&gt;
 		&lt;tr&gt;
-			&lt;td colspan=&quot;3&quot;&gt;&lt;button class=&quot;btn btn-default&quot; id=&quot;decreaseMeter&quot;&gt;Decrease&lt;/button&gt;&lt;/td&gt;
-			&lt;td colspan=&quot;3&quot;&gt;&lt;button class=&quot;btn btn-default&quot; id=&quot;increaseMeter&quot;&gt;Increase&lt;/button&gt;&lt;/td&gt;
+			&lt;td colspan=&quot;3&quot;&gt;&lt;button class=&quot;btn btn-default&quot; id=&quot;decreaseMeter&quot; type=&quot;button&quot;&gt;Decrease&lt;/button&gt;&lt;/td&gt;
+			&lt;td colspan=&quot;3&quot;&gt;&lt;button class=&quot;btn btn-default&quot; id=&quot;increaseMeter&quot; type=&quot;button&quot;&gt;Increase&lt;/button&gt;&lt;/td&gt;
 			&lt;td&gt;&lt;meter id=&quot;updateTest&quot; min=&quot;100&quot; low=&quot;120&quot; value=&quot;150&quot; max=&quot;200&quot; high=&quot;180&quot;&gt;&lt;span class=&quot;wb-inv&quot;&gt;150&lt;/span&gt;&lt;/meter&gt;
 		&lt;/tr&gt;
 	&lt;/tbody&gt;