09Keyboard-driven circular control — arrow keys step the dial for accessibility

<main class="stage">
<div class="ka is-demo" id="ka">
  <div class="ka__ring" id="kaRing">
    <div class="ka__handle"
      id="kaHandle"
      role="slider"
      tabindex="0"
      aria-label="Playback volume adjusted with arrow keys"
      aria-valuemin="0"
      aria-valuemax="100"
      aria-valuenow="40"
      aria-valuetext="40%"></div>
  </div>
  <p class="ka__hint">Adjust volume with ← →</p>
</div>
</main>

@use "../../../../site/static/demo-tokens" as *;

// 키보드 원형 슬라이더 — 계산 겹은 index.html 의 valueToDeg(값→각도)·stepPct(각도 한 걸음→퍼센트)에 있다.
// 여기는 트랙 호와 손잡이만 그리고 --deg 하나로 위치를 구동한다.

$duration: $dur-quick;
$easing: $ease-out;
$color: $subject-sky;

@include stage($stage-ink);

.ka { display: flex; flex-direction: column; align-items: center; gap: $sp-4; }

.ka__ring {
  position: relative;
  width: 180px;
  height: 180px;
  border-radius: 50%;
  background: conic-gradient(from -150deg, rgba($subject-cream, .16) 0deg 300deg, transparent 300deg 360deg);
}

.ka__handle {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: $color;
  box-shadow: $shadow-raised;
  cursor: pointer;
  transform: rotate(calc(var(--deg, -150) * 1deg)) translate(76px) rotate(calc(var(--deg, -150) * -1deg)) translate(-50%, -50%);
  transition: transform $duration $easing;
}
.ka__handle:focus-visible { outline: 3px solid $subject-cream; outline-offset: 2px; }

.ka__hint {
  margin: 0;
  color: $subject-cream;
  font-size: 11px;
  font-weight: 600;
  opacity: .78;
}

@media (max-width: 340px) {
  .ka__ring { width: 132px; height: 132px; }
  .ka__handle { transform: rotate(calc(var(--deg, -150) * 1deg)) translate(54px) rotate(calc(var(--deg, -150) * -1deg)) translate(-50%, -50%); }
}

@media (prefers-reduced-motion: reduce) {
  .ka__handle { transition: none; }
}

html, body {
  margin: 0;
  overflow: hidden;
}

.stage {
  box-sizing: border-box;
  min-height: 100vh;
  display: grid;
  place-items: center;
  margin: 0;
  background: #17141a;
  font-family: -apple-system, "Segoe UI", "Noto Sans KR", sans-serif;
  padding: clamp(8px, 4vw, 24px);
}

.ka {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}

.ka__ring {
  position: relative;
  width: 180px;
  height: 180px;
  border-radius: 50%;
  background: conic-gradient(from -150deg, rgba(255, 247, 230, 0.16) 0deg 300deg, transparent 300deg 360deg);
}

.ka__handle {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: #6ec8ff;
  box-shadow: 0 14px 24px rgba(23, 20, 26, 0.32);
  cursor: pointer;
  transform: rotate(calc(var(--deg, -150) * 1deg)) translate(76px) rotate(calc(var(--deg, -150) * -1deg)) translate(-50%, -50%);
  transition: transform 220ms ease-out;
}

.ka__handle:focus-visible {
  outline: 3px solid #fff7e6;
  outline-offset: 2px;
}

.ka__hint {
  margin: 0;
  color: #fff7e6;
  font-size: 11px;
  font-weight: 600;
  opacity: 0.78;
}

@media (max-width: 340px) {
  .ka__ring {
    width: 132px;
    height: 132px;
  }
  .ka__handle {
    transform: rotate(calc(var(--deg, -150) * 1deg)) translate(54px) rotate(calc(var(--deg, -150) * -1deg)) translate(-50%, -50%);
  }
}
@media (prefers-reduced-motion: reduce) {
  .ka__handle {
    transition: none;
  }
}

(function () {
  var STEP_DEG = 12;   // 화살표 키 한 번에 움직이는 각도 — 100% = 300deg 범위이므로 STEP_DEG 만큼이 값 한 걸음
  var RANGE_DEG = 300; // 슬라이더가 쓰는 전체 각도(위쪽 60deg 는 비움)
  var LOOP_MS = 2000;

  var reduce = window.matchMedia('(prefers-reduced-motion: reduce)').matches;
  var root = document.getElementById('ka');
  var handle = document.getElementById('kaHandle');
  var isDemo = true;
  var value = 40;   // 0~100

  function human() { if (isDemo) { root.classList.remove('is-demo'); isDemo = false; } }

  // 계산 겹: 값(%) 을 각도로 바꾼다. RANGE_DEG 범위 안에서 0%→시작각, 100%→끝각.
  function valueToDeg(v) {
    return -RANGE_DEG / 2 + (Math.min(100, Math.max(0, v)) / 100) * RANGE_DEG;
  }

  function apply() {
    handle.style.setProperty('--deg', valueToDeg(value));
    handle.setAttribute('aria-valuenow', String(Math.round(value)));
    handle.setAttribute('aria-valuetext', Math.round(value) + '%');
  }

  function setValue(v) { value = Math.min(100, Math.max(0, v)); apply(); }

  // 계산 겹: 키 입력 한 번 = STEP_DEG 만큼의 각도 = RANGE_DEG 대비 그 비율만큼의 퍼센트.
  var stepPct = (STEP_DEG / RANGE_DEG) * 100;

  handle.addEventListener('keydown', function (e) {
    if (e.key === 'ArrowRight' || e.key === 'ArrowUp') { e.preventDefault(); human(); setValue(value + stepPct); }
    else if (e.key === 'ArrowLeft' || e.key === 'ArrowDown') { e.preventDefault(); human(); setValue(value - stepPct); }
    else if (e.key === 'Home') { e.preventDefault(); human(); setValue(0); }
    else if (e.key === 'End') { e.preventDefault(); human(); setValue(100); }
  });
  handle.addEventListener('pointerdown', function () { human(); handle.focus({ preventScroll: true }); });

  // 자동 루프: 화살표 키를 누른 것과 똑같이 stepPct 만큼씩 값을 올렸다 끝에서 되돌린다.
  var dir = 1;
  var acc = 0;
  function loop(ts) {
    if (isDemo && !reduce) {
      acc += 16.7;
      if (acc >= LOOP_MS / 12) {
        acc = 0;
        value += dir * stepPct;
        if (value >= 100) { value = 100; dir = -1; }
        if (value <= 0) { value = 0; dir = 1; }
        apply();
      }
    } else if (isDemo && reduce) {
      value = 40;
      apply();
    }
    requestAnimationFrame(loop);
  }
  apply();
  requestAnimationFrame(loop);
})();

