refactor!: AccordionPanel を Accordion にrename

[AtsushiM]

関連URL

#6255 (comment)
#6255 (comment)

概要

AccordionPanelをDetails/Summaryにリネームし、マークアップをul > li > Section構造に変更します。

HTMLの<details>/<summary>要素に合わせた命名で、アコーディオンの意味をより明確にします。

変更内容

コンポーネントのrename

• AccordionPanel → Details
• AccordionPanelItem → DetailsItem
• AccordionPanelContent → DetailsContent
• AccordionPanelTrigger → Summary

マークアップ構造の変更

// Before
<div role="presentation">  // AccordionPanel
  <section>                // AccordionPanelItem
    <Heading><button /></Heading>  // AccordionPanelTrigger
    <div />                        // AccordionPanelContent
  </section>
</div>

// After
<ul>                       // Details
  <li>                     // DetailsItem
    <Section>              // shr-contents (display: contents相当)
      <Heading><button /></Heading>  // Summary
      <div />                        // DetailsContent
    </Section>
  </li>
</ul>

詳細な変更

• ディレクトリ名: AccordionPanel/ → Accordion/
• ファイル名、コンポーネント名、Context名の変更
• CSS class名: smarthr-ui-AccordionPanel-* → smarthr-ui-Details-*
• Details: <div role="presentation"> → <ul>
• DetailsItem: <Section> → <li><Section className="shr-contents" /></li>
• src/index.tsのexport更新
• Storyファイル名の更新
• テストファイルの更新

命名の理由

HTMLの<details>/<summary>要素をベースとした命名です。
複数のアイテムを持つことを表現するため、DetailsItem も追加しています。

プロダクト側で対応が必要な事項

以下のimportと使用箇所を変更してください。

// Before
import {
  AccordionPanel,
  AccordionPanelItem,
  AccordionPanelContent,
  AccordionPanelTrigger,
} from 'smarthr-ui'

// After
import {
  Details,
  DetailsItem,
  DetailsContent,
  Summary,
} from 'smarthr-ui'

使用箇所も同様に変更が必要です。

// Before
<AccordionPanel>
  <AccordionPanelItem name="item-1">
    <AccordionPanelTrigger>タイトル</AccordionPanelTrigger>
    <AccordionPanelContent>内容</AccordionPanelContent>
  </AccordionPanelItem>
</AccordionPanel>

// After
<Details>
  <DetailsItem name="item-1">
    <Summary>タイトル</Summary>
    <DetailsContent>内容</DetailsContent>
  </DetailsItem>
</Details>

確認方法

• pnpm ui lintが通ることを確認
• Storybookで各Detailsコンポーネントが正しく動作することを確認
• マークアップがul > li > section構造になっていることを確認

[pkg-pr-new]

Open in StackBlitz

npm i https://pkg.pr.new/@smarthr/smarthr-ui-charts@6255

npm i https://pkg.pr.new/smarthr-ui@6255

commit: 90e0d2c

[Qs-F]

名称変更に向けてだと思う&既に話し合い済みだった気もするんですが、改めてコード見てるとsmarthr-uiの基本方針に合わせるとSummary/Detailsになるんじゃないか…？という気がしてきました

[AtsushiM]

あー、複数であることを表せねぇかなぁと思ってたんですがそれな気がしてきたぞ...
https://developer.mozilla.org/ja/docs/Web/HTML/Reference/Elements/details

検証してみます

[AtsushiM]

色々検討してみました。

  ✅ より良い代替案（案3）

  details/summaryを使わず、現在の実装（既にpush済み）を維持：

  <ul>
    <li>
      <Section className="shr-contents">
        <Heading>
          <button aria-expanded="..." aria-controls="...">タイトル</button>
        </Heading>
        <div id="..." role="region" aria-labelledby="...">コンテンツ</div>
      </Section>
    </li>
  </ul>

  理由:
  - ✅ WAI-ARIA Accordionパターンに完全準拠
  - ✅ 見出しとボタンの関係が明確
  - ✅ 実績のある実装パターン
  - ✅ スクリーンリーダーでの挙動が安定

  最終推奨

  details/summary要素の導入は見送り、既にpushした構造を維持すべきです。

  理由：
  - ネイティブHTML要素の利用は魅力的だが、複雑なアコーディオンUIではa11y的な懸念がある
  - WAI-ARIAパターンの方が、支援技術での挙動が予測可能で安定している

  いかがでしょうか？現在のpush済みの実装を維持しますか？

• details > summaryパターンとは構造が違うこと
• WAI-ARIAにAccordionパターンが存在すること
  • 実際の構造は AccordionGroup > AccordionPanel > ...

となっていたので個人的には

• AccordionPanel -> AccordionGroup
• AccordionItem -> Accordion
• 他そのまま

とかどうでしょう？