RichTextField

The editing area is a TipTap contenteditable with role=textbox, aria-multiline, named by the visible <label> (aria-labelledby) or aria-label / aria-labelledby, aria-describedby the message line (helper, error or field message) merged with the consumer's, aria-required, aria-invalid, aria-readonly (readOnly, generating), aria-disabled, aria-busy while generating, aria-placeholder; the visual placeholder is a CSS copy only. The toolbar is a WAI-ARIA toolbar (role=toolbar, named "{label} formatting", aria-controls the editing area) with ONE tab stop and roving focus (Left/Right wrap, Home/End), shared with MarkdownField (src/lib/toolbar.ts, RFC §9 Q17). Toggles carry aria-pressed; dropdown triggers are Menu triggers (aria-haspopup=menu, aria-expanded); panel triggers carry aria-haspopup=dialog and aria-expanded. While disabled every tool is aria-disabled, fullscreen included; read-only or generating, every tool but fullscreen. Inert tools are painted --icon-disabled and kept in the roving order; when the toolbar wraps, the roving order stays the one-line reading order (formatting tools first, then the group shown above them on the right); in Source HTML the formatting tools are, undo, redo, Source HTML, Ask AI and fullscreen stay live. Menus are the library Menu (current value marked selected: check icon + aria-current); More nests submenus. Panels are one non-modal Radix Popover (role=dialog, named Add link / Edit link / Add image / Image options / Table / the colour name), portalled with z-[var(--fds-z-overlay,50)] on layer 1, holding the library Paper, Input, Button, Tabs and Checkbox; the colour panels are the ColorPicker's own panel body (area, hue slider, format and HEX inputs — shared, not copied) plus a Reset color IconButton (Figma hasReset); focus moves into the panel, Escape or Cancel closes it and returns focus to the control that opened it. Link URLs accept http, https and mailto only (javascript: and data: refused with a field error). Empty alt text is kept as alt="" (decorative). The table size picker is one button: arrows change the size, Enter inserts; the size (rows x columns) is a polite live text. Inside a table the table button opens the table operations menu, so they are keyboard-reachable; a right click or the context menu key inside a table opens the same menu at the pointer or the caret (outside a table the browser's menu is left alone). Hovering an image tints it (aria-hidden, decorative) and shows an IconButton named Image options (aria-haspopup=dialog) that selects the image and opens its options panel — a pointer shortcut: selecting the image and pressing the toolbar's Image button reaches the same panel from the keyboard. The image-hover pair is computed with the tint over the page surface, not over the image, whose pixels no gate can know. Font family items are named in their own face (the text stays the family's name). Source HTML is indented one block per line; the whitespace it adds between blocks is not content and is not reported as removed HTML. Fullscreen is the library Dialog over the whole viewport (modal, focus trapped, Escape closes, focus returns to the expand button), titled by the label, on bg-gradient-default — the title is declared against both stops. Status lines (unsaved changes, generating) are role=status regions mounted before their text. USER-CHOSEN COLOURS ARE OUTSIDE THE CONTRAST GATE: text, background and highlight colours picked in the ColorPicker are content, not tokens, and no pair here declares them compliant (RFC §5.3, §9 Q12). Table cell borders, the table grid's unselected cells and the drag cut-out are decorative (the size is conveyed by text). Tab inside the editing area keeps TipTap's list behaviour (indent within a list item) and otherwise leaves the field. Ratios are computed by pnpm check:contrast from theme.css.