import { useState } from "react";

function ToggleButton() {
  const [isOn, setIsOn] = useState(false);

  return (
    <div
      role="switch"
      aria-checked={isOn}
      tabIndex={0}
      onClick={() => setIsOn(!isOn)}
      onKeyDown={(e) => {
        if (e.key === "Enter" || e.key === " ") {
          e.preventDefault();
          setIsOn(!isOn);
        }
      }}
      style={{
        display: "inline-block",
        padding: "10px 20px",
        background: isOn ? "#4caf50" : "#ccc",
        borderRadius: "20px",
        cursor: "pointer",
        userSelect: "none",
      }}
    >
      {isOn ? "ON" : "OFF"}
    </div>
  );
}

import { useState, useRef, useEffect } from "react";

const options = ["Apple", "Banana", "Cherry"];

function Dropdown() {
  const [isOpen, setIsOpen] = useState(false);
  const [selected, setSelected] = useState(null);
  const [highlightedIndex, setHighlightedIndex] = useState(0);
  const dropdownRef = useRef(null);

  useEffect(() => {
    if (isOpen && dropdownRef.current) dropdownRef.current.focus();
  }, [isOpen]);

  const handleKeyDown = (e) => {
    if (!isOpen && (e.key === "Enter" || e.key === " ")) {
      e.preventDefault();
      setIsOpen(true);
      return;
    }

    if (isOpen) {
      switch (e.key) {
        case "ArrowDown":
          e.preventDefault();
          setHighlightedIndex((i) => (i + 1) % options.length);
          break;
        case "ArrowUp":
          e.preventDefault();
          setHighlightedIndex((i) => (i - 1 + options.length) % options.length);
          break;
        case "Enter":
          e.preventDefault();
          setSelected(options[highlightedIndex]);
          setIsOpen(false);
          break;
        case "Escape":
          setIsOpen(false);
          break;
        default:
          break;
      }
    }
  };

  return (
    <div>
      <div
        role="button"
        aria-haspopup="listbox"
        aria-expanded={isOpen}
        aria-controls="dropdown-list"
        tabIndex={0}
        onClick={() => setIsOpen((o) => !o)}
        onKeyDown={handleKeyDown}
        style={{
          padding: "10px",
          background: "#eee",
          border: "1px solid #ccc",
          width: "200px",
          cursor: "pointer",
        }}
      >
        {selected || "Select an option"}
      </div>
      {isOpen && (
        <ul
          id="dropdown-list"
          role="listbox"
          ref={dropdownRef}
          tabIndex={-1}
          style={{
            listStyle: "none",
            margin: 0,
            padding: 0,
            border: "1px solid #ccc",
            background: "white",
          }}
        >
          {options.map((opt, i) => (
            <li
              key={opt}
              role="option"
              aria-selected={highlightedIndex === i}
              onClick={() => {
                setSelected(opt);
                setIsOpen(false);
              }}
              style={{
                padding: "10px",
                background: highlightedIndex === i ? "#007bff" : "white",
                color: highlightedIndex === i ? "white" : "black",
              }}
            >
              {opt}
            </li>
          ))}
        </ul>
      )}
    </div>
  );
}

<input type="text" aria-label="Tên người dùng" />

<span id="label1">Tên đăng nhập</span>
<input type="text" aria-labelledby="label1" />