Description
Spurred by #14755. Making this mostly for documentation purposes; I don't expect this to take long, and I'm planning to address this tomorrow once #14755 is merged in
Issue
Lately, parts of the UI code have opted into this pattern for our Popovers:
<PopoverTrigger>
<Pill {...otherProps} />
</PopoverTrigger>
When we made PopoverTrigger
, I think the assumption was that it would always be used with <button>
elements (and would inherit their keyboard focus behavior by default). Our Pill
(and our new FeatureStageBadge
) components are just <div>
s, though, and don't have any of those accessibility niceties. For any user who can only use a keyboard, this means that the tooltip information is always unavailable, and they have zero ways of making the trigger trigger.
Proposed solution
PopoverTrigger
should be updated so that when in its hover variant, all the correct keyboard properties are added to the child element if they weren't there already. The most important ones are going to be tabIndex
, onFocus
, and onBlur
.