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.
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
Reference implemented version in the workspace demo for UX/UI
Accessibility requirements
Responsive requirements
Acceptance criteria
Open questions