-
Notifications
You must be signed in to change notification settings - Fork 19
Labels
📦 componentsRelated to the @swisspost/design-system-components packageRelated to the @swisspost/design-system-components package
Milestone
Description
📝 Description
We need a post-popover-trigger
component, similar to the existing post-tooltip-trigger
.
This component is responsible for opening a given post-popover
and adding the required ARIA attributes and roles to the trigger element slotted into its default slot.
It should not be documented on its own, but only within the post-popover
documentation where all current trigger examples should be replaced.
♿ Accessibility
- Apply correct ARIA attributes to the trigger (
aria-haspopup
,aria-expanded
,aria-controls
). - Ensure keyboard support (focus, space/enter to open).
- Manage focus when the popover opens and closes.
⚙️ Requirements
- Expose a
post-popover-trigger
component. - Trigger element comes from the default slot.
- On interaction, open the associated
post-popover
. - Sync ARIA attributes with the popover’s state.
🧪 Testing
- Verify that clicking the trigger opens and closes the popover.
- Verify that pressing Enter/Space on the trigger opens and closes the popover.
- Verify ARIA attributes update correctly on open/close.
- Verify focus management when popover is opened.
💻 Proposed implementation
<post-popover-trigger for="popover-one">
<button class="btn btn-secondary">Popover Trigger</button>
</post-popover-trigger>
🔗 References
- Compare with existing
post-tooltip-trigger
implementation for guidance.
📃 Tasks
- Implement component functionality
- Update the popover documentation in Storybook
- Add functional tests
- Add React integration tests
- Add Angular integration tests
Metadata
Metadata
Assignees
Labels
📦 componentsRelated to the @swisspost/design-system-components packageRelated to the @swisspost/design-system-components package
Type
Projects
Status
💻 In Progress