UI: Implementation of Toast Container

[iszmais]

Implementation of the given Concept of ILIAS Toast Containers
Depends on #4049 since its his implementation

[iszmais]

@klees @Amstutz

this is ready to be reviewed. Fell free to give feedback or merge.

Greetings,
@iszmais

[Amstutz]

Hi @iszmais

Thx a lot. I tested the example. IMO it all works as expected and is looking good. However, some details need some attention still:

Please change, or give some reasoning why you prefer not to:

• Examples I: checked out the examples. Thx a lot for adding! However, They all render at once. This will make it hard to have good test cases for those. Can you provide a button for each, generating a new request adding some get param to the request which then only rendered the toast specified in the get Param? Something like a button with “Show Toast Example 1” or similar.

Please change:

• Code Format: Put the js in withAdditionalOnLoadCode on two lines, to enhance the readability, see: https://github.com/ILIAS-eLearning/ILIAS/pull/4059/files#diff-d08c76b5cf5210b2e917f668ef5c1fdcbd87f3e3172e01c2685a616e511911e9R67
• Accessibility: If I understand this correctly, the whole container should be tagged as “aria-live” region, see= https://developer.mozilla.org/de/docs/Web/Accessibility/ARIA/ARIA_Live_Regions . I would propose, aria-live="polite", which tells the screenreader, to only inform the user about the notification, as soon as he/she is done editing the current task.
• Examples II: Please use existing Icons for the examples. This is important for me, since I often use the examples while fixing CSS issues. This works better, if the example looks as closely to the real use cases as possible. E.g. use the Mail Icon or similar.
• Tests I: I did not find the Toasts Unit Test in the Branch. Did I miss something? Please add tests for every method on the public interface.
• Tests II: Also add a test for making sure tests/UI/Client/Toast/toast.test.js is rendered by php as expected. We had the issue in the past, the the client side test was working, but on the basis of the html that was not the html being rendered by php anymore. To close this gap, we now also test, if php really does render the html used in the client side testings. See tests/UI/Component/Counter/CounterClientHtmlTest.php as example.

Thx a lot.
@klees and @Amstutz

[iszmais]

Hi @klees @Amstutz ,

thank you for your feedback. I Implemented all, just 2 minor things i would need your approval for:

• aria-live="polite" is/was already set on the toast container so i didnt changed anything there. Is this what you where asking for or did i miss something?
• I implemented the test to check the html for the JS testing but had to make a few additions to make it work like removing the js bind id (since this isnt static and not needed for the js testing itself) and wrap it into a header body structure (which do for the js testing to simulate the authentic live case of a registeredd js strucure). The toast container and toast itsself is rendered as asked. Hope this still fits your expectations.

Feel free to approve/merge this or to give a new response to my feedback.

Greetings,
@iszmais

[iszmais]

This PR is an requirement for #4063

[iszmais]

Hi @klees @Amstutz ,

pls let me know if there is anything i could help with or provide further information needed for the final re-review or feel free to merge this PR.

Greetings,
@iszmais

[Amstutz]

This got stuck somewhat behind the Dev-Conf., thx for the ind ping!

Thx a lot for the changes! Sorry that I missed the aria-live="polite" on the container, clearly my bad.