fix: use details/summary for accordion COMPASS-9734#7653
Draft
paula-stacho wants to merge 3 commits intomainfrom
Draft
fix: use details/summary for accordion COMPASS-9734#7653paula-stacho wants to merge 3 commits intomainfrom
paula-stacho wants to merge 3 commits intomainfrom
Conversation
paula-stacho
changed the title
paula-stacho
changed the title
addaleax
approved these changes
Dec 15, 2025
| }); | ||
| }, | ||
| [setOpenRef] | ||
| ); |
Collaborator
There was a problem hiding this comment.
Aren't we basically reimplementing the behavior that details + summary have in plain HTML here? Not a bad thing, just wondering if we need this
Collaborator
Author
There was a problem hiding this comment.
This is allowing for a controlled version. I'm not sure if we actually need the controlled version though, I'll go through the use cases and see if this could be simplified.
paula-stacho
force-pushed
the
COMPASS-9734-2
branch
from
e54f147 to
7cc98f3
Compare
Contributor
There was a problem hiding this comment.
Pull request overview
This PR migrates the shared Accordion component to a native <details>/<summary> implementation and updates consuming UI components plus e2e/helpers/tests to match the new DOM structure and callback naming.
Changes:
- Refactors
packages/compass-componentsAccordion to render as<details>/<summary>and renames related props (setOpen→onOpenToggle,buttonTextClassName→summaryTextClassName). - Updates multiple feature packages (connection form, CSFLE tab, indexes, data modeling drawer, global writes) to use the new Accordion props.
- Updates e2e accordion interaction helpers and the Accordion unit test to reflect the new open-state mechanism.
Reviewed changes
Copilot reviewed 10 out of 10 changed files in this pull request and generated 7 comments.
Show a summary per file
| File | Description |
|---|---|
| packages/connection-form/src/components/connection-form.tsx | Switches advanced options accordion integration to onOpenToggle. |
| packages/connection-form/src/components/advanced-options-tabs/csfle-tab/csfle-tab.tsx | Updates CSFLE provider accordions to onOpenToggle. |
| packages/connection-form/src/components/advanced-connection-options.tsx | Updates prop typing and wiring to onOpenToggle. |
| packages/compass-indexes/src/components/create-index-form/create-index-form.tsx | Updates accordion telemetry hook to onOpenToggle. |
| packages/compass-global-writes/src/components/create-shard-key-form.tsx | Removes externally-controlled open state for the accordion. |
| packages/compass-e2e-tests/helpers/commands/expand-accordion.ts | Updates accordion expansion logic to click <summary> and check open. |
| packages/compass-e2e-tests/helpers/commands/connect-form.ts | Updates collapse wait condition to use the open attribute. |
| packages/compass-data-modeling/src/components/drawer/drawer-section-components.tsx | Renames styling prop to summaryTextClassName. |
| packages/compass-components/src/components/accordion.tsx | Core refactor to <details>/<summary> implementation. |
| packages/compass-components/src/components/accordion.spec.tsx | Updates unit assertions for the new DOM/open state. |
Comment on lines
+99
to
+100
| (event: React.SyntheticEvent<HTMLElement>) => { | ||
| const isOpen = (event.target as HTMLDetailsElement).open; |
Comment on lines
105
to
+107
| return ( | ||
| <> | ||
| <button | ||
| {...props} | ||
| <details open={defaultOpen} onToggle={handleToggle}> | ||
| <summary |
Comment on lines
112
to
116
| textClassName | ||
| )} | ||
| id={labelId} | ||
| type="button" | ||
| aria-expanded={open ? 'true' : 'false'} | ||
| aria-controls={regionId} | ||
| onClick={onOpenChange} | ||
| {...props} | ||
| > |
Comment on lines
+127
to
+131
| </summary> | ||
|
|
||
| {open && ( | ||
| <div role="region" aria-labelledby={labelId} id={regionId}> | ||
| {props.children} | ||
| </div> | ||
| )} | ||
| </> | ||
| <div role="region" aria-labelledby={labelId}> | ||
| {props.children} | ||
| </div> |
| await expandButton.click(); | ||
| const isOpen = await accordion.getAttribute('open'); | ||
|
|
||
| if (!isOpen) { |
Comment on lines
+303
to
+306
| const advancedAccordion = browser.$( | ||
| Selectors.ConnectionFormAdvancedToggle | ||
| ); | ||
| return (await advancedAccordion.getAttribute('open')) === null; |
Comment on lines
19
to
26
| it('should open the accordion on click', function () { | ||
| renderAccordion(); | ||
|
|
||
| expect(screen.getByTestId('my-test-id')).to.exist; | ||
| const button = screen.getByText('Accordion Test'); | ||
| userEvent.click(button); | ||
| expect(screen.getByText('Hello World')).to.be.visible; | ||
| const summary = screen.getByText('Accordion Test'); | ||
| userEvent.click(summary); | ||
| expect(summary.closest('details')).to.have.attribute('open'); | ||
| }); |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Description
Checklist
Motivation and Context
Open Questions
Dependents
Types of changes