Popover improvements

[AshleyBekemeier]

Summary

• Ticket
• Design
• Storybook

Review Checklist

General

• Changeset added
• The submitted code is organized and formatted according to our 💅 Style Guide.
  • The code is formatted with Prettier.
  • There are no linting errors.

For new or updated components

https://swirl-storybook.flip-app.dev/?path=/docs/contributions-merge-publish--page

• The changes do not contain any breaking changes.
• The changes do not introduce new components that don't belong in the library (e.g. non-reusable components, highly specialized components, components including business logic)
• The component documentation is updated.
• The changes meet the 🤖 testing requirements.
  • New features are tested.
  • In case of bug fixes, regression tests have been added.
  • All tests are 🟢.
• The changes meet the 🧏‍♀️ accessibility requirements.
  • WCAG 2.1 Level A and Level AA requirements are met.
  • The Storybook a11y addon shows no errors.
  • The changes have been tested with a screen reader.
  • Keyboard controls have been tested, if applicable.
  • Components implementing form controls (inputs, buttons, selects, etc.) do not use Shadow DOM, and instead use Stencil's scoping mechanism
• The changes use our 🌈 theming concept.
  • Design tokens have been used where appropriate.
  • The component has been visually checked in combination with the "Light" and "Dark" theme.
• The changes meet our 🌍 internationalization requirements.
  • No static text is used.
  • The component doesn't break with longer texts or different text wrappings.
  • Number, currency and date values can be formatted appropriately.
• The changes work in all supported browsers and viewports. See 📱 Responsive Design

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

2 Ignored Deployments

Name	Status	Preview	Comments	Updated (UTC)
getflipdev	⬜️ Ignored (Inspect)	Visit Preview		Jun 11, 2024 11:32am
staginggetflipdev	⬜️ Ignored (Inspect)	Visit Preview		Jun 11, 2024 11:32am

[github-actions]

Azure Static Web Apps: Your stage site is ready! Visit it here: https://icy-water-049ec4003-730.westeurope.3.azurestaticapps.net

[Sqrrl]

Issue: Has probably been a problem before your changes, but the trigger always needs to be able to activate the popover via keyboard controls. I would suggest to additionally trigger the popover via the focus event when triggerOnHover is true.

[AshleyBekemeier]

Issue: Has probably been a problem before your changes, but the trigger always needs to be able to activate the popover via keyboard controls. I would suggest to additionally trigger the popover via the focus event when triggerOnHover is true.

What if we want to implement keyboard support in a different way? should I add a prop that disables keyboard support?

[Sqrrl]

Issue: Has probably been a problem before your changes, but the trigger always needs to be able to activate the popover via keyboard controls. I would suggest to additionally trigger the popover via the focus event when triggerOnHover is true.

What if we want to implement keyboard support in a different way? should I add a prop that disables keyboard support?

What do you mean with "different way"? From an accessibility perspective focus would be the expected behavior, I think. You could, of course, always implement additional keyboard controls. Opening on click instead of focus, even when triggerOnHover is true, would work as well.

[AshleyBekemeier]

Issue: Has probably been a problem before your changes, but the trigger always needs to be able to activate the popover via keyboard controls. I would suggest to additionally trigger the popover via the focus event when triggerOnHover is true.

What if we want to implement keyboard support in a different way? should I add a prop that disables keyboard support?

What do you mean with "different way"? From an accessibility perspective focus would be the expected behavior, I think. You could, of course, always implement additional keyboard controls. Opening on click instead of focus, even when triggerOnHover is true, would work as well.

We show a separate arrow button that opens the popover. So basically there is one popover trigger for on hover and one for on click for keyboard support. Having both open via keyboard would break the behaviour because a single click selects the default thumbs up emoji instead of opening the popover.

[Sqrrl]

Issue: Has probably been a problem before your changes, but the trigger always needs to be able to activate the popover via keyboard controls. I would suggest to additionally trigger the popover via the focus event when triggerOnHover is true.

What if we want to implement keyboard support in a different way? should I add a prop that disables keyboard support?

What do you mean with "different way"? From an accessibility perspective focus would be the expected behavior, I think. You could, of course, always implement additional keyboard controls. Opening on click instead of focus, even when triggerOnHover is true, would work as well.

We show a separate arrow button that opens the popover. So basically there is one popover trigger for on hover and one for on click for keyboard support. Having both open via keyboard would break the behaviour because a single click selects the default thumbs up emoji instead of opening the popover.

I see. Then a prop to disable the keyboard controls should be fine.

[AshleyBekemeier]

Issue: Has probably been a problem before your changes, but the trigger always needs to be able to activate the popover via keyboard controls. I would suggest to additionally trigger the popover via the focus event when triggerOnHover is true.

What if we want to implement keyboard support in a different way? should I add a prop that disables keyboard support?

What do you mean with "different way"? From an accessibility perspective focus would be the expected behavior, I think. You could, of course, always implement additional keyboard controls. Opening on click instead of focus, even when triggerOnHover is true, would work as well.

We show a separate arrow button that opens the popover. So basically there is one popover trigger for on hover and one for on click for keyboard support. Having both open via keyboard would break the behaviour because a single click selects the default thumbs up emoji instead of opening the popover.

I see. Then a prop to disable the keyboard controls should be fine.

okay, added.

[github-actions]

Azure Static Web Apps: Your stage site is ready! Visit it here: https://icy-water-049ec4003-730.westeurope.3.azurestaticapps.net