[web component] Popover

[gfellerph]

📝 Description

Update the popover web component with tokens and a new trigger API.

♿ Accessibility

The triggering element, a button, a link or another focusable element, needs the aria attribute aria-expanded set to the current state of the popover.

Focus should move inside the popover upon opening and return to the trigger element upon closing.

Popovers should internally re-use the <post-popovercontainer> component to benefit from the shared API and the internal usage of the popover attribute, which helps with keyboard navigation and focus handling.

Popovers should have a clearly visible border in Windows High Contrast mode.

⚙️ Requirements

• Background colour can be set by palette utilities
• Can contain interactive elements like links, buttons or form fields
• Opens according to it's trigger-on prop or on click by default
• Closes based on trigger action or on light dismiss
• Does not open in modal mode (not supported by the popover attribute anyways)

Markup

The popover trigger can either wrap the popover to omit the id-reference or the popover can be placed independently of the trigger which requires an id-reference:

<!-- Popover is connected via for/id attributes -->
<post-popover-trigger for="more-info">
  <button>show info</button>
</post-popover-trigger>
<post-popover id="more-info">
  <h3>Additional info</h3>
  <p>Lorem...</p>
  <a href="/goto">Read more about it</a>
</post-popover>

<!-- Popover is nested inside the trigger, no for/id attributes necessary -->
<post-popover-trigger>
  <button>show info</button>
  <post-popover>
    <h3>Additional info</h3>
    <p>Lorem...</p>
    <a href="/goto">Read more about it</a>
  </post-popover>
</post-popover-trigger>

Popover props

• id, string used to connect <post-popover-trigger> with the target <post-popover>, optional if the popover is nested inside the trigger (only triggers the first found popover)
• placement, string, one of the floating ui placement possibilities, defaults to 'top'
• arrow, boolean, show an arrow, false by default
• delay, [open-delay]|[open-delay close-delay] if it's a number, open delay in milliseconds, if it's a string of two numbers, e.g. delay="200 400", the first number is the open delay and the second the close delay, defaults to undefined (intended to be used together with trigger-on="interest"

Popover trigger props

• for, string connects the trigger to it's popover, optional if the tooltip is nested inside the trigger
• trigger-on, click|interest|manual specifies what action triggers the popover.
  • click, the default option open/closes the popover on click
  • interest, the popover opens on hover, long-press and focus
  • manual, the popover does not open or close but the trigger wires up all accessibility behaviour. It's expected that the user adds own logic for toggling the popover
• trigger-action, toggle|show|hide specifies if the trigger toggles a popover on repeated actions, only opens or only closes it

🧪 Testing

• Popover should open and close
• Popover should close on light dismiss and ESC press
• Ensure aria attribute is handled correctly
• Ensure focus jumps into the popover and back to the trigger
• Ensure popover passes placement options to popovercontainer correctly
• Ensure that the various trigger options are working correctly
• Ensure that trigger element (button inside post-popover-trigger) and post-popover-trigger itself can be removed and re-attached to DOM without affecting popover functionality (events have to be captured and aria-attributes correctly set)
• Ensure that popover is still working after the post-popover has been removed and re-attached to DOM
• Ensure that popover is working as Angular and React output

📖 Documentation

Add a documentation example with an information icon button like in figma: https://www.figma.com/design/JIT5AdGYqv6bDRpfBPV8XR/Foundations---Components-Next-Level?node-id=1775-16900&m=dev.

💻 Proposed implementation

Improve existing implementation.

🔗 References

• https://component.gallery/components/popover/

📃 Tasks

• [ ] https://github.com/swisspost/design-system/issues/4508
• [ ] Implement component according to design
• [ ] Update storybook documentation
• [ ] Add functional tests
• [ ] Add integration tests for React
• [ ] Add integration tests for Angular
• [ ] Add visual regression tests
• [ ] Design review