RichTextEditor accessibility

WCAG 2.1 AA requirements

Semantics

• The editor area is a standard contentEditable element, which screen readers handle natively.
• The toolbar uses aria-label on each button for screen reader announcement.
• Toggle buttons (Bold, Italic, etc.) use aria-pressed to indicate active formatting state.

Focus management

• A 2px focus ring (focus-within:ring-2 ring-ring) appears around the entire editor container when any part receives focus.
• The border becomes transparent on focus to avoid visual doubling.
• Toolbar buttons are focusable and show focus-visible:ring-2.

Keyboard interaction

Markdown shortcuts (semi, full)

Toolbar

• Each toolbar button has a descriptive title attribute that doubles as a tooltip showing the keyboard shortcut.
• Buttons are grouped logically with visual separators (aria-hidden).
• The toolbar wraps (flex-wrap) at narrow widths so all buttons remain visible and accessible.

Read-only mode

• When readOnly is true, the toolbar is completely removed from the DOM (not just hidden).
• The editor container gets opacity-70 as a visual indicator.
• The content area is not editable — the Lexical editor's editable config is set to false.

Error boundary

• The built-in Lexical error boundary catches rendering errors and prevents the entire page from crashing.
• Errors are logged to the console for debugging.

Tables

• Table cells are navigable via arrow keys within the Lexical table plugin.
• Table structure uses semantic <table>, <tr>, <td> elements.

Check lists

• Check list items render as interactive checkboxes within the editor.
• Items use Lexical's built-in CheckListPlugin with proper checked/unchecked CSS classes.

Audit checklist

• Toolbar buttons announce their purpose via aria-label
• Active formatting states announced via aria-pressed
• Focus ring visible on keyboard navigation
• Keyboard shortcuts work (Ctrl+B, Ctrl+I, etc.)
• Tab/Shift+Tab indent/outdent works (semi, full)
• Markdown shortcuts convert on space (semi, full)
• Read-only mode removes toolbar from DOM
• Content is accessible to screen readers via contentEditable
• Table cells are navigable via keyboard
• 4.5:1 contrast on text and placeholder in both themes