[BUG] Summary List has alignment issues, extra border in some cases

[lewisdorigo]

Description of the issue

In some cases, for example, when one or more Summary Cards are used as the answer within a Summary List:

• An extra bottom border shows on the ds_summary-list__keyelement.
• The ds_summary-list__actions is not aligned correctly to the top of the row.

This appears to be cased because the default value vertical-align (baseline).

Adding:

@include ds_media-query(medium) {
    .ds_summary-list__key,
    .ds_summary-list__value,
    .ds_summary-list__actions {
         vertical-align: top;
    }
}

Resolves the issue.

Steps to reproduce the issue

<ol class="ds_summary-list" id="summary-0">
    <li class="ds_summary-list__item" id="summary-0-item-0">
        <div class="ds_summary-list__key" id="summary-0-item-0-question">Do you have any treatments or therapies?</div>
        <div class="ds_summary-list__value" id="summary-0-item-0-value">
            <span class="visually-hidden">Your answer is: </span>
            <div class="ds_summary-list__answer">
                <p>Yes</p>
            </div>
        </div>
        <div class="ds_summary-list__actions" id="summary-0-item-0-actions">
            <ul class="ds_summary-list__actions-list">
                <li class="ds_summary-list__actions-list-item">
                    <a href="#" class="ds_link" aria-describedby="summary-0-item-0-value">
                        Change
                        <span class="visually-hidden">
                            your answer for:
                            <q>Do you have any treatments or therapies?</q>
                        </span>
                    </a>
                </li>
            </ul>
        </div>
    </li>
    <li class="ds_summary-list__item" id="summary-0-item-1-0">
        <div class="ds_summary-list__key" id="summary-0-item-1-0-question">Treatment</div>
        <div class="ds_summary-list__value" id="summary-0-item-1-0-value">
            <span class="visually-hidden">Your answer is: </span>
            <div class="ds_summary-card">
                <div class="ds_summary-card__header"><strong class="ds_summary-card__header-title">Treatment</strong>
                    <ul class="ds_summary-card__actions-list"></ul>
                </div>
                <div class="ds_summary-card__content">
                    <ul class="ds_summary-list">
                        <li class="ds_summary-list__item">
                            <div class="ds_summary-list__key">Treatment name</div>
                            <div class="ds_summary-list__value"><span class="visually-hidden">Your answer is:</span>
                                <div class="ds_summary-list__answer">
                                    <p>Treatment</p>
                                </div>
                            </div>
                        </li>
                        <li class="ds_summary-list__item">
                            <div class="ds_summary-list__key">Frequency (optional)</div>
                            <div class="ds_summary-list__value"><span class="visually-hidden">Your answer is:</span>
                                <div class="ds_summary-list__answer">
                                    <p>123</p>
                                </div>
                            </div>
                        </li>
                        <li class="ds_summary-list__item">
                            <div class="ds_summary-list__key">Duration (optional)</div>
                            <div class="ds_summary-list__value"><span class="visually-hidden">Your answer is:</span>
                                <div class="ds_summary-list__answer">
                                    <p>123</p>
                                </div>
                            </div>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
        <div class="ds_summary-list__actions" id="summary-0-item-1-0-actions">
            <ul class="ds_summary-list__actions-list">
                <li class="ds_summary-list__actions-list-item">
                    <a href="#" class="ds_link" aria-describedby="summary-0-item-1-0-value">
                        Change
                        <span class="visually-hidden">
                            your answer for:
                            <q>Treatment</q>
                        </span>
                    </a>
                </li>
            </ul>
        </div>
    </li>
    <li class="ds_summary-list__item" id="summary-0-item-2">
        <div class="ds_summary-list__key" id="summary-0-item-2-question">
            Do any of your treatments or therapies cause any side effects?
        </div>
        <div class="ds_summary-list__value" id="summary-0-item-2-value">
            <span class="visually-hidden">Your answer is: </span>
            <div class="ds_summary-list__answer">
                <div>
                    <p>No</p>
                </div>
            </div>
        </div>
        <div class="ds_summary-list__actions" id="summary-0-item-2-actions">
            <ul class="ds_summary-list__actions-list">
                <li class="ds_summary-list__actions-list-item">
                    <a href="#" class="ds_link" aria-describedby="summary-0-item-2-value">
                        Change
                        <span class="visually-hidden">
                            your answer for:
                            <q>Do any of your treatments or therapies cause any side effects?</q>
                        </span>
                    </a>
                </li>
            </ul>
        </div>
    </li>
</ol>

Screenshots

Environment

• Operating system: macOS 14.6.1
• Browser: Safari
• Browser version: 17.6

[dkindnes]

Hi @lewisdorigo

It's not currently intended to nest summary cards (or summary lists) within a summary list.

If using summary cards to group similar types of things then this can be placed under/above other summary lists with an appropriate heading.

See the following example:

You might be interested to know that the summary list page and examples have been updated. This includes simplifying what screenreaders announce for the action buttons, as well as showing how to have a list of answers for a single question and how to include multiple action buttons for a question.

[dkindnes]

The SGDS team are currently looking at designing nested summary lists so this will hopefully be included in a future release.