draft up new popover component

[britt6612]

Deploy Preview
Figma Preview

What does this PR do?

Adds new Popover template into the design system site.

Popover is an overlay that is opened by clicking a trigger. It is used to provide additional contextual information and might contain interactive elements.

The following is the api structure for this component.

  children
  title
  footer
  onClose
  targetRef
  dropProps

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

Where should the reviewer start?

popover.js

What testing has been done on this PR?

locally

need to add test example
In addition to the feature you are implementing, have you checked the following:

General UX Checks

• Small, medium, and large screen sizes
• Cross-browsers (FireFox, Chrome, and Safari)
• Light & dark modes
• All hyperlinks route properly

Accessibility Checks

• Keyboard interactions
• Screen reader experience
• Run WAVE accessibility plugin (Chrome)

Code Quality Checks

• Console is free of warnings and errors
• Passes E2E commit checks
• Visual snapshots are reasonable

How should this be manually tested?

locally

Any background context you want to provide?

Required elements?
Close button

Optional elements?
Title,
Footer

Component API surface proposal

  children
  title
  footer
  onClose
  targetRef
  dropProps

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.

What are the relevant issues?

Screenshots (if appropriate)

Should this PR be mentioned in Design System updates?

yes

Is this change backwards compatible or is it a breaking change?

backwards compatible

[jcfilben]

Positioning of the popover in this example looks different than what the figma example shows.

Also I expected to be able to tab to the "Learn more" anchor but that wasn't working

[jcfilben]

The close button aria-label on this example is really long

[halocline]

@jcfilben - Do you have an alternate suggestion?

[jcfilben]

Instead of reading out the paragraph can we give a quick tagline of what the popover is (ex popover with details about ___). Then if the screenreader user wants to know more they could have their screenreader read all the text in the popover

[halocline]

@britt6612 one small tweak to markdown under "Accessibility", then good to merge.

[halocline]

beautiful.