@Febakke
Check with @oddvernes / @Barsnes if we need to do something in code to support this

Proof of concept was created for Figma, and presented for review in the start of October.

The component could be set up as a single DL-list-item.

Combine one or more DL-list-item in a group to recreate what would be the DL-element with content.

Styling using auto-layout, minimum-width, and size-tokens allow the component to be responsive and switch from two columns to one for small screens.

If you want the indent for the dd-element when in single column you would keep the left-padding on the element as is, however if you want to have it left-aligned fully, you would change this to 0 and set the gap for the list-item to 16px.

In code the dl-list may be mostly built using css, however some of the options the dl-list allow in code is somewhat difficult to to build into the Figma component, like allowing multiple dt-elements before a single dd-element, or a single dt-element with multiple dd-elements (if we should, how many should we support?). another thing that may be easy to do using javascript and/or css is to automate the insertion of colon after the dt-element text only when presented on the same line as the dd-element.

There may be accessibility issues with the dl-element, we need to research this a bit.

• If there are any such issues, we can still make the component but use more generic html-elements, so that we get the component either way.

WCAG

• wcag 2.2 mention dl as part of a valid technique for 1.3.1 unusual words: https://www.w3.org/TR/WCAG20-TECHS/H40.html , this teqnicue was introduced for wcag 2.0 (?) and is still mentioned.

HTML-spec

• https://html.spec.whatwg.org/multipage/grouping-content.html#the-dl-element

Support in Jaws and VO, source is updated in 2021, and may not be correct:

• dl Seem to be well supported in Jaws, but there may be something still not fully supported in VO for iOS
• dt and dd may be lacking for support in all screen readers

Responsive description list with summary list built in.
We (internt) at Brønnøysundregistrene have created/are working on a description list in our new designsystem: Spire. Our designsystem is not yet on an open platform, so I'm sharing some screenshots here, in case some of it can be an an inspiration for Designsystemet.no description list. (it has not been fully tested yet. It is only tested in storybook and not in any applications yet.)

In HTML-tag we use dl= descriptionlist, dt= descriptionterm, dd= descriptiondetails, used on second and third coloum,

We have created a description list that have multiple options when it comes to styling. The description list can be displayed either in columns or in rows. It has also a option to show a third colom (summary), which in this example is a date. Here is a picture which shows different use of the component:

Responsiveness
DescriptionList is responsive and automatically adjusts the layout based on the available space.

We have also made som rules when it comes to colon and indentation:
- Colon: Colon should only be used when the term and description are next to each other horizontally in the row view. Developers do not need to think about this as the logic is already implemented in the code.
- Indentation: The need for indentation is very context dependent. However, in Spire we follow a general rule that DescriptionLists which has limited space, where the description appear below the term, should use indentation. The only exception is the DescriptionLists in columns where the description is below the term. It does not need a indentation. (See picture below for a better understanding)

Flexible component:
Description list is made to be as flexible as possible for our users. So ur developers can either get it out of the box so they don't have to think about styling. Or they can use the descriptionlistelement. Which is used if you need more control over the structure, content or styling of a DescriptionList, you can use DescriptionListElement with DescriptionnListItem, DescriptionListTerm and DescriptionDetails.

For more information just contact us (remember: this component is not finished/tested yet) :)