Make preservation task cards expandable

[djjuhasz]

Fixes #1077.

• Show only the first line of a multi-line task note by default
• Show an icon on task cards with multi-line notes to toggle display of the subsequent lines of the note
• Add css animations for the expansion and contraction of the additional note content

[codecov]

Codecov Report

All modified and coverable lines are covered by tests ✅

Project coverage is 54.71%. Comparing base (00d95d8) to head (b70170c).

Additional details and impacted files

@@            Coverage Diff             @@
##             main    #1107      +/-   ##
==========================================
- Coverage   54.72%   54.71%   -0.02%     
==========================================
  Files         105      105              
  Lines        7696     7696              
==========================================
- Hits         4212     4211       -1     
- Misses       3226     3228       +2     
+ Partials      258      257       -1     

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

[djjuhasz]

This commit hides the second and subsequent lines of a multi-line note (i.e. a note with multiple line break character) by default. When the expand icon is clicked the additional lines of the note are displayed.

To test this feature you will need to have a task with a multi-line note. I manually inserted a multi-line note into the database to test locally.

Here's how it looks in action:
Screencast from 2025-01-20 18-04-51.webm

[fiver-watson]

Hi @djjuhasz,

Looking good! Though I do have a few feedback thoughts to share, but given that we don't actually have many tasks with long or multi-line text at the moment, it could always wait for a future iteration if we prefer. Anyway, some thoughts:

• First, it's hard to tell from a short vid, but is the caret direction the opposite of the larger Preservation Actions one above it? Want to ensure that they are consistent. Seems to me like the caret should point down when there is something to expand (click to show more below), and up when you want to click to collapse it again
• Also, with this specific example in particular (full sentence and linebreak before the hidden text), the ONLY way you can tell there's anything to expand is the little caret icon, which is a bit hard to see. I wonder if:
  • we want to add the same hover and click effects we added to the main Preservation Actions section, for tasks that have additional content below the fold?
  • there's some way, like a "more" link or a set of ellipses or something, we want to indicate in the text area that there might be more to see?

Thanks! Thoughts and alternatives welcome :)

[djjuhasz]

@fiver-watson (cc @jraddaoui @mcantelon) I've implemented your feedback by making the entire preservation task card clickable to expand the card and show additional lines of the task note.

Screencast.

Unfortunately making the preservation task card clickable has some problems that I'm struggling to resolve.

Problems

I first attempted to make the preservation tasks an accordion component (like I've done with the preservation actions) with each card being an expandable accordion section. The accordion component doesn't work as well for preservation tasks though because many of the tasks won't have additional text, so the accordion section "body" will be empty. Another issue is layout — the accordion section header and body are two different "boxes" (divs) so there will be a visible line between the first line of the note (header), and the subsequent lines (body).

My second attempt was to make each preservation task card an HTML button. Clicking the button it expands the preservation task to show the additional text. The problem is that it's awkward mixing tasks that are buttons with ones that are just HTML "div" elements (the default). I think the main issue with mixing HTML element types is accessibility — for instance you can't tab to divs (they aren't interactive), but you can tab to buttons. Other issues about using divs vs. buttons are described here: https://theadminbar.com/accessibility-weekly/divs-are-not-buttons/.

My third attempt was making every preservation task card a button, whether it had additional text or not. If the task has only one line of output then I disabled the button so it's not clickable. Disabled buttons don't change color on hover so this strategy works visually, but I worry about the accessibility again. Having a bunch of disabled buttons on the page may be confusing if you are using a screen reader. This approach does solve the tabbing problem as you can still tab to the disabled buttons (if we use the BS "disabled" class).

Possible solutions (I can think of)

1. Go with a mix of buttons (expandable cards) and divs (not expandable) and don't worry about not being able to tab to the divs. I think this is going to get really weird when there are 3 or 4 expandable cards interspersed among a bunch of expandable buttons.
2. Go with all buttons, and try and mitigate possible confusion with aria-labels or other hints.
3. Add an "expand" button only to expandable cards, but don't make it the whole card. We could experiment with different sizes and layouts for the expand button.

I think using an accordion component is out because it really assumes that every section will have a header and body content unless we always put some sort of additional content into the tasks.

Call to action

I'm curious if any of you can think of any better solutions than the three that I've come up with.

[jraddaoui]

@djjuhasz It does feel rare to have those expandable sections inside expandable sections. I think the accordion border issue could be fixed overwriting that border with classes/css but I don't know how that would work in terms of accessibility, being inside of another accordion. Another option is to use tabindex="0" in the divs to make them "tabbables", then make them expandable or not based on the content.

In general, if you ask me, I don't think it's as important to make the whole card clickable as with the preservation actions, I think just the button would be okay and it would make sense to only allow tabbing to those with extra content/button. If you are inside the tasks you are probably looking for something, I think it may be enough to just have an obvious button where is needed, but I'd wait to hear from @fiver-watson about that.