Skip to content

Guidelines: Refactor accordion to use CollapsibleCard #77903

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
t-hamano merged 2 commits into from
May 5, 2026
Merged

Guidelines: Refactor accordion to use CollapsibleCard #77903

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
c2368b3
Guidelines: Refactor accordion to use CollapsibleCard
t-hamano May 1, 2026
58710e7
Guidelines: Update E2E tests for CollapsibleCard refactor
t-hamano May 4, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3 changes: 2 additions & 1 deletion package-lock.json
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

2 changes: 0 additions & 2 deletions routes/guidelines/components/block-guidelines.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,8 +1,6 @@
@use "@wordpress/base-styles/variables" as *;

.block-guidelines {
margin-top: $grid-unit-30;

.block-guidelines__icon {
display: flex;
align-items: center;
Expand Down
16 changes: 2 additions & 14 deletions routes/guidelines/components/guideline-accordion-form.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,14 +20,8 @@ import { store as noticesStore } from '@wordpress/notices';
*/
import { store as coreGuidelinesStore } from '../store';
import { saveGuidelines } from '../api';
import type { GuidelineAccordionFormProps } from '../types';

export default function GuidelineAccordionForm( {
slug,
contentId,
headingId,
descriptionId,
}: GuidelineAccordionFormProps ) {
export default function GuidelineAccordionForm( { slug }: { slug: string } ) {
const { setGuideline } = useDispatch( coreGuidelinesStore );
const { createSuccessNotice } = useDispatch( noticesStore );
const [ loading, setLoading ] = useState( false );
Expand Down Expand Up @@ -127,13 +121,7 @@ export default function GuidelineAccordionForm( {
};

return (
<form
id={ contentId }
aria-labelledby={ headingId }
aria-describedby={ descriptionId }
onSubmit={ handleSave }
className="guidelines__accordion-form"
>
<form onSubmit={ handleSave }>
<VStack spacing={ 4 }>
<DataForm
data={ data }
Expand Down
50 changes: 0 additions & 50 deletions routes/guidelines/components/guideline-accordion.scss
View file
Open in desktop

This file was deleted.

80 changes: 12 additions & 68 deletions routes/guidelines/components/guideline-accordion.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,88 +2,32 @@
* WordPress dependencies
*/
import {
Icon,
__experimentalText as WCText,
__experimentalHeading as Heading,
__experimentalVStack as VStack,
__experimentalHStack as HStack,
Card,
Button,
} from '@wordpress/components';
import { __, sprintf } from '@wordpress/i18n';
import { chevronDown } from '@wordpress/icons';
import { useState } from '@wordpress/element';
import { Card, CollapsibleCard } from '@wordpress/ui';

/**
* Internal dependencies
*/
import './guideline-accordion.scss';
import type { GuidelineAccordionProps } from '../types';

export default function GuidelineAccordion( {
title,
description,
children,
contentId,
headingId,
descriptionId,
}: GuidelineAccordionProps ) {
const [ isOpen, setIsOpen ] = useState( false );

return (
<Card className="guidelines__accordion">
<Button
className="guidelines__accordion-trigger"
onClick={ () => setIsOpen( ! isOpen ) }
aria-expanded={ isOpen }
aria-controls={ contentId }
aria-describedby={ descriptionId }
aria-label={
isOpen
? sprintf(
/* translators: %s: Guideline title */
__( 'Collapse %s guidelines' ),
title
)
: sprintf(
/* translators: %s: Guideline title */
__( 'Expand %s guidelines' ),
title
)
}
>
<HStack spacing={ 4 }>
<VStack spacing={ 1 }>
<Heading
id={ headingId }
className="guidelines__accordion-header"
level={ 2 }
size={ 15 }
weight={ 400 }
>
{ title }
</Heading>
<WCText
id={ descriptionId }
className="guidelines__accordion-description"
size={ 13 }
weight={ 400 }
variant="muted"
>
{ description }
</WCText>
</VStack>
<Icon
icon={ chevronDown }
className={
isOpen
? 'guidelines__accordion-chevron-up'
: 'guidelines__accordion-chevron-down'
}
/>
</HStack>
</Button>
<div hidden={ ! isOpen }>{ children }</div>
</Card>
<CollapsibleCard.Root>
<CollapsibleCard.Header>
<VStack spacing={ 1 }>
<Card.Title>{ title }</Card.Title>

@mirka mirka May 4, 2026

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Should we preserve the heading level?

Suggested change
<Card.Title>{ title }</Card.Title>
<Card.Title render={ <h2 /> }>{ title }</Card.Title>

@t-hamano t-hamano May 5, 2026

Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Unfortunately, this heading does not form valid HTML because it is rendered inside a button:

<div class="_[hash]__header [hash]__header"role="button">
  <div class="[hash]__header-content">
    <divclass="components-flex">
      <h2 class="_[hash]__text [hash]__heading _[hash]__p [hash]__heading-lg">Site</h2>
      <div id=":rd:" aria-hidden="true">
        <span class="components-truncate">Describe your site's purpose, goals, and primary audience.</span>
      </div>
    </div>
  </div>
  <div class="[hash]__header-trigger-positioner">
    <div class="[hash]__header-trigger-wrapper _[hash]__div [hash]__outset-ring--focus-parent-visible">
      <svg><path></path></svg>
    </div>
  </div>
</div>

I wish there were an option to wrap the button role with a heading...

@mirka mirka May 5, 2026

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Oh I see. I guess that makes sense though, since this is similar to a details/summary.

<CollapsibleCard.HeaderDescription>
<WCText variant="muted">{ description }</WCText>
</CollapsibleCard.HeaderDescription>
</VStack>
</CollapsibleCard.Header>
<CollapsibleCard.Content>{ children }</CollapsibleCard.Content>
</CollapsibleCard.Root>
);
}
3 changes: 2 additions & 1 deletion routes/guidelines/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -22,6 +22,7 @@
"@wordpress/dataviews": "file:../../packages/dataviews",
"@wordpress/notices": "file:../../packages/notices",
"@wordpress/block-library": "file:../../packages/block-library",
"@wordpress/blocks": "file:../../packages/blocks"
"@wordpress/blocks": "file:../../packages/blocks",
"@wordpress/ui": "file:../../packages/ui"
}
}
63 changes: 18 additions & 45 deletions routes/guidelines/stage.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -127,52 +127,25 @@ function GuidelinesPage() {
*/
/* eslint-disable jsx-a11y/no-redundant-roles */ }
<ul role="list" className="guidelines__list">
{ GUIDELINE_ITEMS.map( ( item ) => {
const contentId = `guidelines-${ item.slug }`;
const headingId = `guidelines-${ item.slug }-heading`;
const descriptionId = `guidelines-${ item.slug }-description`;

return (
<li
key={ item.slug }
className="guidelines__list-item"
{ GUIDELINE_ITEMS.map( ( item ) => (
<li
key={ item.slug }
className="guidelines__list-item"
>
<GuidelineAccordion
title={ item.title }
description={ item.description }
>
<div className="guidelines__accordion-item">
<GuidelineAccordion
title={ item.title }
description={
item.description
}
contentId={ contentId }
headingId={ headingId }
descriptionId={
descriptionId
}
>
{ item.slug ===
'blocks' ? (
<BlockGuidelines />
) : (
<GuidelineAccordionForm
slug={
item.slug
}
contentId={
contentId
}
headingId={
headingId
}
descriptionId={
descriptionId
}
/>
) }
</GuidelineAccordion>
</div>
</li>
);
} ) }
{ item.slug === 'blocks' ? (
<BlockGuidelines />
) : (
<GuidelineAccordionForm
slug={ item.slug }
/>
) }
</GuidelineAccordion>
</li>
) ) }
</ul>
{ /* eslint-enable jsx-a11y/no-redundant-roles */ }
<GuidelineActionsSection />
Expand Down
10 changes: 0 additions & 10 deletions routes/guidelines/types.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -42,9 +42,6 @@ export interface GuidelineAccordionProps {
title: string;
description: string;
children: ReactNode;
contentId?: string;
headingId?: string;
descriptionId?: string;
}

export interface GuidelinesRevision {
Expand All @@ -55,10 +52,3 @@ export interface GuidelinesRevision {
author: Array< { name: string } >;
};
}

export interface GuidelineAccordionFormProps {
slug: string;
contentId?: string; // Used for a11y.
headingId?: string; // Used for a11y.
descriptionId?: string;
}
Loading
Loading