Collapsible source headings

[brianjhanson]

Description

Adds a "collapsible" option to source headings when customizing.

When checked, headings will get an icon before the label and items beneath the heading can be collapsed.

If the current page is an ancestor of a collapsed section, the icon will flip colors to denote a collapsed item is active.

The state of each toggle will be stored in cookies so it will persist across page loads. The only downside is a minor flash of the expanded state.

Related issues

Fixes CMS-1339

[linear]

CMS-1339 Collapsible element index headings and/or accordion groups

[brianjhanson]

Related issues:
#13307 (comment)
#11340
#16065

[brandonkelly]

Nice!! Couple thoughts:

• The setting seems unnecessary? From an AX perspective it would be weird if some headings are collapsible and some aren’t.
• I don’t love the collapsed toggle styling’s inverted colors. Let’s just have it look the same, but upside-down, as when the heading is expanded.

[brianjhanson]

The setting seems unnecessary? From an AX perspective it would be weird if some headings are collapsible and some aren’t.

Updated, all headings are just collapsible now.

I don’t love the collapsed toggle styling’s inverted colors. Let’s just have it look the same, but upside-down, as when the heading is expanded.

The toggle will only appear this way when one of the items nested beneath it (and therefore invisible when collapsed) is selected. The goal was to provide some kind of "hey a thing under here is selected" indicator. We could also highlight the actual item that's collapsed, but that felt a little too strong to me.

I also remove these lines because a heading will always get a key now but let me know if you'd rather minimize the changes and totally remove the key for headings. I think they could be useful if we want to add settings to a heading in the future, but that might be a big if. Now that all headings are collapsible they don't necessarily need a key.