[SOLVED] aria-controls requires id, id must be document-unique, how to write templates?

aria-controls requires id, id must be document-unique, how to write templates?

Let's take a look at the W3 ARIA toolbar example:

<div class="format" role="toolbar" aria-label="Text Formatting" aria-controls="textarea1">…</div>
…
<textarea id="textarea1" rows="20" cols="80" style="font-family: sans-serif">…</textarea>

aria-controls of the toolbar refers to a textarea using id.

Though I heard that id must be unique in its parent element only now, according to MDN it still “must be unique in the whole document”.

OK, but how to make a template of a widget, consisting of an area and its toolbar then?

An obvious solution is generating pointless id values every time I instantiate the template, just for referencing sake:

<template class="text-editor">
    <div class="format" role="toolbar" aria-label="Text Formatting" aria-controls="{textarea-id}">…</div>
    …
    <textarea id="{textarea-id}" rows="20" cols="80" style="font-family: sans-serif">
</template>

Maybe, there is a better way?

Solution

Right now my best approach is the following. I just added variables to a template instantiating code. One of them is {autoid}:

<template class="text-editor">
    <div class="format" role="toolbar" aria-label="Text Formatting"
     aria-controls="{autoid}">…</div>
    …
    <textarea id="{autoid}" rows="20" cols="80" style="font-family: sans-serif">
</template>

Then I replace {autoid} with a result of crypto.randomUUID() call.

This technique lets me have multiple instances of the template and keep id uniqueness.