Skip to content

[web component func] Popover trigger #6087

@alizedebray

Description

@alizedebray

📝 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 package

Projects

Status

💻 In Progress

Relationships

None yet

Development

No branches or pull requests

Issue actions