Open theetrain opened 8 months ago
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.
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.
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?
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:
Tooltip
in v10 becomes Toggletip
which opens on click and may contain interactive contentTooltip
is for those smaller texts, opens on hover/focus and may not contain interactive contentNote 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,
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.
Spun off from #1629
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/popoveruse JS and implement appropriate timings fortouchstart
andmouseover