Civi’s new accessible accordions use HTML’s <details><summary> which is an accessible HTML-native accordion pattern that doesn’t require Javascript. This has led to quite a few changes in civicrm.css - all within the accordion section.

If your theme uses Grenwich's civicrm.css and loads on top of it (as does Shoreditch and the Island) then you probably don't need to do anything. The changes with 5.69 will be reflected in a new version of civicrm.css loading underneath your theme.

If your theme replaces Grenwich's civicrm.css (as does, e.g. Finsbury Park & Aah) then you need to integrate the changes. These are separated below into

• Essential - do this or things break.
• Important - do this to avoid things looking odd (ie double icons)
• Recommended - do this to ensure you support future changes
• Quirks - also recommended, but maybe your theme handles them differently

Testing: If you want to see if your styling for accordions is impacted by markup changes, look at in 5.69 Advanced Search, Activity Search, Latest News Dashlet, Custom fieldsets on Contact Dashboard, Searchkit fieldset accordions and collapse regions generated by Form Builder. From 5.70, you can also check the Extensions table.

Related PRs: Bootstrap3.css change, main civicrm.css change, markup changes: 28415, 28421, 28430, 28441, 28449, 28473

Essential - two changes

Bootstrap 3, from before using <details> was normal, resets ‘summary’ to display:block which renders accordions unopenable. If you aren’t loading CiviCRM’s Bootstrap3 file but your own, then you need to add the following:

.crm-container summary {
  display: list-item;
}

If (and only if) your theme has a line like this:

.crm-container .collapsed .crm-accordion-body {
  display: none;
}

It needs to be focussed to not display:none on the new details element, so change the CSS to only target the two types of element this class

.crm-container div.collapsed .crm-accordion-body,
.crm-container fieldset.collapsed .crm-accordion-body {
  display: none;
}

Important - three changes

Because Civi’s new accessible accordions use HTML’s <details><summary> the browser adds their own icons. To match styling we’ve used the old css classnames with the new elements, which means two carets/triangles can appear:

Adding list-style: none; to the element added above removes the browser generated icons, so the theme icons can appear.

.crm-container summary {
  display: list-item;
  list-style: none;
}

It also removes them from elements where the markup has changed (see top accordion below):

So these need re-adding. Add

.crm-container details > summary:before

To the CSS for your closed accordion icon/state, and

.crm-container details[open] > summary:before

To the CSS for your open accordion icon/state.

Strongly recommended - styling

CiviCRM has two styles for its accordion headers (both of which you can see in the screengrabs above)
 - a dark background and white text with rounded corners, triggered by using the class .crm-accordion-header inside a `.crm-accordion-wrapper element (e.g. on the sub items on Advanced Search)

• a transparent background with dark text. , triggered by adding the class .crm-master-accordion-header to the header (e.g. on the header of Advanced Search)

If your theme matches this and has two styles in the same place as these two patterns then you will want to help <details><summary> adopt one of these styles when the classnames above aren’t being used. Partly this can be done by adding them to your styling for accordions, but to help this in the future, we’ve introduced two new utility classes: .crm-accordion-bold and .crm-accordion-light, matching each style respectively.

To integrate these, add to your description(s) of the first type of accordion header:

.crm-container .crm-accordion-bold > summary,
.crm-container details > .crm-accordion-header

For the hover state for the first type of accordion, add:

.crm-container .crm-accordion-bold > summary:hover,
.crm-container .crm-accordion-bold > summary:focus 

For the active state for the first type (visible only on the Advanced Search screen at present) , add:

.crm-container .crm-accordion-bold > summary.active

For the open state of the first type (e.g. if you want rounded corners for the header to have a flat bottom on open), add:

.crm-container details[open] > .crm-accordion-header

For the second type:

.crm-container .crm-accordion-light > summary

For its hover state, add:

`.crm-container .crm-accordion-light > summary:hover`,
`.crm-container .crm-accordion-light > summary:focus`

And so on.

Other quirks

Other than that, there’s a few quirks that can be fixed with further css:

Fixes a bug in Safari:

.crm-container summary::-webkit-details-marker {
  display: none;
}

Protects against some old JS accordions

.crm-container details .crm-accordion-body {
  display: block; 
}

Adds padding for nested <details> accordions

.crm-container details details {
  padding: 0 0.25rem; 
}