UI: Use custom HTML elements for the UI Tag Input

[lscharmer]

This PR fixes Mantis Bugs:

• https://mantis.ilias.de/view.php?id=47586
• https://mantis.ilias.de/view.php?id=47585
• https://mantis.ilias.de/view.php?id=47584

The library @yaireo/tagify which is used for the UI Tag Input uses non existing HTML tags (e.g. <tags>, <tag>). We already replaced these with <div>'s instead but this results in invalid attributes used for our replacement tags (as reported in the Mantis issues above).

This PR replaces the <div>'s with custom HTML elements, so that this won't result in invalid HTML attributes anymore (https://developer.mozilla.org/en-US/docs/Web/API/Web_components/Using_custom_elements).

[thibsy]

Hi @lscharmer,

Thx for providing this fix.

This is another good example of why the @yaiero/tagify library keeps causing friction. We repeatedly work around some issues or limitations to bend this library to all our needs, which keeps trading one problem for another and adds much unnecessary complexity. We should get rid of this library short-term.

For this PR specifically, please help me answer the following questions:

• Isn't there an existing element that supports all attributes the library needs? Maybe even an <input type="hidden"> (although this might be tricky due to name etc.)?
• If I remember correctly, we originally moved to a div because the custom HTML tag of the library was flagged during an A11Y inspection or some HTML-validator run (not entirely sure though). Would we not simply cause this issue again, since we embed a custom HTML tag of our own?

Thx for your insight.

Kind regards,
@thibsy (as UI coordinator)