Medical Banner

Props

• label: string (required) -- accessible name for the banner via aria-label
• type: "info" | "success" | "warning" | "error" (default: "info") -- banner variant
• dismissible: boolean (default: false) -- whether the banner can be dismissed
• onclose: () => void (optional) -- callback invoked when the banner is dismissed
• closeLabel: string (optional) -- accessible label for the dismiss button
• children: slot (required) -- the banner content
• ...restProps: unknown -- additional attributes spread onto the root <div>

Keyboard Interactions

• Tab: Focus the dismiss button (when dismissible is true)
• Enter/Space: Activate the dismiss button to hide the banner

ARIA

• role="region" -- establishes the banner as a landmark region
• aria-live="polite" -- ensures screen readers announce banner content
• aria-label={label} -- provides accessible name for the banner
• aria-label={closeLabel} -- provides accessible name for the dismiss button

Composition

MedicalBanner can contain MedicalBannerBox for horizontal layout:

<MedicalBanner label="Patient summary">
  <MedicalBannerBox>
    <span>Patient: John Smith</span>
    <span>NHS: 123 456 7890</span>
  </MedicalBannerBox>
</MedicalBanner>

When to Use

• Use at the top of a clinical page to display critical patient identification and medical summary information
• Use in electronic health record systems where clinicians need quick access to patient context
• Use to present patient demographics, identifiers, and key clinical data in a persistent banner
• Use when medical context needs to be conveyed to assistive technologies via data-context="medical"
• Use as the parent container for MedicalBannerBox, MedicalBannerBoxForDanger, and MedicalBannerBoxForAdvice

When Not to Use

• Do not use for non-medical applications -- use Banner instead
• Do not use for alerts or warnings about clinical conditions -- use Alert, WarningCallout, or CareCard
• Do not use for transient clinical notifications -- use Notification or Toast

Headless

This component provides role="region" with aria-live="polite", data-type for variants, data-context="medical", optional dismiss button, and visibility state management. The consumer is responsible for all CSS.

Styles

The consumer provides all CSS styling. The component renders with a .medical-banner class for targeting. No default styles are included -- this is a fully headless component.

Testing

• Verify the component renders a <div> element with class medical-banner
• Verify role="region" and aria-live="polite" are present
• Verify data-context="medical" is present
• Verify aria-label is set from the label prop
• Verify dismiss functionality works when dismissible is true
• Verify keyboard interactions work correctly

Advice

• Designers: Use distinct styling for medical banners to differentiate them from generic site banners. Consider NHS blue or clinical color schemes.
• Developers: Always provide a meaningful label prop. Use data-context="medical" in CSS selectors for medical-specific styling.

Implementation Notes

• Renders as <div role="region" aria-live="polite"> for screen reader announcements
• Uses reactive state to track visibility; dismissing sets visible to false
• Dismissible banners render a <button type="button"> with a configurable aria-label
• data-type attribute exposes the variant (info, success, warning, error) for consumer CSS
• data-context="medical" attribute distinguishes this as a medical banner
• Uses children slot for flexible banner content rendering
• Spreads ...restProps on the root <div> element for consumer extensibility

Domain Knowledge

Medical banners in clinical systems display patient-specific information, clinical alerts, and health record summaries. They must be highly accessible as they convey critical information to clinicians.

Related components

• announcement-banner — a banner highlighting important messages for all users
• banner — a prominent message bar across the top of a page
• banner-box — a banner box that is inside a banner component, using flexbox horizontal
• government-banner — a banner identifying a website as belonging to a government, with an expandable details panel
• medical-banner-box — a medical banner box that is inside a medical-banner component, using flexbox horizontal, with medical information
• medical-banner-box-for-advice — a medical record banner box for advice information e.g. contacts, contexts, plans, etc.

References

• Parent pattern: Banner
• NHS UK Design System: https://service-manual.nhs.uk/design-system