Primer DetailsComponent does not support opener customization from caret

[megan-arellano]

Hello! I have been working on an accessibility issue where the remediation was to use a DetailsComponent. The DetailsComponent replaced an chevron-right that, when clicked, reveals more text. To approximate the same functionality, I did component.with_summary(button: false) to get a standard details element with a caret opener. However, the standard caret does not match GitHub's progressive disclosure standard; instead, the opener should still be a chevron-right. As best I can tell, the DetailsComponent doesn't support this currently. Could the DetailsComponent support customizing the opener?

[lesliecdubs]

Thanks for filing this request!

I'd like to get Primer Design's confirmation that the Details component should technically not rely on the caret (as it currently does in Rails) as per this progressive disclosure advice - and should instead use a chevon icon pointed right. Is that correct?

Temporarily removing the rails label so this gets into the design queue first for assurance before eng starts.

[megan-arellano]

😅 Sorry about the delayed response @lesliecdubs !

I'd like to get Primer Design's confirmation that the Details component should technically not rely on the caret (as it currently does in Rails) as per this progressive disclosure advice - and should instead use a chevon icon pointed right.

^ Yes, this is what I believe should happen.

[megan-arellano]

@lesliecdubs Apologies again for letting this languish. Small nudge/I'm curious -- is there any other information I can provide? Will this issue be the best way for me to follow any decisions regarding this request?

[lesliecdubs]

@megan-arellano 👋 no other information is needed from my understanding, although Primer Design will be best positioned to weigh in on that when they have the chance. I can confirm this is in the team's inbox for further design review.

This issue should be the best place to stay updated.

cc @tallys

[mperrotti]

@megan-arellano - can we get a screenshot of what you're building so we can have more context?

[megan-arellano]

Hi @mperrotti, I was replacing an existing component with a Primer Details one. In the video below is the original behavior, where a user can click or tab on a right facing chevron to reveal more information about their classroom assignments.

https://github.com/primer/view_components/assets/109243577/1f2dc47d-7e87-4632-b1d9-af5bae2edbda

When replacing the existing container with the Details component, the chevron becomes a triangle pointed right, which is the violation of progressive disclosure as I understand it. This is shown in the video below.

https://github.com/primer/view_components/assets/109243577/cc9c5476-ab15-410b-8f56-2cf434fbf27c

[mperrotti]

Ok, I think I understand the issue now. I think we just need to update the Rails implementation to align with the progressive disclosure guidelines.

What do you think @jonrohan ?

[github-actions[bot]]

Hi! This issue has been marked as stale because it has been open with no activity for 180 days. You can comment on the issue or remove the stale label to keep it open. If you do nothing, this issue will be closed in 7 days.