Demo 1: Todo List (Aria Toggles)

TL;DR

Add an aria-toggle to an item and specify which aria attribute should be toggled. Additionally specify aria-toggleStates and a comma delimited list of states, and toggle will cycle through the states. Provide a default state by providing it as the aria-label on page load.

Demo (by Adam Argyle)

write an explainer
draft a specification
create a polyfill
make a demo page

Source

HTML

<ul class="todo">
    <li 
      aria-label="pending"
      aria-toggle="label" 
      aria-toggleStates="pending,done,cancel"
    >
      write an explainer 
    </li>
    <li 
      aria-label="pending"
      aria-toggle="label" 
      aria-toggleStates="pending,done,cancel"
    >
      draft a specification
    </li>
    <li 
      aria-label="cancel"
      aria-toggle="label" 
      aria-toggleStates="pending,done,cancel"
    >
      create a polyfill
    </li>
    <li 
      aria-label="done"
      aria-toggle="label" 
      aria-toggleStates="pending,done,cancel"
    >
      make a demo page
    </li>
</ul>

CSS

@layer demo.list {
  .todo li {
    cursor: pointer;
  }
  
  .todo li[aria-label="cancel"] {
    list-style-type: '❌';
  }
  
  .todo li[aria-label="done"] {
    list-style-type: '✅';
  }
}