Implement accordion preservation action task lists

[djjuhasz]

Refs issue #986

Use the Bootstrap 5 accordion component to implement collapsable preservation task lists. The accordion component supports using a large button as a section header and closing open sections when a new section is opened.

The specific #986 features implemented are:

• Add a border around the preservation action header to hint that it is a control widget
• Make the entire preservation action header clickable to collapse or expand the related task list
• Change the preservation action header border and background colors on hover

[codecov]

Codecov Report

All modified and coverable lines are covered by tests ✅

Project coverage is 54.69%. Comparing base (155cce0) to head (00a91e9).
Report is 1 commits behind head on main.

Additional details and impacted files

@@            Coverage Diff             @@
##             main    #1103      +/-   ##
==========================================
+ Coverage   54.66%   54.69%   +0.02%     
==========================================
  Files         105      105              
  Lines        7696     7696              
==========================================
+ Hits         4207     4209       +2     
+ Misses       3229     3228       -1     
+ Partials      260      259       -1     

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

[djjuhasz]

Here's how it looks in action.
Screencast from 2025-01-14 17-53-00.webm

[jraddaoui]

Really nice, great work @djjuhasz!

[jraddaoui]

We should also target the focus state.

[djjuhasz]

Adding the focus state actually changes the way the highlighting works. The current behaviour is that the "
active" (i.e. open) section has a different look (purple header text, purple arrow icon, white background) then the closed sections (black text, black arrow icon, light gray background), which is different from the hover style above. Because the accordion button gets focus when it's clicked, and it doesn't lose focus until you click somewhere else, it effectively becomes the "active" style for the section unless you tab or change the focused element some other way. This change isn't bad, but I think it makes it a bit less obvious that preservation action header is an interactive element when another section is clicked.

Here's an screencast of how it the accordion works with the focus state added:
Screencast from 2025-01-15 10-19-54.webm

[jraddaoui]

I think you could set in the selector focus + not active. Not a big deal in any case, I just think it's nice to also have a visual hint when doing keyboard navigation.