[FIX] 0043696: Failed test: HTML des Mediacasts ist valide (KS System MessagError: Element p not allowed as child of element span...) (#9754)

(cherry picked from commit 5ac52d1)

Author: chfsx

components/ILIAS/UI/src/templates/default/MainControls/tpl.system_info.html

@@ -1,8 +1,8 @@
 <div id="{ID}" class="container-fluid il-system-info il-system-info-{DENOTATION}" data-close-uri="{CLOSE_URI}" {ROLE} {LIVE} aria-labelledby="{ID}_headline" aria-describedby="{ID}_description">
     <div class="il-system-info-content-wrapper">
         <div class="il-system-info-content">
-            <span id="{ID}_headline" class="il-system-info-headline">{HEADLINE}</span>
-            <span id="{ID}_description" class="il-system-info-body">{BODY}</span>
+            <div id="{ID}_headline" class="il-system-info-headline">{HEADLINE}</div>
+            <div id="{ID}_description" class="il-system-info-body">{BODY}</div>
         </div>
     </div>
     <div class="il-system-info-actions">

components/ILIAS/UI/tests/Component/MainControls/SystemInfoTest.php

@@ -54,8 +54,8 @@ public function testRenderingDefault(): void
 <div id="id" class="container-fluid il-system-info il-system-info-neutral" data-close-uri="" aria-live="polite" aria-labelledby="id_headline" aria-describedby="id_description">
     <div class="il-system-info-content-wrapper">
         <div class="il-system-info-content">
-            <span id="id_headline" class="il-system-info-headline">$headline</span>
-            <span id="id_description" class="il-system-info-body">$information</span>
+            <div id="id_headline" class="il-system-info-headline">$headline</div>
+            <div id="id_description" class="il-system-info-body">$information</div>
         </div>
     </div>
     <div class="il-system-info-actions">
@@ -87,8 +87,8 @@ public function testRenderingNeutral(): void
 <div id="id" class="container-fluid il-system-info il-system-info-neutral" data-close-uri="" aria-live="polite" aria-labelledby="id_headline" aria-describedby="id_description">
     <div class="il-system-info-content-wrapper">
         <div class="il-system-info-content">
-            <span id="id_headline" class="il-system-info-headline">$headline</span>
-            <span id="id_description" class="il-system-info-body">$information</span>
+            <div id="id_headline" class="il-system-info-headline">$headline</div>
+            <div id="id_description" class="il-system-info-body">$information</div>
         </div>
     </div>
     <div class="il-system-info-actions">
@@ -120,8 +120,8 @@ public function testRenderingImportant(): void
 <div id="id" class="container-fluid il-system-info il-system-info-important" data-close-uri="" aria-live="polite" aria-labelledby="id_headline" aria-describedby="id_description">
     <div class="il-system-info-content-wrapper">
         <div class="il-system-info-content">
-            <span id="id_headline" class="il-system-info-headline">$headline</span>
-            <span id="id_description" class="il-system-info-body">$information</span>
+            <div id="id_headline" class="il-system-info-headline">$headline</div>
+            <div id="id_description" class="il-system-info-body">$information</div>
         </div>
     </div>
     <div class="il-system-info-actions">
@@ -152,8 +152,8 @@ public function testRenderingBreaking(): void
 <div id="id" class="container-fluid il-system-info il-system-info-breaking" data-close-uri="" role="alert" aria-labelledby="id_headline" aria-describedby="id_description">
     <div class="il-system-info-content-wrapper">
         <div class="il-system-info-content">
-            <span id="id_headline" class="il-system-info-headline">$headline</span>
-            <span id="id_description" class="il-system-info-body">$information</span>
+            <div id="id_headline" class="il-system-info-headline">$headline</div>
+            <div id="id_description" class="il-system-info-body">$information</div>
         </div>
     </div>
     <div class="il-system-info-actions">
@@ -187,8 +187,8 @@ public function testRenderingCloseAction(): void
 <div id="id" class="container-fluid il-system-info il-system-info-neutral" data-close-uri="$uri_string" aria-live="polite" aria-labelledby="id_headline" aria-describedby="id_description">
     <div class="il-system-info-content-wrapper">
         <div class="il-system-info-content">
-            <span id="id_headline" class="il-system-info-headline">$headline</span>
-            <span id="id_description" class="il-system-info-body">$information</span>
+            <div id="id_headline" class="il-system-info-headline">$headline</div>
+            <div id="id_description" class="il-system-info-body">$information</div>
         </div>
     </div>
     <div class="il-system-info-actions">

templates/default/070-components/UI-framework/MainControls/_ui-component_system_info.scss

@@ -93,7 +93,13 @@ $il-standard-page-system-info-color-variant-breaking: darken($il-danger-color, 1
     flex-basis: auto;
     overflow: hidden;
 
-    span.il-system-info-headline {
+    // System Info Content may contain HTML, so we need to use divs instead of spans. with this, we display the content
+    // inline as it was using spans.
+    div.il-system-info-headline, div.il-system-info-body {
+      display: inline;
+    }
+
+    div.il-system-info-headline {
       text-transform: $il-standard-page-system-info-headline-transform;
       font-weight: $il-standard-page-system-info-headline-font-weight;
       margin-right: $il-margin-base-horizontal;