aria-placeholder

<!-- Basic aria-placeholder usage -->

<!-- Custom combobox with placeholder -->
<div 
  role="combobox"
  aria-placeholder="Type to search..."
  aria-expanded="false"
  aria-haspopup="listbox"
  aria-labelledby="search-label"
  contenteditable="true"
  tabindex="0"
>
  <!-- Empty - shows placeholder -->
</div>

<!-- Custom textbox with placeholder -->
<div 
  role="textbox"
  aria-placeholder="Enter your message here"
  aria-multiline="true"
  contenteditable="true"
  tabindex="0"
>
</div>

<!-- Screen reader announcement: "Search, combobox, collapsed, Type to search..." -->

<!-- aria-placeholder vs HTML placeholder attribute -->

<!-- HTML placeholder (for native inputs) -->
<input 
  type="text" 
  placeholder="Enter your name"
  aria-label="Full name"
/>
<!--
  • Native browser support
  • Automatically announced by screen readers
  • Works only on <input> and <textarea>
  • No aria-placeholder needed!
-->

<!-- aria-placeholder (for custom widgets) -->
<div 
  role="textbox"
  aria-placeholder="Enter your name"
  aria-label="Full name"
  contenteditable="true"
  tabindex="0"
>
</div>
<!--
  • For ARIA widgets only
  • Provides placeholder hint to AT
  • Used with contenteditable elements
  • Required for custom input widgets
-->

<!-- WARNING: Don't use both together on native inputs -->
<input 
  type="text" 
  placeholder="Enter name"
  aria-placeholder="Enter name"  <!-- Redundant! -->
/>

<!-- Custom search combobox with placeholder -->
<div class="custom-search" role="search">
  <label id="search-label" for="search-input">Search Products</label>
  
  <div 
    id="search-input"
    role="combobox"
    aria-placeholder="Search by name, SKU, or category..."
    aria-expanded="false"
    aria-autocomplete="list"
    aria-haspopup="listbox"
    aria-controls="search-results"
    aria-labelledby="search-label"
    contenteditable="true"
    tabindex="0"
  ></div>
  
  <ul 
    id="search-results" 
    role="listbox" 
    aria-label="Search suggestions"
    hidden
  >
    <!-- Results populated dynamically -->
  </ul>
</div>

<style>
  /* Show placeholder when empty */
  [role="combobox"]:empty::before {
    content: attr(aria-placeholder);
    color: #9ca3af;
    pointer-events: none;
  }
</style>

<!-- Important: Placeholders are NOT labels! -->

<!-- BAD: Using placeholder as the only label -->
<div 
  role="textbox"
  aria-placeholder="Email address"  <!-- Not sufficient! -->
  contenteditable="true"
>
</div>

<!-- GOOD: Using proper label + placeholder -->
<label id="email-label">Email Address</label>
<div 
  role="textbox"
  aria-labelledby="email-label"
  aria-placeholder="name@example.com"
  aria-required="true"
  contenteditable="true"
>
</div>

<!-- Remember: -->
<!-- • Placeholders disappear when user types -->
<!-- • Some users don't see placeholders at all -->
<!-- • Labels are persistent and always visible -->
<!-- • Use placeholder for FORMAT hints, not instructions -->

// React Custom Textbox with aria-placeholder
import { useState, useRef, useEffect } from 'react';

function CustomTextbox({ 
  label, 
  placeholder, 
  onChange, 
  value,
  id,
  ...props 
}) {
  const textboxRef = useRef(null);
  const [isEmpty, setIsEmpty] = useState(!value);

  useEffect(() => {
    // Keep contenteditable in sync with value prop
    if (textboxRef.current && textboxRef.current.textContent !== value) {
      textboxRef.current.textContent = value || '';
    }
    setIsEmpty(!value);
  }, [value]);

  const handleInput = (e) => {
    const newValue = e.target.textContent;
    setIsEmpty(!newValue);
    onChange?.(newValue);
  };

  return (
    <div className="form-field">
      <label id={`${id}-label`} htmlFor={id}>
        {label}
      </label>
      <div
        ref={textboxRef}
        id={id}
        role="textbox"
        aria-labelledby={`${id}-label`}
        aria-placeholder={placeholder}
        contentEditable
        tabIndex={0}
        onInput={handleInput}
        className={`custom-textbox ${isEmpty ? 'empty' : ''}`}
        {...props}
      />
      <style>{`
        .custom-textbox {
          min-height: 40px;
          padding: 8px 12px;
          border: 1px solid #d1d5db;
          border-radius: 6px;
          outline: none;
        }
        .custom-textbox:focus {
          border-color: #6366f1;
          box-shadow: 0 0 0 2px rgba(99, 102, 241, 0.2);
        }
        .custom-textbox.empty::before {
          content: attr(aria-placeholder);
          color: #9ca3af;
          pointer-events: none;
        }
      `}</style>
    </div>
  );
}

// Usage
function SearchForm() {
  const [query, setQuery] = useState('');
  
  return (
    <CustomTextbox
      id="search"
      label="Search"
      placeholder="Type to search products..."
      value={query}
      onChange={setQuery}
    />
  );
}