Skip to main content

Choice summary

Used in conjunction with a refine menu or other multi-select components, the choice summary component summarizes the refine choices already made from the refine menu and allows for filtering those refined selections.

Example

Group of choice summaries on a default theme

Best practices

Use in conjunction with refine menu or other multi-select component.

The choice summary grouping is built upon an unordered list where each list item contains an action trigger that provides for user interactivity.

Do

  • The labels used in the choice summary should match those used in the refine menu or related component.

Don’t

  • Do not repeat the category name in each label. For example, if you are presenting a list of "Apps", you might use choice summary labels (and refine menu labels) "Best-rated" and "Recommended for you" listed underneath the category "Apps", rather than "Best-rated apps" and "Apps recommended for you".

  • Do not use choice summary as a stand-alone component.

Also known as

Filter summary

Related

Refine menu

Action trigger

Accessibility

  • aria-live region: On clicking a choice summary with the “remove” feature, screen reader users will want to hear something like “Top paid apps removed.” With screen readers, silence after a user action – buttons in particular – is always a bad thing. If there is no page-redirect or refresh, MWF recommends using an aria-live region to announce the change (example for testing below).

  • aria-expanded: If the result of the “toggle” button is to show/hide content, then it should have aria-expanded=“false” on the button as the default state, and change dynamically to aria-expanded=“true” when users activate the button. Any newly visible content should appear after the button in the DOM.

  • aria-hidden: If the result of the “toggle” button is to show/hide content, then it should have aria-hidden=“true” on the dropdown as the default state, and change dynamically to aria-hidden=“false” when users activate the button.

Options

  • Glyphs: Glyphs are assigned using the action-trigger component inside each choice summary list item. Add the class c-glyph and the class for the desired glyph. There are only two glyph options available:

    • glyph-cancel

    • glyph-chevron-down

  • Dropdown: A dropdown is available for glyph-chevron-down which contains selectable options. This is done using a nested selection list. See the Default Choice Summary example below for more information.

Development

  • Schema definition: The choice-summary schema defines the acceptable configurations, requirements, and options for each component.

Code and preview

Default Choice summary

<ul class="c-group f-wrap-items">
    <li class="c-choice-summary">
        <a class="c-action-trigger c-glyph glyph-cancel" href="#" aria-label="Remove best rated apps">
            <span class="x-screen-reader">Remove best rated apps</span>
        </a>
        <span>Best rated apps</span>
    </li>
    <li class="c-choice-summary">
        <a class="c-action-trigger c-glyph glyph-cancel" href="#" aria-label="Remove new and noteworthy apps">
            <span class="x-screen-reader">Remove new and noteworthy apps</span>
        </a>
        <span>New and noteworthy</span>
    </li>
    <li class="c-choice-summary">
        <a class="c-action-trigger c-glyph glyph-cancel" href="#" aria-label="Remove most popular apps">
            <span class="x-screen-reader">Remove most popular apps</span>
        </a>
        <span>most popular apps</span>
    </li>
    <li class="c-choice-summary" aria-expanded="false">
        <a class="c-action-trigger c-glyph glyph-chevron-down" href="#" aria-label="Toggle productivity">
            <span class="x-screen-reader">Toggle productivity</span>
        </a>
        <span data-js-separator=":">Productivity</span>
        <ul id="examplelist1" role="menu" class="c-menu" aria-hidden="true">
            <li class="c-menu-item">
                <div class="c-radio">
                    <label class="c-label">
                        <input type="radio" id="c-radio-id-5a" name="example-5" value="value-5a">
                        <span>Choice 1</span>
                    </label>
                </div>
            </li>
            <li class="c-menu-item">
                <div class="c-radio">
                    <label class="c-label">
                        <input type="radio" id="c-radio-id-5b" name="example-5" value="value-5b">
                        <span>Choice 2</span>
                    </label>
                </div>
            </li>
        </ul>
    </li>
</ul>

Choice summary with aria-live region

<ul class="c-group f-wrap-items">
    <li class="c-choice-summary">
        <a class="c-action-trigger c-glyph glyph-cancel" href="#" aria-label="Remove top paid apps">
            <span class="x-screen-reader">Remove top paid apps</span>
        </a>
        <span>Top paid apps</span>
    </li>
    <li class="c-choice-summary">
        <a class="c-action-trigger c-glyph glyph-cancel" href="#" aria-label="Remove new and noteworthy">
            <span class="x-screen-reader">Remove new and noteworthy</span>
        </a>
        <span>New and noteworthy</span>
    </li>
    <li class="c-choice-summary">
        <a class="c-action-trigger c-glyph glyph-cancel" href="#" aria-label="Remove top free apps">
            <span class="x-screen-reader">Remove top free apps</span>
        </a>
        <span>Top free apps</span>
    </li>
    <li class="c-choice-summary">
        <a class="c-action-trigger c-glyph glyph-cancel" href="#" aria-label="Remove mobile">
            <span class="x-screen-reader">Remove mobile</span>
        </a>
        <span>Mobile apps</span>
    </li>
</ul>
<span id="foo" class="x-screen-reader" role="status" aria-live="polite"></span>

Preview with accessibility