Re: [WICG/webcomponents] Reference Target "phase 2": seeking feedback and use cases (Issue #1111)

alice left a comment (WICG/webcomponents#1111)

@frehner 
> Another example of this could be a date range component, where the start date and end date are separate inputs but work together to form a cohesive UX with a single picker popup.

Thanks for this example, that's very helpful.

I'm curious how you'd want/expect developers using the component to be able to refer to the departure/return inputs in the flights.google.com example.

In that particular example, I could imagine a few alternatives:
1. Allow developers to provide two `<label>`s as slotted content (they would presumably need to be slotted so that they can be positioned appropriately)
   - in this case, the developer would need to be able to set an appropriate `for` attribute _for each `<label>`_, which would be problematic without some solution for generic cross-shadow root references 
   - specifically, neither a `referenceTarget` type solution, which can only refer to one element in shadow root, nor a [`referenceTargetMap`](https://github.com/WICG/webcomponents/blob/gh-pages/proposals/reference-target-explainer.md#expanding-referencetarget-shadowroot-referencetargetmap-attribute) type solution, which can only refer to one element or list of elements _for a given attribute_, would work here
2. Allow developers to provide two elements (either a custom element or just a `<span>` or similar) with the label content, which slot into `<label>`s in the shadow DOM which respectively refer to the `<input>`s
3. Allow developers to provide two elements, as above, but use `ariaLabelledByElements` on the `<input>`s to refer out to the labels.

Are there any options I haven't thought of? Would you have any preference among those (or the secret fourth+ option)?

@ynotdraw 

> Our [Tooltip container](https://github.com/CrowdStrike/glide-core/blob/main/src/tooltip.container.ts#L16-L33) component only exists because we couldn't use `referenceTarget` yet. Same for our [Options](https://github.com/CrowdStrike/glide-core/blob/main/src/options.ts#L20-L32) component, which makes our Menu options accessible. Our form components, such as Input and Textarea, have a Label built-in for similar reasons.

Thanks for these! I really appreciate having more real-world examples.

Just to check my understanding:

For the `<glide-core-tooltip>` you have the developer provide the popover trigger button as slotted content, and then listen for events on the button to manually handle popover show/hide logic, and also add an `aria-describedby` attribute on the author-provided button pointing to the `<glide-core-private-tooltip-container>` (which is the component which wouldn't need to exist).
 - Would I be right in assuming vanilla `referenceTarget` should work here: you could potentially even then make `<div id="tooltip">` the reference target and use `popovertarget` on the user-provided button as well as making the `glide-core-tooltip` element the target of `aria-describedby` (either using an ID, or using `ariaDescribedByElements`)?

For `<glide-core-menu>`, I'm not sure I fully understand the situation, just looking at the [demo](https://glide-core.crowdstrike-ux.workers.dev/?path=/docs/menu--overview). It looks like `<glide-core-options>` is in light DOM so that:
   1. It can refer to the element in the `"target"` slot as its `aria-labelledby`
   2. It can refer to individua `<glide-core-option>` elements in light DOM as its `aria-activedescendant`.
 
It seems to me that each of these could be addressed using [ARIA IDL attributes](https://w3c.github.io/aria/#ARIAMixin) (i.e. `ariaLabelledByElements` and `ariaActiveDescendantElement`), which can refer to light DOM elements. Is there a case where you'd also need to refer in to Shadow DOM? And, if so, would this also be a case where plain vanilla `referenceTarget` would suffice?

-- 
Reply to this email directly or view it on GitHub:
https://github.com/WICG/webcomponents/issues/1111#issuecomment-3265264537
You are receiving this because you are subscribed to this thread.

Message ID: <WICG/webcomponents/issues/1111/3265264537@github.com>