Added type="button" and focusable SVG bug note

Author: ericwbailey

partials/section.forms.hbs

@@ -375,17 +375,19 @@
                 <h3 id="subtitle__button-states">Buttons</h3>
             </legend>
 
-            <button>
+            <button type="button">
                 Button
             </button>
 
             <button
-                data-button-priority="primary">
+                data-button-priority="primary"
+                type="button">
                 Primary Button
             </button>
 
             <button
-                data-button-priority="secondary">
+                data-button-priority="secondary"
+                 type="button">
                 Secondary Button
             </button>
 
@@ -394,19 +396,20 @@
                 value="Input Button"
                 type="button" />
 
-            <button aria-label="Icon Button">
+            <button type="button" aria-label="Icon Button">
                 &#9742;
             </button>
 
-            <button>
-                Button with <abbr>SVG</abbr> icon
+            <button type="button">
                 <svg
                     aria-hidden="true"
                     height="16"
                     width="16"
+                    focusable="false"
                     viewBox="0 0 16 16"
                     xmlns="http://www.w3.org/2000/svg">
                     <path fill="#000000" fill-rule="evenodd" d="M8,16 C12.418278,16 16,12.418278 16,8 C16,3.581722 12.418278,0 8,0 C3.581722,0 0,3.581722 0,8 C0,12.418278 3.581722,16 8,16 Z M8.28116557,3 C8.58745219,3 8.8466139,3.10719871 9.05865848,3.32159934 C9.27070306,3.53599997 9.37672376,3.79398367 9.37672376,4.09555819 C9.37672376,4.3971327 9.26952505,4.6539384 9.05512442,4.86598298 C8.84072379,5.07802756 8.58274009,5.18404826 8.28116557,5.18404826 C7.97959106,5.18404826 7.72278536,5.07802756 7.51074078,4.86598298 C7.2986962,4.6539384 7.1926755,4.3971327 7.1926755,4.09555819 C7.1926755,3.79398367 7.2986962,3.53599997 7.51074078,3.32159934 C7.72278536,3.10719871 7.97959106,3 8.28116557,3 Z M9.270702,6.20185716 L9.270702,11.4393321 C9.270702,11.9058302 9.32489036,12.2038662 9.4332687,12.333449 C9.54164704,12.4630318 9.75368844,12.5372462 10.0693993,12.5560947 L10.0693993,12.8105469 L6.5,12.8105469 L6.5,12.5560947 C6.79215031,12.5466704 7.00890374,12.4618539 7.1502668,12.3016424 C7.24450883,12.1932641 7.29162914,11.9058302 7.29162914,11.4393321 L7.29162914,7.58014004 C7.29162914,7.11364196 7.23744078,6.81560599 7.12906244,6.6860232 C7.0206841,6.5564404 6.81099872,6.48222591 6.5,6.4633775 L6.5,6.20185716 L9.270702,6.20185716 Z"/>
+                    Button with <abbr>SVG</abbr> icon
                 </svg>
             </button>
 
@@ -421,6 +424,9 @@
                 <li>
                     <small>Add <code>pointer-events: none;</code> to <a rel="external noopener" href="https://twitter.com/stowball/status/857707052545613824">inline SVG icons placed in buttons</a>.</small>
                 </li>
+                <li>
+                    <small>Add <code>focusable="false"</code> to SVG inside of a focusable element (links, buttons, etc.) to prevent <a rel="external noopener" href="https://simplyaccessible.com/article/7-solutions-svgs#acc-heading-4">a bug with Internet Explorer</a>.</small>
+                </li>
                 <li>
                     <small>Use <code>tabindex="0"</code> in conjunction with <code>role="button"</code> to ensure that the text button is focusable. Use <code>cursor: pointer;</code> in the CSS to communicate that it is interactable. Learn more about <a rel="external noopener" href="https://css-tricks.com/use-button-element/"><cite>When To Use The Button Element</cite></a>.</small>
                 </li>
@@ -589,12 +595,14 @@
             <div id="subsection__buttons" role="region" aria-labelledby="subtitle__buttons"><!-- Start of #subsection__buttons -->
                 <h4 id="subtitle__buttons">Buttons</h4>
                 <button
-                    disabled>
+                    disabled
+                    type="button">
                     Disabled
                 </button>
 
                 <button
-                    aria-busy="true">
+                    aria-busy="true"
+                    type="button">
                     Loading
                 </button>