Closed delucis closed 5 years ago
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.
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!
Hi Moritz! Thanks for this excellent implementation — really works well.
The current example in the README suggests the following use inside
<a11y-dialog>
:But this will actually render:
Because the
title
slot is defined as an<h1>
element already:https://github.com/morkro/vue-a11y-dialog/blob/6005d7ffd5cc9d075d26d90c000f7d653c464de7/src/A11yDialog.vue#L26-L28
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.