HTML Sandbox

html-sandbox.markdown

HTML Sandbox

A Pen by Marcy Sutton on CodePen.

License.

index.html

<md-content class="md-padding">
  <h1>Default HTML Sandbox</h1>
  <h2>Details/summary</h2>
  <details>
    <summary>This is the thing you focus on</summary>
    These are the contents
  </details>
  <h2>Radio button test</h2>
  <fieldset>
    <label>
      Cats
      <input type="radio" name="animals">
    </label>
    <label>
      Dogs
      <input type="radio" name="animals">
    </label>
  </fieldset>
  <h2>disabled test</h2>
  <div>
    <a href="#" disabled>link with [disabled]</a>
    <button disabled>disabled button</button>
    <button aria-disabled="true">aria-disabled button</button>
  </div>
  <h2>aria-hidden test</h2>
  <div aria-hidden="true">
    <p><code>aria-hidden="true"</code> and tab-index</p>
    <a href="#">aria-hidden link</a>
    <button>aria-hidden button</button>
  </div>
  <h2>select label test</h2>
  <label for="muppetSelect">Muppets</label>
  <select id="muppetSelect">
    <option>Animal</option>
    <option>Cookie Monster</option>
    <option>Gonzo</option>
    <option>Ms. Piggy</option>
    <option>Kermit the Frog</option>
    <option>Swedish Chef</option>
    <option>Statler and Waldorf</option>
    <option>Fozzy Bear</option>
  </select>
  <h2>Image alt</h2>
  <img src="http://muppethub.com/wp-content/uploads/2014/02/Animal-7.png" alt="">
  <div style="border:1px solid black; margin-top:1em;">
    <p>The below content should be hidden</p>
    <div hidden>
      <p>This content should be hidden</p>
    </div>
  </div>
  <h2>Button Types</h2>
   <button>Button</button>
  <input type="button" value="Input button">
  <h2>ARIA-Disabled</h2>
  <div aria-disabled="true">
    <div role="checkbox" tabindex="0" aria-label="checkbox"></div>
  </div>
  <h2>Default label/input</h2>
  <label for="input">Hamburgers</label>
  <input id="input">
  <h2>Links</h2>
  <a href="#">Link with # href</a>
  <a href="http://www.google.com">Link with href</a>
  <h2>Role tests</h2>
  <label>
     Search
    <input type="search">
  </label>
  <label>
     Text
    <input type="text">
  </label>
</md-content>

style.scss

img {
  max-width: 400px;
  border: 1px solid black;
}
[role="checkbox"] {
  border: 1px solid;
  display: inline-block;
  height: 25px;
  width: 25px;
}