ResultAnchor

Whatever reports the result of a form’s POST, as the place the reader lands, focus included.

import { ResultAnchor } from '@zitdevs/ui';

Examples

On this page, as on the page a POST returns, focus lands on it when the page loads, and its ring shows where the reader is.

Request received

A specialist will reply within one business day.

<>
  <form method="post" action="/contact#zd-result">
    …
  </form>
  {received && (
    <ResultAnchor id="zd-result">
      <Alert tone="success" title="Request received" body="A specialist will reply soon." />
    </ResultAnchor>
  )}
</>

Props

Prop	Type	Default	Notes
id	string	required	The fragment the form’s action ends in.
children	ReactNode	—	The result: an alert, a summary, a receipt.
ref	Ref<HTMLDivElement>	—
className	string	—	Placement. Merged last.
anything else	<div> attributes	—

Exported types: ResultAnchorProps.

Accessibility

• Navigating to a fragment moves focus to its target when the target can take it, which tabindex="-1" allows: the reader lands on the result, and a screen reader starts reading there.
• autofocus covers a navigation that lost the fragment on the way; the HTML spec drops it when the URL names a target, which is the usual case.
• One per page.

Without JavaScript

It needs none: that is the point. It works from server HTML — React’s client render neither writes autofocus nor focuses a <div> — so under a client router that does not focus fragments, the app moves focus to it itself.

Theming

The focus ring.