<h2 id="id-group-label">
    Choose the ingredients for your pizza
</h2>
<div role="group" aria-labelledby="id-group-label">
    <ul class="checkboxes">
      <li>
        <div role="checkbox"
             aria-checked="false"
             tabindex="0">
          Cheese
        </div>
      </li>
      <li>
        <div role="checkbox"
             aria-checked="true"
             tabindex="0">
          Mushrooms
        </div>
      </li>
      <li>
        <div role="checkbox"
             aria-checked="false"
             tabindex="0">
          Olives
        </div>
      </li>
      <li>
        <div role="checkbox"
             aria-checked="false"
             tabindex="0">
            Chicken
        </div>
      </li>
    </ul>
    
</div>
<!---
This component has been adapted from an example provided by the W3C, in accordance with the W3C Software and Document License https://www.w3.org/copyright/software-license-2023/
-->
  

class Checkbox {
    constructor(domNode) {
        this.domNode = domNode;
        this.domNode.tabIndex = 0;

        if (!this.domNode.getAttribute('aria-checked')) {
        this.domNode.setAttribute('aria-checked', 'false');
        }

        this.domNode.addEventListener('keydown', this.onKeydown.bind(this));
        this.domNode.addEventListener('keyup', this.onKeyup.bind(this));
        this.domNode.addEventListener('click', this.onClick.bind(this));
    }

    toggleCheckbox() {
        if (this.domNode.getAttribute('aria-checked') === 'true') {
        this.domNode.setAttribute('aria-checked', 'false');
        } else {
        this.domNode.setAttribute('aria-checked', 'true');
        }
    }

    /* EVENT HANDLERS */

    // Make sure to prevent page scrolling on space down
    onKeydown(event) {
        if (event.key === ' ') {
        event.preventDefault();
        }
    }

    onKeyup(event) {
        var flag = false;

        switch (event.key) {
        case ' ':
            this.toggleCheckbox();
            flag = true;
            break;

        
        default:
            break;
        }
        if (flag) {
        event.stopPropagation();
        }
    }

    onClick() {
        this.toggleCheckbox();
    }
}

// Initialize checkboxes on the page
window.addEventListener('load', function () {
let checkboxes = document.querySelectorAll('.checkboxes [role="checkbox"]');
for (let i = 0; i < checkboxes.length; i++) {
new Checkbox(checkboxes[i]);
}

});

//This component has been adapted from an example provided by the W3C, in accordance with the W3C Software and Document License https://www.w3.org/copyright/software-license-2023/

/*
  Checkbox (Single) — Restyled
  Deque University ARIA Component

  This component has been adapted from an example provided by the W3C,
  in accordance with the W3C Software and Document License
  https://www.w3.org/copyright/software-license-2023/
*/

:root {
  --dqu-interactive: #2e5f7a;
  --dqu-interactive-light: rgba(46, 95, 122, 0.08);
  --dqu-border-secondary: #8c827d;
  --dqu-text-primary: #21201e;
  --dqu-bg-primary: #fcfaf8;
  --dqu-font-family: "Noto Sans", sans-serif;
}

ul.checkboxes {
  list-style: none;
  margin: 0;
  padding: 0;
  padding-left: 1em;
}

ul.checkboxes li {
  list-style: none;
  margin: 1px;
  padding: 0;
}

[role="checkbox"] {
  display: inline-block;
  padding: 4px 8px;
  cursor: pointer;
  font-family: var(--dqu-font-family);
  font-size: 1rem;
  line-height: 1.5;
  color: var(--dqu-text-primary);
  border: 2px solid transparent;
  border-radius: 4px;
}

[role="checkbox"]::before {
  position: relative;
  top: 4px;
  left: -4px;
  vertical-align: middle;
  content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='22' width='22' style='forced-color-adjust: auto;'%3E%3Crect x='1' y='1' height='19' width='19' rx='3' stroke='%232e5f7a' stroke-width='1.75' fill-opacity='0' /%3E%3C/svg%3E");
}

[role="checkbox"][aria-checked="true"]::before {
  position: relative;
  top: 4px;
  content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='22' width='22' style='forced-color-adjust: auto;'%3E%3Crect x='1' y='1' height='19' width='19' rx='3' stroke='%232e5f7a' stroke-width='1.75' fill-opacity='0' /%3E%3Cpolyline points='5,11 9,15 16,6' fill='none' stroke='%232e5f7a' stroke-width='2.5' /%3E%3C/svg%3E");
}

[role="checkbox"]:focus,
[role="checkbox"]:focus-visible,
[role="checkbox"]:hover {
  border: 2px solid var(--dqu-interactive) !important;
  background-color: var(--dqu-interactive-light);
  outline: none !important;
}

[role="checkbox"]:hover {
  cursor: pointer;
}

.checkbox-container {
  border: 1px solid var(--dqu-border-secondary);
  width: 20%;
  border-radius: 8px;
}