aria-multiselectable

<!-- Multi-select listbox -->
<label id="langs-label">Select programming languages:</label>
<ul 
  role="listbox" 
  aria-labelledby="langs-label"
  aria-multiselectable="true"
  tabindex="0"
>
  <li role="option" aria-selected="true">JavaScript</li>
  <li role="option" aria-selected="true">TypeScript</li>
  <li role="option" aria-selected="false">Python</li>
  <li role="option" aria-selected="false">Go</li>
  <li role="option" aria-selected="true">Rust</li>
</ul>

<!-- Screen reader: "Select programming languages, listbox, multi-selectable" -->
<!-- Per option: "JavaScript, selected, 1 of 5" -->

<!-- Comparison: Single vs Multi-select -->

<!-- SINGLE SELECT (default behavior) -->
<ul role="listbox" aria-label="Choose one country">
  <!-- aria-multiselectable is absent or "false" -->
  <li role="option" aria-selected="false">USA</li>
  <li role="option" aria-selected="true">Canada</li>
  <li role="option" aria-selected="false">UK</li>
</ul>
<!-- Only ONE option can be selected at a time -->

<!-- MULTI-SELECT -->
<ul 
  role="listbox" 
  aria-label="Select countries to visit"
  aria-multiselectable="true"
>
  <li role="option" aria-selected="true">USA</li>
  <li role="option" aria-selected="true">Canada</li>
  <li role="option" aria-selected="false">UK</li>
</ul>
<!-- MULTIPLE options can be selected -->

<!-- Multi-select grid (like spreadsheet cells) -->
<table 
  role="grid" 
  aria-label="Data spreadsheet"
  aria-multiselectable="true"
>
  <thead>
    <tr>
      <th role="columnheader">Name</th>
      <th role="columnheader">Email</th>
      <th role="columnheader">Role</th>
    </tr>
  </thead>
  <tbody>
    <tr role="row" aria-selected="true">
      <td role="gridcell">John Doe</td>
      <td role="gridcell">john@example.com</td>
      <td role="gridcell">Admin</td>
    </tr>
    <tr role="row" aria-selected="true">
      <td role="gridcell">Jane Smith</td>
      <td role="gridcell">jane@example.com</td>
      <td role="gridcell">User</td>
    </tr>
    <tr role="row" aria-selected="false">
      <td role="gridcell">Bob Wilson</td>
      <td role="gridcell">bob@example.com</td>
      <td role="gridcell">User</td>
    </tr>
  </tbody>
</table>

<!-- Use aria-selected on rows for row selection -->
<!-- Use aria-selected on cells for cell selection -->

<!-- Multi-select tree (file browser) -->
<ul 
  role="tree" 
  aria-label="File browser"
  aria-multiselectable="true"
>
  <li 
    role="treeitem" 
    aria-selected="false"
    aria-expanded="true"
  >
    📁 Documents
    <ul role="group">
      <li role="treeitem" aria-selected="true">📄 report.pdf</li>
      <li role="treeitem" aria-selected="true">📄 notes.txt</li>
      <li role="treeitem" aria-selected="false">📄 todo.md</li>
    </ul>
  </li>
  <li 
    role="treeitem" 
    aria-selected="false"
    aria-expanded="false"
  >
    📁 Images
  </li>
</ul>

<!-- Shift+Click for range selection -->
<!-- Ctrl/Cmd+Click for individual toggle -->

// React Multi-select Listbox
import { useState, useCallback } from 'react';

function MultiSelectListbox({ 
  items, 
  label, 
  onChange,
  initialSelected = []
}) {
  const [selected, setSelected] = useState(new Set(initialSelected));
  const [activeIndex, setActiveIndex] = useState(0);

  const toggleSelection = useCallback((itemId, shiftKey) => {
    setSelected(prev => {
      const newSelected = new Set(prev);
      if (shiftKey && prev.size > 0) {
        // Range selection with Shift
        // Implementation depends on use case
      } else {
        // Toggle single item
        if (newSelected.has(itemId)) {
          newSelected.delete(itemId);
        } else {
          newSelected.add(itemId);
        }
      }
      onChange?.(Array.from(newSelected));
      return newSelected;
    });
  }, [onChange]);

  const selectAll = () => {
    const allIds = items.map(i => i.id);
    setSelected(new Set(allIds));
    onChange?.(allIds);
  };

  const clearAll = () => {
    setSelected(new Set());
    onChange?.([]);
  };

  const handleKeyDown = (e, index) => {
    switch (e.key) {
      case 'ArrowDown':
        e.preventDefault();
        setActiveIndex(Math.min(index + 1, items.length - 1));
        break;
      case 'ArrowUp':
        e.preventDefault();
        setActiveIndex(Math.max(index - 1, 0));
        break;
      case ' ':
        e.preventDefault();
        toggleSelection(items[index].id, e.shiftKey);
        break;
      case 'a':
        if (e.ctrlKey || e.metaKey) {
          e.preventDefault();
          selectAll();
        }
        break;
    }
  };

  return (
    <div className="multi-select">
      <div className="controls">
        <button onClick={selectAll}>Select All</button>
        <button onClick={clearAll}>Clear All</button>
        <span>{selected.size} of {items.length} selected</span>
      </div>
      
      <label id="listbox-label">{label}</label>
      <ul
        role="listbox"
        aria-labelledby="listbox-label"
        aria-multiselectable="true"
        tabIndex={0}
      >
        {items.map((item, index) => (
          <li
            key={item.id}
            role="option"
            aria-selected={selected.has(item.id)}
            tabIndex={index === activeIndex ? 0 : -1}
            onClick={(e) => toggleSelection(item.id, e.shiftKey)}
            onKeyDown={(e) => handleKeyDown(e, index)}
            className={selected.has(item.id) ? 'selected' : ''}
          >
            <span className="checkbox">
              {selected.has(item.id) ? '☑' : '☐'}
            </span>
            {item.label}
          </li>
        ))}
      </ul>
      
      {/* Announce selection changes */}
      <div role="status" aria-live="polite" className="sr-only">
        {selected.size} items selected
      </div>
    </div>
  );
}

// Usage
function App() {
  const languages = [
    { id: 'js', label: 'JavaScript' },
    { id: 'ts', label: 'TypeScript' },
    { id: 'py', label: 'Python' },
    { id: 'go', label: 'Go' },
    { id: 'rust', label: 'Rust' },
  ];

  return (
    <MultiSelectListbox
      items={languages}
      label="Select your favorite languages"
      initialSelected={['js', 'ts']}
      onChange={(selected) => console.log('Selected:', selected)}
    />
  );
}