Review&Merge Popover Component template

Deliverables:

[ ] Review component
[ ] Review component page
[ ] Merge on Design System site

General

Should this be a Grommet component or a code template? Template.

What is the purpose of this component? Popover is an overlay that is opened by clicking a trigger. It is used to provide additional contextual information and might contain interactive elements.

Design link?

design link

What are common use cases that Design System site examples should represent? What’s the 80% case?

https://www.figma.com/design/r1YUOdncOi0Bdl8msDF7Ni/Popover---%233780%2C-%233844?node-id=43-78&t=TY97Kje9ELof606C-4

Component naming

Is there a native HTML element namespace to use? Or, is there an industry standard term used by component libraries? API/Anatomy

"popover" is a widely used term in design libraries and component frameworks. API structure:

  children
  title
  footer
  onClose
  targetRef
  dropProps

We have determined we'll use the "Drop" component from grommet for this template.

Required elements? Close button

Optional elements? Title, Footer

Component API surface proposal

  children
  title
  footer
  onClose
  targetRef
  dropProps

Configurable vs custom/composable

The drop it self with the pad elevation and gap that will be set to what we recommend. The title, body, footer are all custom where the user can pass in any jsx for these areas with our recommended guidance

Semantic structure

We can add a main for the body then a footer for the footer portion of the popover and leave the top just a box not sure how this will look semantic since it wont be a header at the top. we can discuss more.. What is the proper HTML markup?

<drop role="dialog">
    <text id="popoverTitle">{title}</text>
    <div class="popover-body">
      {children}
    </div>
    <div class="popover-footer">
      {footer}
    </div>
    <button
      type="button"
      class="close-button"
      aria-label="Close"
      onclick="{onClose}"
      autofocus
    />
  </div>
</section>

Accessibility

What is the desired keyboard behavior? Screen reader announcements/roles/etc. Focus Management: On Opening: Initial Focus: When the popover opens, focus should move to the first interactive element which is the close button. Trap Focus: While the popover is open, keyboard focus should be trapped within the popover. On Closing: Return Focus: When the popover closes, return focus to the element that triggered the popover (button). Keyboard Navigation: Tab Navigation: Users should be able to navigate between focusable elements inside the popover using the Tab key. Esc Key Behavior: Close Popover: Pressing the Esc key should close the popover as well as pressing enter on the close button.

As far as the role there should be a role='dialog' on the drop container.

Dialogs can be either non-modal (it's still possible to interact with content outside of the dialog) which is what we have in our case. There is a role popover that can be found here https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/popover however this is not a standard ARIA role, it is supported by most browsers but since this is not standardized Im thinking we should go ahead with the role='dialog'

Since the popover is triggered by a button or some element that a user needs to click on to show/close popover then we should use use aria-expanded on this trigger element. This attribute indicates whether the associated popover is currently visible (expanded) or hidden (collapsed).

What are any additional accessibility requirements?

Users that follow this template will need to make sure if they have an icon only button that they are passing in a aria-label or a11yTitle to make sure its accessible.

Styling

What is the desired styling for base theme? For HPE theme? N/A -- this is starting as a code template, so we just need to align on any default box props (padding/border/etc.)

Any theme enhancements? N/A -- this is starting as a code template.

Testing

What should test cases cover? (Given this is a template, we might not write tests but we should manually test these things.) Make a similar test cases cover as we did for Selector

grommet / hpe-design-system