How to build an accessible HeaderPanel in React

role="region" with the label prop names the panel as a landmark; Escape closes it and focus is managed so keyboard users can dismiss it without a mouse

When to use a HeaderPanel

• Hosting a non-modal panel anchored under the shell header (notifications, switcher, settings)
• Showing supplementary content triggered by a ShellHeader icon action
• Light-dismiss content that should not block the rest of the app

When not to use it

• Content that must block interaction until resolved — use Modal
• A small contextual menu attached to a trigger — use Dropdown or Popover

Keyboard interactions

Role region, verified at WCAG 2.2-AA.

• Escape
• Tab

Common mistakes

Avoid: Using HeaderPanel for a blocking confirmation

Prefer: <Modal> or <AlertDialog> for decisions that must block

HeaderPanel is non-modal and light-dismissable; blocking flows need modal semantics

Example

<HeaderPanel open={open} onClose={() => setOpen(false)} label="Notifications">
  <p>3 unread messages</p>
</HeaderPanel>

See the full HeaderPanel reference →