Popover v11

[theetrain]

trafficstars

Spun off from #1629

• [ ] Create v11 Popover
• [ ] ~~Maybe implement the new no-JS Popover API now that it's near-baseline 👀 https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/popover~~ use JS and implement appropriate timings for touchstart and mouseover
• [ ] Update Tooltip within icon-only Buttons

[SimpleProgrammingAU]

If this one is blocking PasswordInput from being progressed, I may as well take this one on so that I can go back and finish PasswordInput afterwards.

Happy to give it a crack with the Popover API. Have been wanting an excuse to have a proper look at it anyway.

[brunnerh]

I'm opposed to using the popover API, it's not even in Firefox yet (only nightly). Also it does not open on hover, so in many places JS will be needed anyway.

[SimpleProgrammingAU]

it's not even in Firefox yet

It's been in every other major browser since September 2023. How long is reasonable to wait for Mozilla to catch up? (genuine question)

it does not open on hover

I think we could add a hover prop that could enable open on hover to avoid the need for users to write their own Javascript whenever they want to use a Popover with hover. What do you think?

[brunnerh]

I would not use anything that hasn't been in all major browsers at least half a year, no matter how long it takes. One year would be even better. Also, the main issue is often Safari because its updates are bound to the OS, which is just plain horrible; the update cadence is low and on older OS versions you may not even be able to get the latest Safari at all.

Regarding hover, I don't think Popover should deal with that, it's a primitive on which Tooltip builds. So the composition of components is usually:

Button/Inputs > Tooltip > Popover

In v11 there are changes to tooltips that need to be addressed:

• What is Tooltip in v10 becomes Toggletip which opens on click and may contain interactive content
• Tooltip is for those smaller texts, opens on hover/focus and may not contain interactive content

Note from spec:

v11 update: The tooltip component has been refactored to use the popover component under the hood to improve accessibility. Interactive tooltips now use the toggletip component to achieve accessibility standards. For v10 implementation guidance, see the v10 tooltip.

In the React version, Tooltip provides the automatic open/close logic with optional timing properties:

  enterDelayMs = 100,
  leaveDelayMs = 300,

[theetrain]

All good points. As a side note, it would be great if we could test attributes and CSS features in Playwright with a browserslist file for compatibility.

I updated the criteria above. Ideally, most of this is achievable with CSS, but the styles provided may not already work that way. Here's a handy guide: https://inclusive-components.design/tooltips-toggletips/

aria-describedby should be all that's needed to announce the tooltip content with its corresponding action like an icon button.