"prefix" slot for sl-dialog and sl-drawer

[mohanyin]

I would like the option to add an image to the top of our drawers and modals.

Here's a basic mockup of an example drawer:

We've managed to achieve this by using the no-header option and adding our own header in the body slot. However, it makes enforcing accessibility more complicated, because we can no longer take advantage of aria-labelledby that links the dialog to the header (the dialog is in the shadow DOM and our custom header is in the light DOM).

I'd like a prefix slot that allows us to insert content above the header slot. I'm happy to take a stab at a PR, but wanted to get a gut check from others first!

[claviska]

I'll defer this to @lindsaym-fa for consideration, but typically for this type of application I suggest removing the default header and adding your own within the drawer's main content slot. Quick example:

https://codepen.io/claviska/pen/wvLZRBN?editors=1100

[lindsaym-fa]

Interesting suggestion! It seems similar to the image slot offered for <sl-card>.

I'm curious: Even with no-header, you can still include the label attribute on <sl-dialog> or <sl-drawer> to give the modal a title that's announced by screen readers and available to other assistive tech. Is that something you're already doing? Does it address the accessibility issue you're running into?

[mohanyin]

The label gets us part of the way there for sure! But sometimes we don't have straightforward text to pass in to the label attribute. For example, if our header has a strong tag or a link in it for some reason.