Code Journal 1: Accessible Toggling

code-journal-1-accessible-toggling.markdown

Code Journal 1: Accessible Toggling

A Pen by Nathan Magyar on CodePen.

License.

index.html

<main>
  <section class="card-section">
    <article class="card">
      <p>The alarm is:</p>
      <h1 id="status" class="status-heading">OFF</h1>
      <fieldset>
        <input type="checkbox" id="alarm" class="alarm-checkbox" onChange="alarmToggle()">
        <label for="alarm" name="alarm" class="alarm-label">
          <span class="pretty-checkbox" onclick="alarmToggle()">
            <i class="material-icons check-icon">check</i>
          </span>
          Alarm
        </label>
      </fieldset>
    </article>
  </section>
  <article class="notes">
    <h2 class="centered-title">Takeaways:</h2>
    <ol class="takeaways-list">
      <li>
        Instead of over-relying on <code>div</code>, always be as semantic as possible with your HTML. Choose meaningful tags, such as <code>main</code>, <code>section</code>, <code>article</code>, and <code>fieldset</code>, as they will help screen readers navigate the page more efficiently. Future developers, and future-you, will also appreciate having code that is more readable.
      </li>
      <li>Ordinarily in a form, it's good to have a <code>value</code> attribute associated with an input's label, so the server knows what to enter with the label's <code>name</code>. If no <code>value</code> is given, it will default to "on." This actually works in our case (the <code>DOMString</code> submitted to the server will be <code>alarm=on</code>), so we can leave it out:
      <pre class="brush: html, first-line: 25">
      <input type="checkbox" id="alarm" class="alarm-checkbox" onChange="alarmToggle()">
      <label for="alarm" name="alarm" class="alarm-label">
        <span class="pretty-checkbox" onclick="alarmToggle()">
           <i class="material-icons check-icon">check</i>
        </span>
        Alarm
      </label>
      </pre>    
      </li>
      <li>
        Leverage the power of CSS as much as you can before turning to Javascript. By using the right operators and selectors, you can maintain your site's accessiblity AND visual style. Below is an example of feigning to style the <code>:focus</code> state of the replacement, or "pretty", checkbox. What's actually happening is that the following styles are being applied when the real checkbox, which has been launched into outer space via <code>absolute</code> positioning, is in <code>:focus</code>:
        <pre class="brush: scss, first-line: 104">
        input[type=checkbox]:focus ~ label > .pretty-checkbox {
          border: 1.5px solid $blue;
        }
        </pre>
      </li>
    </ol>
  </article>
</main>

script.js

SyntaxHighlighter.all();

let alarmToggle = () => {
  const alarmCheckbox = document.getElementById("alarm");
  const statusElement = document.getElementById("status");
  if (alarmCheckbox.checked)  {
    statusElement.textContent = 'ON'; 
  } 
  else {
    statusElement.textContent = 'OFF';
  }
}

scripts

<script src="https://cdnjs.cloudflare.com/ajax/libs/SyntaxHighlighter/3.0.83/scripts/shCore.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/SyntaxHighlighter/3.0.83/scripts/shBrushXml.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/SyntaxHighlighter/3.0.83/scripts/shBrushSass.js"></script>

style.scss

// Variables
$blue: #39A0ED;
$white: #FFF;
$grey: #999;
$grey-light: #F0F0F0;
$grey-dark: #C4C4C4;
$red: #F45042;
$radius: 5px;
$shadow: 0px 5px 20px 10px rgba(0, 0, 0, .2);

// Media Queries
$mobile: "screen and (max-width: 375px)";
$tablet: "screen and (min-width: 375.1px) and (max-width: 750px)";

// Styles
body {
  box-sizing: border-box;
  margin: 0;
}

main {
  padding: 0;
  margin: 0;
}

.card-section {
  margin: 0 auto;
  padding: 2rem 0;
  background-color: $blue;
  fieldset {
    border: none;
  }
}

.card {
  font-family: 'Raleway', sans-serif;
  margin: 0 auto;
  width: 200px;
  height: 200px;
  text-align: center;
  background-color: $white;
  border-radius: $radius;
  padding: .5rem 0;
  box-shadow: $shadow;
  .status-heading {
    font-size: 3rem;
    margin: 2rem auto;
  }
  .alarm-checkbox {
    position: absolute;
    top: -999999px;
  }
  .alarm-label {
    display: flex;
    justify-content: center;
    align-items: center;
    &:hover {
    cursor: pointer;
    }
  }
  @media #{$tablet} {
    width: 180px;
    height: 180px;
  }
  @media #{$mobile} {
    width: 150px;
    height: 150px;
  }
}

.pretty-checkbox {
  height: 1.5rem;
  width: 1.5rem;
  margin-right: 1rem;
  border: 1.5px solid $grey;
  background-color: $white;
  border-radius: $radius;
  position: relative;
  display: inline-block;
  transition: all .2s ease;
}

.check-icon {
  opacity: 0;
  color: $white;
  position: relative;
  top: .3rem;
  transition: all .3s ease;
}

input[type=checkbox]:checked ~ label > .pretty-checkbox {
  height: 1.5rem;
  width: 1.5rem;
  background-color: $blue;
  border: 1.5px solid $blue;
  border-radius: $radius;
  position: relative;
  display: inline-block;
  .check-icon {
    opacity: 1;
    top: 0;
  }
}

input[type=checkbox]:focus ~ label > .pretty-checkbox {
  border: 1.5px solid $blue;
}

.centered-title {
  text-align: center;
}

// Takeaways Section
.notes {
  font-family: 'Merriweather', serif;
  font-weight: 300;
  line-height: 1.6rem;
  max-width: 800px;
  margin: 0 auto;
  padding: 0 1rem;
  .takeaways-list {
     margin-bottom: 1rem;
  }
  code {
    font-size: 1rem;
    color: $red;
    background-color: $grey-light;
    padding: .1rem .25rem;
    border-radius: $radius;
    border: .5px solid $grey-dark;
  }
}

styles

<link href="https://cdnjs.cloudflare.com/ajax/libs/SyntaxHighlighter/3.0.83/styles/shCoreMidnight.css" rel="stylesheet" />