Skip to content

Create reusable sticky header/footer component #3347

@Spark450

Description

@Spark450

Summary

Investigate if creating a component for this capability is the best approach to provide this capability.

Create reusable components (or a single component with header/footer positioning capability) to support “sticky” UI regions within scrollable pages.

Context / reference

  • Workspace demo shows:
    • a search toolbar that remains visible at the top while scrolling
    • a bulk action footer that remains visible at the bottom while scrolling (often conditional on having selected items)

Reference implemented version in the workspace demo for UX/UI

Accessibility requirements

  • Keyboard focus must never be hidden behind sticky regions.
  • Sticky regions should not trap focus; tab order remains natural.

Responsive requirements

  • Works across supported breakpoints.
  • Sticky header/footer should remain usable on smaller screens (elements wrap or truncate appropriately without breaking the layout).

Acceptance criteria

  • A reusable component(s) exists for sticky header and sticky footer regions.
  • Implemented behaviour matches the workspace demo intent (search toolbar at top; bulk actions at bottom).
  • Works inside a scroll container without requiring consumers to write custom CSS.
  • Create component docs page

Open questions

  • Should we provide an optional “offset” prop (e.g., if there’s an existing fixed app header inside the scroll region)?
  • Can the scope include swapping the component into workspace template?
  • Should we consider using an HTML "section" to define a "region" landmark. This is to enable screen reader users to be able to quick navigate to these sections.

Metadata

Metadata

Labels

2.0P2Priority 2 (should have): Improves completeness and reduces the post-launch support load.SpikeLabel to use for Spikes

Projects

Status

🏗 In progress

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions