AriaReferenceHook
This hook encapsulates the generation of some ARIA-attribute, that deals with referencing some other tag by id.
This is useful for situations where the client creates the content, that should be referenced by the underlying (headless-)component. Both sections need to reference and declare the same id.
This hook encapsulates the specific ARIA attribute setting, by letting the component define the specific ARIA attribute, but enables the client to set a specific id or to create some random one and to use it. The component simply needs to apply the hook, as the behaviour is to exactly add the initial ARIA attribute with the created id.
The following strongly simplified example shows the use case:
class SomeComponent {
val ariaTitleId = AriaReferenceHook<Tag<HTMLDivElement>>(Aria.labelledby)
val ariaDescriptionId = AriaReferenceHook<Tag<HTMLDivElement>>(Aria.describedby)
private var userContent: Tag<HTMLDivElement>.() -> Unit = {}
fun content(expr: Tag<HTMLDivElement>.() -> Unit) { userContent = expr }
fun render() {
// surrounding structure by component itself
div {
// integrate user's content; reference hooks get invoked!
userContent(this)
// apply effect of setting correct ARIA references
hook(ariaTitleId, ariaDescriptionId)
}
// results in the following DOM-Subtree:
// <div aria-labelledby="mySpecialTitleId" aria-describedby="AB12FD">
// <h1>My Title</h1>
// <p>lorem ipsum...</P>
// </div>
}
}
// client usage
someCoponent {
content {
h1(id = ariaTitleId("mySpecialTitleId")) { +"My Title" }
// ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
// user set explicit ID
p(id = ariaDescriptionId()) {
// ^^^^^^^^^^^^^^^^^^^
// user relies on automatic created ID
+"lorem ipsum..."
}
}
}Content copied to clipboard