// KeyboardArcSlider — vanilla 판(run/374/demo/09-arc-keyboard-a11y/index.html) 의 React 포트.
// 계산 겹: valueToDeg(값→각도)와 stepPct(화살표 키 한 걸음의 각도를 퍼센트로 환산). 실제 role="slider" +
// aria-valuenow 를 쓰고 화살표 키가 진짜로 값을 움직인다.
import { useEffect, useRef, useState } from "react";
import styles from "./KeyboardArcSlider.module.scss";

type Box<T> = { current: T };

const STEP_DEG = 12;
const RANGE_DEG = 300;
const LOOP_MS = 2000;

export default function KeyboardArcSlider() {
  const rootRef = useRef(null) as unknown as Box<HTMLDivElement>;
  const handleRef = useRef(null) as unknown as Box<HTMLDivElement>;
  const rafRef = useRef(0) as unknown as Box<number>;
  const [value, setValueState] = useState(40);

  useEffect(() => {
    const reduce = window.matchMedia("(prefers-reduced-motion: reduce)").matches;
    const root = rootRef.current;
    const handle = handleRef.current;
    if (!root || !handle) return;

    let isDemo = true;
    let value = 40;

    function human() { if (isDemo) { root!.classList.remove(styles.isDemo); isDemo = false; } }

    function valueToDeg(v: number) {
      return -RANGE_DEG / 2 + (Math.min(100, Math.max(0, v)) / 100) * RANGE_DEG;
    }

    function apply() {
      handle!.style.setProperty("--deg", String(valueToDeg(value)));
      handle!.setAttribute("aria-valuenow", String(Math.round(value)));
      handle!.setAttribute("aria-valuetext", Math.round(value) + "%");
      setValueState(Math.round(value));
    }

    function setValue(v: number) { value = Math.min(100, Math.max(0, v)); apply(); }

    const stepPct = (STEP_DEG / RANGE_DEG) * 100;

    function onKeydown(e: KeyboardEvent) {
      if (e.key === "ArrowRight" || e.key === "ArrowUp") { e.preventDefault(); human(); setValue(value + stepPct); }
      else if (e.key === "ArrowLeft" || e.key === "ArrowDown") { e.preventDefault(); human(); setValue(value - stepPct); }
      else if (e.key === "Home") { e.preventDefault(); human(); setValue(0); }
      else if (e.key === "End") { e.preventDefault(); human(); setValue(100); }
    }
    function onDown() { human(); handle!.focus({ preventScroll: true }); }
    handle.addEventListener("keydown", onKeydown);
    handle.addEventListener("pointerdown", onDown);

    let dir = 1;
    let acc = 0;
    function loop(ts: number) {
      if (isDemo && !reduce) {
        acc += 16.7;
        if (acc >= LOOP_MS / 12) {
          acc = 0;
          value += dir * stepPct;
          if (value >= 100) { value = 100; dir = -1; }
          if (value <= 0) { value = 0; dir = 1; }
          apply();
        }
      } else if (isDemo && reduce) {
        value = 40;
        apply();
      }
      rafRef.current = requestAnimationFrame(loop);
    }
    apply();
    rafRef.current = requestAnimationFrame(loop);

    return () => {
      handle.removeEventListener("keydown", onKeydown);
      handle.removeEventListener("pointerdown", onDown);
      cancelAnimationFrame(rafRef.current);
    };
  }, []);

  return (
    <main className={styles.stage}>
      <div className={styles.ka + " " + styles.isDemo} ref={rootRef}>
        <div className={styles.ring}>
          <div
            className={styles.handle}
            ref={handleRef}
            role="slider"
            tabIndex={0}
            aria-label="화살표 키로 조절하는 재생 볼륨"
            aria-valuemin={0}
            aria-valuemax={100}
            aria-valuenow={value}
            aria-valuetext={value + "%"}
          />
        </div>
        <p className={styles.hint}>← → 로 볼륨 조절</p>
      </div>
    </main>
  );
}