CLP Q&A accordion display

[laflannery]

Status

[2024-07-25] [Fran] Comment to Amanda K and Dave P asking if this needs some UX love, and possible prioritization later on, although it's not a quarterly goal. Awaiting feedback label applied.

Description

While working on a different Q&A ticket Randi pointed out that Page specific Q&As are always displayed in accordions and Reusable Q&As can be displayed either in accordions or not. When these are combined, this is a bit odd. It would probably make more sense to always display these consistently when combined.

Questions to answer

• Should Reusable Q&As always be in accordions, regardless of if they are combined with Page specific ones?
  • If so, do we remove the ability to choose from Drupal?
• Should we actually add the ability for Page specific ones to change instead? this seems like a larger effort

Acceptance Criteria

• Testable_Outcome_X
• Testable_Outcome_Y
• Testable_Outcome_Z
• Requires design review
• Requires accessibility review

[FranECross]

@davidmpickett @aklausmeier This seems like something that would be nice to make consistent, although not a quarterly goal. Tossing it your way for opinions/possible UX love. cc @mmiddaugh

[aklausmeier]

I feel like @thejordanwood has put some previous thought behind this in previous ticket comments #14443 and possible not all of her work was implemented. Might be good for her to take a look.

[davidmpickett]

To better understand the specific question, it would be helpful to have an example of a page with the mixed use case. Do we know of one that exists?

Some things that make this question gnarly:

• Drupal entities sometimes have multiple valid FE formats (accordion or not accordion)
• Multiple content types use Q&A, so if we're going to make a change to Q&As, it needs to work for all those scenarios
• Despite having similar names, Reusable Q&A and Page-Specific Q&As are significantly different entities
• Each type of Q&A also has a related Q&A Group paragraph. Depending on the goal we might need to attend to the Group settings vs the Item Settings
• The answer might be different per content type

Reusable Q&As

• Reusable Q&As are Nodes
• Reusable Q&As are always nested inside a a Reusable Q&A Group
• Reusable Q&As are therefore pretty orderly

flowchart TD
  paragraphq_a_group>"Reusable Q&A Group<br>paragraph"]
  nodeq_a(("Reusable Q&A<br>node"))
  paragraphq_a_group -->|"q_as"|nodeq_a
  nodecampaign_landing_page(("Campaign Landing Page<br>node"))
  nodecampaign_landing_page -->|"clp_reusable_q_a"|paragraphq_a_group
  nodefaq_multiple_q_a(("FAQ page<br>node"))
  nodefaq_multiple_q_a -->|"q_a_groups"|paragraphq_a_group
  nodepage(("Benefits Detail Page<br>node"))
  nodepage -->|"content_block"|paragraphq_a_group
  nodesupport_resources_detail_page(("Resources and Support Detail Page<br>node"))
  nodesupport_resources_detail_page -->|"content_block"|paragraphq_a_group
style nodeq_a fill:#ffaacc,stroke:#333,stroke-width:4px;

Loading

flowchart LR
subgraph "Legend"
  node(("Node"))
  paragraph>"Paragraph"]
  end

Loading

Single page Q&As

• Single page Q&As are Paragraphs
• Single page Q&As are sometimes in a Single page Q&A Group and sometimes referenced directly without going through the group

flowchart TD
  paragraphq_a>"Page-Specific Q&A<br>paragraph"]
  nodecampaign_landing_page(("Campaign Landing Page<br>node"))
  nodecampaign_landing_page -->|"clp_faq_paragraphs"|paragraphq_a
  nodehealth_care_region_detail_page(("VAMC Detail Page<br>node"))
  nodehealth_care_region_detail_page -->|"featured_content"|paragraphq_a
  nodepage(("Benefits Detail Page<br>node"))
  nodepage -->|"featured_content"|paragraphq_a
  paragraphq_a_section>"Page-Specific Q&A Group<br>paragraph"]
  paragraphq_a_section -->|"questions"|paragraphq_a
  nodedocumentation_page(("CMS Knowledge Base Article<br>node"))
  nodedocumentation_page -->|"content_block"|paragraphq_a_section
  nodehealth_care_region_detail_page -->|"content_block"|paragraphq_a_section
  nodepage -->|"content_block"|paragraphq_a_section
style paragraphq_a fill:#ffaacc,stroke:#333,stroke-width:4px;

Loading

flowchart LR
subgraph "Legend"
  node(("Node"))
  paragraph>"Paragraph"]
  end

Loading

[thejordanwood]

Most of my thinking has been done around the Drupal experience of reusable v page-specific Q&As (Figma design for context). At the time I was working on the Drupal designs, it was discussed that both Q&As would appear the same on the FE to keep everything consistent. Although, we never talked through every scenario. I also didn't change the page-specific Q&A design very much because, as Dave said, Q&As get complex within Drupal.

Considerations:

• I do think this needs to be consistent on the FE.
• Option to remove accordions: The reusable Q&A groups have this checkbox. So it may be as simple as removing the checkbox if we want to remove accordion use for both types of Q&As.
• Option to add accordions: I would prefer that both types of Q&As could have accordions because some Q&A sections on the FE could potentially be long. I would need to think through the Drupal design more in that case.