AriaReferenceHook

class AriaReferenceHook<C : Tag<*>>(name: String) : Hook<C, Unit, Unit>

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..."
}
}
}

Constructors

Link copied to clipboard

Functions

Link copied to clipboard
fun also(expr: Unit.() -> Unit)

This method offers the created result as receiver within a context expression in order to expose some additional configuration entry point for a client.

Link copied to clipboard
operator fun invoke(): String
operator fun invoke(id: String): String
Link copied to clipboard
fun use(item: Effect<C, Unit, Unit>)

Properties

Link copied to clipboard
var alsoExpr: Unit.() -> Unit?

This field encapsulates some behaviour, which should be applied to the result R of the Hook's Effect.

Link copied to clipboard
Link copied to clipboard
open var value: Effect<C, Unit, Unit>?