Accessibility

The feedback widget ships with keyboard and screen reader support enabled by default. This page describes that behavior and the properties you can use to adjust it.

Keyboard support

Key	Action
Enter or Space	Opens the modal when the feedback button has focus.
Tab	Moves to the next control. While the modal is open, focus stays inside it.
Shift + Tab	Moves to the previous control, also confined to the modal.
Esc	Closes the modal.
Enter	Submits the form when the send button has focus.

Closing the modal with Esc keeps whatever the user has typed, so an accidental key press does not discard a half-written message or an attached screenshot. Reopening the modal restores it.

The screenshot editor closes the same way, but Esc works in layers there. See Screenshot editor below.

Screenshot editor

The screenshot editor closes on Esc and on clicking outside it, the same as the feedback modal. Both honour escape-close and click-outside-close.

Either way it closes the editor only and returns you to the feedback form. A stray click never dismisses the whole widget. Any screenshot already attached to the feedback form is kept; only edits made in the editor since it opened are discarded, exactly like the Cancel button.

Clicks that begin inside the editor are ignored, so dragging an annotation and releasing past the edge of the editor does not close it.

Because closing discards annotations, Esc clears whatever is on top before it closes anything. In order:

1. While the browser's screen sharing prompt is open, that prompt owns the keyboard and the widget ignores Esc entirely.
2. If the colour picker is open, Esc closes the picker and leaves the editor and your annotations in place.
3. If an annotation is selected, Esc clears the selection, the way drawing tools do.
4. Otherwise, Esc closes the editor and returns to the feedback form.

So a user who has just selected a shape and presses Esc drops the selection rather than their work. Pressing it again closes the editor.

Focus behavior

When the modal opens, focus moves to the dialog itself, so screen readers announce the modal title before reading its contents. Focus is then confined to the modal for as long as it is open.

When the modal closes, focus returns to the element that opened it, usually the feedback button, so keyboard users resume where they left off. Returning from the screenshot editor, whether you saved, cancelled, or the capture failed, puts focus back on the feedback form.

In embedded mode, the widget is part of the page rather than an overlay. It has no close button, does not trap focus, and does not respond to Esc or to clicks outside it. It is exposed as a labelled region rather than a dialog, since there is no dialog to open or close.

Disabling Esc to close

If your site already binds Esc to something else, such as closing a search palette or a navigation drawer, set escape-close to false:

<feedback-button 
  project="YOUR_PROJECT_ID"
  escape-close="false">
  Button text
</feedback-button>

The close button, clicking outside the modal, and the browser back button all continue to work. See click-outside-close and history-close for those. escape-close applies to the screenshot editor as well as the feedback modal.

Screen reader labels

The modal exposes itself as a dialog labelled by its title, and every control has an accessible name. The names of controls that show only an icon can be translated or reworded:

Property	Default value
close-button-label	Close feedback form
rating-positive-label	Yes
rating-negative-label	No
rating-star-label	Rate {rating} out of 5

In rating-star-label, the {rating} placeholder is replaced with the number of the star, giving names such as "Rate 3 out of 5".

<feedback-button 
  project="YOUR_PROJECT_ID"
  close-button-label="Cerrar formulario"
  rating-positive-label="Sí"
  rating-negative-label="No">
  Button text
</feedback-button>

See Text for the full list of text properties.

Color contrast

If you override the widget colors, check the resulting combinations against the WCAG contrast guidelines, particularly for placeholder text and the unselected rating icons, which sit on lighter backgrounds than the rest of the modal. See Styles for the available custom properties.