Accessibility: Built In, Not Bolted On
Both embeds are built to WCAG 2.2 AA: keyboard operable, screen-reader friendly, with dialog semantics, focus management, and live-region announcements. What that gives you, and what stays yours.
Accessibility lives in the embed here, so you inherit it. Both the thumbs embed and the quests embed are built to WCAG 2.2 Level AA: real controls, accessible names, keyboard operation, managed focus, and spoken updates. What follows is what that covers, and the short list of things it cannot, because they belong to your page.
How the embeds are built
Each embed renders in a Shadow DOM root, which keeps your styles out and its own styles in. The root is mode: 'open', so it is not sealed: reach element.shadowRoot to inspect or extend it. Everything inside is native, keyboard-operable HTML.
The thumbs embed
Thumbs up, thumbs down, record and dismiss are real <button> elements. They sit in the tab order and fire on Enter or Space. Each carries an aria-label, since none of them has visible text: "Send positive feedback", "Send negative feedback", "Record a screen recording", "Hide feedback buttons". All four are overridable through the text config, which matters if your page is not in English.
Picking the element a report refers to works from the keyboard, and the targeting state is announced as it changes.
The comment modal, the mobile bottom sheet and the recording preview are proper dialogs. Each exposes role="dialog" with aria-modal and a name, traps focus while open, makes the rest of the page inert, and hands focus back to the button that opened it. Escape closes them.
A live region speaks what would otherwise happen in silence: a submit landing or failing, a screenshot taken, a recording starting or stopping, the final countdown, a change of feedback type. The type toggle carries aria-pressed. The textarea is a real one, focused when the modal opens, with visible focus styles. Both prefers-reduced-motion and forced-colors mode are honoured.
The quests embed
Every control has an accessible name. Single and multiple choice questions are exposed as role="radiogroup" or group, with radio or checkbox options carrying aria-checked. The range control is a native slider.
Arrow keys rove between options, 1 to 9 jump straight to one, and focus follows you to the active field as you advance through steps.
Validation is built for a screen reader rather than an eye. Required fields carry aria-required. A failed submit sets aria-invalid and links the field to its error text through aria-describedby, then announces the error through a live region. Nothing depends on colour.
Progress is spoken as well as drawn: role="progressbar" with live values, and a "Step X of Y" call each time you move. In modal mode the quest is a focus-trapped dialog with a name; inline mode stays a plain region in the document flow. At the end, focus moves to the thank-you heading and the result is spoken.
What stays yours
The page around the embed is not something a component can fix.
Give the page real landmarks and a skip link. <header>, <main>, <nav> and <footer> plus "Skip to main content" let a keyboard user get past any floating UI.
Tab through your own controls with the embed installed and watch for a focus ring disappearing behind it. That is a z-index problem and it is invisible until somebody hits it.
Consider inline mode. Passing a container selector puts the embed in the normal reading and tab order, which is usually the right home for a "Was this helpful?" at the end of an article.
Check contrast whenever you theme. The embed uses whatever colours you hand it, including bad ones. Measure each against the surface it lands on, not the one in the preview:
| Config key | Colours |
|---|---|
colors.positive | thumbs-up button and its states |
colors.negative | thumbs-down button and its states |
colors.marker | submit button, focus ring, target marker |
WCAG 1.4.3 and 1.4.11 ask for 4.5:1 on text and 3:1 on non-text UI. The WebAIM Contrast Checker takes seconds.
Six checks, mouse untouched
Tab from the top of the document. Focus should reach the controls in a sensible order and stay visible the whole way. Activate one with Enter and another with Space; both work, because these are native buttons.
Open a dialog or a quest and keep tabbing. Focus should stay inside, Escape should close it, and focus should come back to where you were.
Then listen to it with VoiceOver, NVDA or TalkBack. Every control should announce its name and role, and nothing should change state in silence.
Complete the whole flow without touching the mouse: thumb, target, comment, submit, or a full questionnaire through to the thank-you.
And if you themed the colours, measure the contrast again against your real background rather than the one in the preview.