Dialog title implementation and README example mismatched

[Chris Swithinbank]

Hi Moritz! Thanks for this excellent implementation — really works well.

The current example in the README suggests the following use inside <a11y-dialog>:

<h1 slot="title">Your dialog title</h1>

But this will actually render:

<h1>
  <h1>
    Your dialog title
  </h1>
<h1>

Because the title slot is defined as an <h1> element already:

vue-a11y-dialog/src/A11yDialog.vue

Lines 26 to 28 in 6005d7f

 <h1 :id="fullTitleId" :class="classNames.title"> 
   <slot name="title" /> 
 </h1> 

I can imagine that an <h1> tag is a semantically good idea inside the dialog, in which case perhaps it should be enforced and the README example changed (e.g. to <span slot="title">).

On the other hand, given that a title isn’t required by the dialog, perhaps it would be better to give users more flexibility? For example, <header> could be used for the slot, which would usually bring less style defaults with it, while still maintaining decent semantics.

[Moritz Kröger]

Good catch, thanks for pointing this out! The short-term fix would be to update the README accordingly and to long-term find a good solution.

I'm not sure about <header> inside a dialog and its accessibility implications. It would be possible though to check the slot content for a nodeName === 'H1' and either render that directly or wrap the slot in a <h1>. Although I don't know how much work is needed to apply the id and class to the slot. First tests didn't really yield any useful results for me.

[Chris Swithinbank]

I’m realising that a good, flexible solution to this is quite tricky, but 454d177 looks like a good enough fix for now to me. I think enforcing an <h1> tag for the title makes sense, and if someone really wants to use alternative syntax, they can avoid using the title slot and place their markup in the main content slot.

Thanks!