10/UI/Panel and Item Listing dl, dt, dd html tags 43814

[catenglaender]

Issue

https://mantis.ilias.de/view.php?id=43814

Properties in UI Items (used in many places e.g the UI Panel) are not accessibly marked as definition pairs in the DOM.

Changes

• simplified DOM and php rendering to get the most clear, best practice DOM structure

<dl>
  <dt>Key 1</dt>
  <dd>Value 1</dd>
  <dt>Key 2</dt>
  <dd>Value 2</dd>
  <dt>Key 4</dt>
  <dd>Value 4</dd>
</dl>

• this is a huge problem for styling as a pair cannot be nested. This makes it hard for CSS to know which two columns belong together and can't be seperated by a line break. Therefor, I introduced a new layout tool which does the heavy lifting of layouting everything in individual columns of a CSS grid, but keeps pairs always together.

This is how it looks now:

Mobile

Some edge cases:

Outlook

• All key value properties in columns in ILIAS should probably be moved to use this DOM structure and layouting tool
• More property locations should be able to not render keys visibly (Status: offline) but still optionally serve them as aria labels.
• I will fix the Unit Tests if this approach is approved