Allow deep invokers for overlays

[vlaraort]

It's not a common usecase, but this is something that I have encountered.

When I use something that is an overlay with an invoker, like a dialog

    <lion-dialog .config="${cfg}">
      <button slot="invoker">Click me to open dialog</button>
      <div slot="content" class="demo-dialog-content">
        Hello! You can close this dialog here:
        <button
          class="demo-dialog-content__close-button"
          @click=${e => e.target.dispatchEvent(new Event('close-overlay', { bubbles: true }))}
        >
          ⨯
        </button>
      </div>
    </lion-dialog>

And the invoker is a direct node, it works properly, and the correct arias are appended to the invoker, like aria-expanded

But, if I need that my invoker is wrapped in something like a tooltip

    <lion-dialog .config="${cfg}">
     <lion-tooltip slot="invoker">
      <button slot="invoker">Click me to open dialog</button>
          <div slot="content" class="tooltip" aria-hidden="true">
            ${this.msgLit(i18n('filter'))}
          </div>
        </lion-tooltip>
      <div slot="content" class="demo-dialog-content">
        Hello! You can close this dialog here:
        <button
          class="demo-dialog-content__close-button"
          @click=${e => e.target.dispatchEvent(new Event('close-overlay', { bubbles: true }))}
        >
          ⨯
        </button>
      </div>
    </lion-dialog>

The aria-expanded is added to the tooltip, instead of the button, which should be the real invoker.

Actually, the invoker is calculated with

      get _overlayInvokerNode() {
    return Array.from(this.children)
      .find(child => child.slot === 'invoker')
  }
    

Which only allows to set the invoker as a direct child.

My workaround is to extend the default overlay component and override this function for my use case

    export class CustomInvokerOverlayComp extends LionDialog {
  /**
   * Force the invoker to be the ing-button inside the invoker, to handle
   * the arias into the button instead of the tooltip wrapper.
   * @override
   */
  get _overlayInvokerNode() {
    return Array.from(this.children)
      .find(child => child.slot === 'invoker')
      .querySelector('[data-tag-name="lion-button"], lion-button');
  }
}

But would be nice to have it working with the default overlays. I am not sure what would be a good approach. Allow to find the slot=inkover in the nested DOM tree? add a deepInvoker configuration? Document the _overlayInvokerNode as a overridable?

Thoughs?

[gerjanvangeest]

This indeed sounds like something that needs a fix. No thoughts yet what the best approach should be.
@tlouisse?