Help Sheet Onboarding Block for React

So you can see it without a click. On load the sheet is a copy drawn in place at the end edge of the inbox: a native dialog element that isn't modal, so nothing is trapped, hidden or focused. Help opens the real Sheet, modal, with its focus trap, Escape and focus return, and the copy stays closed until a reload. Both show the same HelpBody component and the same state. In your app keep the Sheet and drop the copy: the "in-place" state, the scrim and the dialog inside the frame.

It filters ARTICLES by a case-insensitive match on the title and the one-line summary, keeps their order, and marks the matches in the titles. The count line updates at once; the polite status line speaks it only after typing rests for a moment, so a screen reader isn't read every letter. An empty result keeps the list's box and shows an empty state with Clear search, which clears the field and puts focus back in it.

The articles and the four resources are typed in the file, and the links go nowhere: each one says it would open in your app and that nothing opens in this demo. In your app set each href to your docs, video library, community and support form, and replace ARTICLES with a search against your help centre.

The end edge in either direction. The sheet's sides are physical, so the block reads the direction of the page when it opens and picks right for left-to-right text and left for right-to-left. The in-place copy uses logical positions and follows the direction by itself.

Help opens the sheet with Enter or Space and focus moves to the search field. Tab then runs through the articles, the four links and the close button; Escape closes the sheet and returns focus to Help. The articles sit in a scrolling list with a fixed height, so the sheet never changes size as you search.

The copy shown on load docks to the foot of the inbox as a bottom sheet with its content scrolling inside it, and the real Sheet is full width. The search field and the articles stay at the top, and the four ways to reach us sit under them.