Reorderable list with move buttons

<!doctype html>
<!--
MIT License

Copyright (c) 2026 MRHTML

Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.
-->
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta
      http-equiv="Content-Security-Policy"
      content="default-src 'none'; style-src 'unsafe-inline'; script-src 'unsafe-inline'; img-src data: blob:; connect-src 'none'; form-action 'none'; object-src 'none'; base-uri 'none'"
    />
    <title>MRHTML | Put the next step first.</title>
    <style>
      :root {
        font-family: Arial, Helvetica, sans-serif;
        color-scheme: light;
        --ink: #192f34;
        --muted: #56666a;
        --paper: #f6f5f0;
        --line: #cdd5d0;
        --accent: #186354;
        --soft: #e7efe5;
        --mono: Consolas, 'Liberation Mono', monospace;
      }
      * {
        box-sizing: border-box;
      }
      html {
        scroll-padding-top: 90px;
      }
      body {
        margin: 0;
        background: var(--paper);
        color: var(--ink);
        line-height: 1.6;
      }
      h1,
      h2,
      h3,
      p {
        margin: 0;
      }
      h1,
      h2,
      h3 {
        font-weight: 500;
        letter-spacing: -0.045em;
        line-height: 1.1;
      }
      h1 {
        font-size: clamp(38px, 5.5vw, 65px);
      }
      h2 {
        font-size: 29px;
      }
      h3 {
        font-size: 21px;
      }
      p {
        overflow-wrap: anywhere;
      }
      a {
        color: var(--accent);
        text-underline-offset: 4px;
      }
      button,
      select {
        font: inherit;
        color: inherit;
      }
      button {
        cursor: pointer;
      }
      button,
      a,
      summary {
        touch-action: manipulation;
      }
      button:focus-visible,
      a:focus-visible,
      select:focus-visible,
      [tabindex]:focus-visible,
      summary:focus-visible {
        outline: 3px solid #a94823;
        outline-offset: 4px;
      }
      [hidden] {
        display: none !important;
      }
      .wrap {
        width: min(1050px, calc(100% - 64px));
        margin-inline: auto;
      }
      .header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 20px;
        padding: 28px 0;
        border-bottom: 1px solid var(--line);
      }
      .brand {
        font-size: 15px;
        font-weight: 700;
        display: flex;
        align-items: center;
        gap: 10px;
        letter-spacing: -0.5px;
      }
      .mark {
        display: grid;
        place-items: center;
        width: 28px;
        height: 28px;
        background: var(--accent);
        color: #fff;
        font-weight: bold;
        font-size: 18px;
      }
      .header > p,
      .eyebrow,
      .small {
        font: 10px/1.7 var(--mono);
        letter-spacing: 0.03em;
      }
      .header > p {
        color: var(--muted);
      }
      main {
        padding-block: 43px 50px;
      }
      .intro {
        margin-bottom: 30px;
        max-width: 720px;
      }
      .eyebrow {
        color: var(--accent);
        margin-bottom: 13px;
      }
      .intro > p:last-child {
        font-size: 15px;
        max-width: 570px;
        color: var(--muted);
        margin-top: 18px;
      }
      .surface {
        background: #fff;
        border: 1px solid var(--line);
        border-radius: 14px;
        box-shadow: 0 12px 32px #263e3010;
      }
      .button {
        border: 1px solid var(--accent);
        background: var(--accent);
        color: #fff;
        padding: 10px 16px;
        min-height: 43px;
        border-radius: 7px;
        font-size: 13px;
        font-weight: 600;
      }
      .button.secondary {
        background: #fff;
        color: var(--accent);
        border-color: #a9bbb0;
      }
      .button[aria-disabled='true'],
      button:disabled {
        background: #edf0e9;
        color: #5d695f;
        border-color: #c9d1c4;
        cursor: default;
      }
      .status {
        font-size: 12px;
        color: var(--muted);
        min-height: 22px;
      }
      .note {
        font-size: 12px;
        color: var(--muted);
        margin-top: 20px;
        max-width: 75ch;
      }
      .footer {
        display: flex;
        justify-content: space-between;
        gap: 20px;
        padding-block: 22px;
        border-top: 1px solid var(--line);
        font-size: 10px;
        color: var(--muted);
      }
      .sr-only {
        position: absolute;
        width: 1px;
        height: 1px;
        padding: 0;
        margin: -1px;
        overflow: hidden;
        clip: rect(0, 0, 0, 0);
        white-space: nowrap;
        border: 0;
      }
      noscript p {
        padding: 15px;
        background: #e8ece2;
        border-left: 3px solid var(--accent);
        font-size: 13px;
        margin-bottom: 20px;
      }
      code,
      kbd {
        font: 12px var(--mono);
      }
      kbd {
        border: 1px solid #bcc7bd;
        border-radius: 4px;
        padding: 2px 5px;
        background: #fff;
      }
      button:disabled:focus {
        outline: none;
      }
      @media (max-width: 600px) {
        .wrap {
          width: calc(100% - 36px);
        }
        .header {
          padding-block: 22px;
        }
        .header > p {
          font-size: 8px;
          max-width: 105px;
          text-align: right;
        }
        .brand {
          font-size: 13px;
          gap: 8px;
        }
        main {
          padding-block: 30px 35px;
        }
        .intro {
          margin-bottom: 26px;
        }
        .intro > p:last-child {
          font-size: 14px;
        }
        .eyebrow {
          font-size: 9px;
        }
        h1 {
          font-size: 40px;
        }
        .footer {
          flex-wrap: wrap;
          font-size: 9px;
        }
      }
      @media (max-width: 350px) {
        h1 {
          font-size: 35px;
        }
        .button {
          padding: 10px 12px;
          font-size: 12px;
        }
      }
      @media (prefers-reduced-motion: reduce) {
        *,
        *::before,
        *::after {
          animation: none !important;
          transition: none !important;
          scroll-behavior: auto !important;
        }
      }

      .list-heading {
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 25px;
        padding-bottom: 23px;
      }
      .list-heading h2 {
        font-size: 25px;
      }
      .task-list {
        list-style: none;
        padding: 0;
        margin: 0 0 22px;
        border: 1px solid var(--line);
        border-radius: 12px;
        background: #fff;
        overflow: hidden;
      }
      .task-list li {
        display: flex;
        align-items: center;
        gap: 24px;
        padding: 25px;
        border-bottom: 1px solid var(--line);
      }
      .task-list li:last-child {
        border-bottom: 0;
      }
      .position {
        font: 15px var(--mono);
        color: #44683d;
        background: #e8eedf;
        border-radius: 7px;
        min-width: 43px;
        height: 47px;
        display: grid;
        place-items: center;
      }
      .task-copy {
        flex: 1;
        min-width: 0;
      }
      .task-copy h2 {
        font-size: 23px;
      }
      .task-copy p {
        font-size: 12px;
        color: var(--muted);
        margin-top: 9px;
      }
      .moves {
        display: flex;
        gap: 7px;
      }
      .moves button {
        display: flex;
        align-items: center;
        gap: 6px;
        min-height: 42px;
        border: 1px solid #a6b8a8;
        border-radius: 6px;
        background: #f8faf4;
        padding: 9px 12px;
        color: #2f5636;
        font-size: 13px;
      }
      .moves button[aria-disabled='true'] {
        color: #657060;
        background: #f1f3ed;
        border-color: #ced6c6;
      }
      .moves button:focus-visible {
        outline-offset: -4px;
      }
      .moves button span {
        font-size: 11px;
      }
      @media (max-width: 600px) {
        .list-heading {
          align-items: flex-start;
          gap: 20px;
        }
        .list-heading h2 {
          font-size: 23px;
          max-width: 160px;
        }
        .list-heading .button {
          font-size: 11px;
          white-space: nowrap;
        }
        .task-list li {
          display: grid;
          grid-template-columns: 33px minmax(0, 1fr);
          align-items: start;
          padding: 21px 18px;
          gap: 13px;
        }
        .position {
          min-width: 33px;
          height: 38px;
          font-size: 12px;
        }
        .task-copy h2 {
          font-size: 21px;
        }
        .task-copy p {
          font-size: 12px;
        }
        .moves {
          grid-column: 2;
          margin-left: 0;
        }
        .moves button {
          padding-inline: 14px;
        }
        .moves button span {
          font-size: 12px;
        }
      }
    </style>
  </head>
  <body>
    <header class="header wrap">
      <span class="brand"
        ><span class="mark" aria-hidden="true">m.</span>MRHTML / Workshop</span
      >
      <p>SMALL PATTERNS.<br />CONSIDERED DETAILS.</p>
    </header>
    <main class="wrap">
      <div class="intro">
        <p class="eyebrow">07 / BUTTON-DRIVEN REORDERING</p>
        <h1>Put the next step first.</h1>
        <p>
          Arrange this fictional project checklist with simple move buttons. The
          order changes in this document, with focus staying on the control you
          used.
        </p>
      </div>
      <noscript
        ><p>
          The original ordered checklist remains readable. JavaScript enables
          the move and reset buttons.
        </p></noscript
      >
      <div class="list-heading">
        <h2>A useful working order</h2>
        <button type="button" id="reset-order" class="button secondary" hidden>
          Reset order
        </button>
      </div>
      <ol class="task-list" id="task-list">
        <li data-name="Frame the question">
          <span class="position" aria-hidden="true">01</span>
          <div class="task-copy">
            <h2>Frame the question</h2>
            <p>Name one uncertainty worth resolving.</p>
          </div>
          <div class="moves" hidden>
            <button
              type="button"
              data-move="up"
              aria-label="Move frame the question up"
            >
              ↑ <span>Up</span></button
            ><button
              type="button"
              data-move="down"
              aria-label="Move frame the question down"
            >
              ↓ <span>Down</span>
            </button>
          </div>
        </li>
        <li data-name="Sketch a direction">
          <span class="position" aria-hidden="true">02</span>
          <div class="task-copy">
            <h2>Sketch a direction</h2>
            <p>Make a rough, readable version.</p>
          </div>
          <div class="moves" hidden>
            <button
              type="button"
              data-move="up"
              aria-label="Move sketch a direction up"
            >
              ↑ <span>Up</span></button
            ><button
              type="button"
              data-move="down"
              aria-label="Move sketch a direction down"
            >
              ↓ <span>Down</span>
            </button>
          </div>
        </li>
        <li data-name="Test the awkward state">
          <span class="position" aria-hidden="true">03</span>
          <div class="task-copy">
            <h2>Test the awkward state</h2>
            <p>Try a missing value or failed action.</p>
          </div>
          <div class="moves" hidden>
            <button
              type="button"
              data-move="up"
              aria-label="Move test the awkward state up"
            >
              ↑ <span>Up</span></button
            ><button
              type="button"
              data-move="down"
              aria-label="Move test the awkward state down"
            >
              ↓ <span>Down</span>
            </button>
          </div>
        </li>
        <li data-name="Write the handoff">
          <span class="position" aria-hidden="true">04</span>
          <div class="task-copy">
            <h2>Write the handoff</h2>
            <p>Keep the reason beside the decision.</p>
          </div>
          <div class="moves" hidden>
            <button
              type="button"
              data-move="up"
              aria-label="Move write the handoff up"
            >
              ↑ <span>Up</span></button
            ><button
              type="button"
              data-move="down"
              aria-label="Move write the handoff down"
            >
              ↓ <span>Down</span>
            </button>
          </div>
        </li>
      </ol>
      <p
        class="status"
        id="order-status"
        role="status"
        aria-live="polite"
        aria-atomic="true"
      >
        Four steps in their original order.
      </p>
      <p class="note">
        Use Tab to choose a move button, then Enter or Space to reorder.
        Boundary buttons remain focusable and explain when an item cannot move
        further. Nothing is saved between visits.
      </p>
    </main>
    <footer class="footer wrap">
      <span>MRHTML / Original runnable example</span
      ><span>Local content. No network required.</span>
    </footer>
    <script>
      (() => {
        'use strict';

        const list = document.querySelector('#task-list'),
          original = [...list.children],
          status = document.querySelector('#order-status');
        function update() {
          const items = [...list.children];
          items.forEach((item, index) => {
            item.querySelector('.position').textContent = String(
              index + 1,
            ).padStart(2, '0');
            item
              .querySelector('[data-move="up"]')
              .setAttribute('aria-disabled', String(index === 0));
            item
              .querySelector('[data-move="down"]')
              .setAttribute(
                'aria-disabled',
                String(index === items.length - 1),
              );
          });
        }
        list.addEventListener('click', (event) => {
          const button = event.target.closest('[data-move]');
          if (!button || !list.contains(button)) return;
          const item = button.closest('li'),
            items = [...list.children],
            index = items.indexOf(item),
            up = button.dataset.move === 'up';
          if ((up && index === 0) || (!up && index === items.length - 1)) {
            status.textContent = `${item.dataset.name} is already ${up ? 'first' : 'last'}.`;
            return;
          }
          if (up) list.insertBefore(item, items[index - 1]);
          else list.insertBefore(items[index + 1], item);
          update();
          button.focus();
          const position = [...list.children].indexOf(item) + 1;
          status.textContent = `${item.dataset.name} moved to position ${position} of ${items.length}.`;
        });
        document.querySelector('#reset-order').addEventListener('click', () => {
          original.forEach((item) => list.append(item));
          update();
          status.textContent = 'Original order restored. Four steps.';
        });
        update();
        document.querySelectorAll('.moves').forEach((control) => {
          control.hidden = false;
        });
        document.querySelector('#reset-order').hidden = false;
      })();
    </script>
  </body>
</html>