docs(spindle-ui): add HeroCarousel design doc and tests and story #1651

yasuda-shin · 2025-11-21T07:40:04Z

Summary

HeroCarouselコンポーネントのDesign Docとテストとストーリーを追加しました。

HeroCarouselコンポーネントのdesign-docを作成
不足していたユニットテストを追加
- aria-label / aria-roledescription の付与確認
- コントロールボタンの aria-label とクリック時の動作（前/次、再生/停止）
- 再生/停止ボタンのラベル切り替え（再生中は「スライドを停止」、停止中は「スライドを再生」）
- フォーカス/ホバーで自動再生が停止することのイベント検証
- carouselList が空配列のときにレンダーされないことの検証
不足していたストーリーを追加
- 長いテキスト
- autoplay trueもいれたかったんですがなんかマウントの問題でできず...

Test plan

ユニットテストが成功することを確認
Storybookで新しいストーリーが正しく表示されることを確認
design-docの内容が適切であることを確認

changeset-bot · 2025-11-21T07:40:08Z

⚠️ No Changeset found

Latest commit: 4d1d48d

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

This PR includes no changesets

When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types

Click here to learn what changesets are, and how to add one.

Click here if you're a maintainer who wants to add a changeset to this PR

github-actions · 2025-11-21T07:43:19Z

Visit the preview URL for this PR (updated for commit 4d1d48d):

https://ameba-spindle--pr1651-docs-hero-carousel-4xud09po.web.app

_{(expires Sat, 14 Feb 2026 07:45:12 GMT)}

_{🔥 via Firebase Hosting GitHub Action 🌎}

_{Sign: e7521619a2dd5c653490c8246e81ec2a5c8f1435}

reg-suit · 2025-11-21T07:45:00Z

reg-suit detected visual differences.

Check this report, and review them.

🔴 Changed	⚪ New	🔵 Passing
5	1	251

How can I change the check status?

If reviewers approve this PR, the reg context status will be green automatically.

tokimari · 2026-01-09T00:53:14Z

storybook previewの期限切れちゃった場合retryできるんですっけ・・👀 （すみません）

yasuda-shin · 2026-01-09T01:27:12Z

そですね。ジョブの再実行で再生成されまっせ。しました。

tokimari

大変遅くなりました 🙏

tokimari · 2026-01-09T02:51:26Z

packages/spindle-ui/src/HeroCarousel/design-doc.md

+```tsx
+import { HeroCarousel } from '@openameba/spindle-ui';
+
+const carouselList = [
+  { title: '記事A', imageUrl: 'https://example.com/a.webp', link: 'https://example.com/a' },
+  { title: '記事B', imageUrl: 'https://example.com/b.webp', link: 'https://example.com/b' },
+  { title: '記事C', imageUrl: 'https://example.com/c.webp', link: 'https://example.com/c' },
+];
+
+<HeroCarousel carouselList={carouselList} autoplay={false} />;
+```


nits. 2件以上で使ってね、という話なのでサンプルコード書くまででもないかも？w

いちお最小限のコード例があると props の想定が分かったりするのでサンプルコードあってもいいかなと思いつつ。

tokimari · 2026-01-09T02:53:25Z

packages/spindle-ui/src/HeroCarousel/design-doc.md

+### DO NOT
+
+- 1件のみ、あるいは0件のリストで使用しない（1件のみはカルーセルの意図に合わず、0件は描画されません）
+- 画像の代替テキストに意味のある文言を重ねない（本コンポーネントではタイトルが視覚的ラベルとなるため、画像は `alt=""` で装飾扱い）


「画像の代替テキストに意味のある文言を重ねない」部分の日本語の意味がよくわからなかったです・・！ 🙏 🙏

imo. 画像下部のテキストを視覚的ラベルにする（視覚的に表示する）のはそれはそうなので問題ないですが、

画像は画像で代替テキストがあってももんだいないのでは？むしろ良いことでは？と思いました 💭

上記画像例のイメージ：

alt: 緑のAbemaくんの周りに緑の系のようなラインが絡みつくように伸びている

キャプション：1. 生きたコンテンツをつむぐ

この場合、altは画像に表示されている内容を説明しているので、キャプションとは異なる意味で有用です。

と思ったらCarouselItemがalt指定できないのか〜〜〜理解 😂
https://github.com/openameba/spindle/blob/main/packages/spindle-ui/src/HeroCarousel/HeroCarouselItem.tsx#L41
もしかするとamebaでの事例的に入稿物が多くてそうなっちゃったんですかねぇ

追加機能で指定できるようにしたいなぁ（別でいいんですが）

画像に意味のある代替テキストを付与しない（タイトルがリンクラベルとなるため、画像はalt=""で装飾扱い）

って感じの言い回しにしてみました。
経緯わからないんですが、altそうなんですよねー

tokimari · 2026-01-09T02:58:13Z

packages/spindle-ui/src/HeroCarousel/design-doc.md

+
+- 1件のみ、あるいは0件のリストで使用しない（1件のみはカルーセルの意図に合わず、0件は描画されません）
+- 画像の代替テキストに意味のある文言を重ねない（本コンポーネントではタイトルが視覚的ラベルとなるため、画像は `alt=""` で装飾扱い）
+- 極端に長いタイトルを前提にしない（2行以上は省略表示されます）


目安の文字数を記載しているとより親切だなと思いました 🙌

tokimari · 2026-01-09T03:58:43Z

packages/spindle-ui/src/HeroCarousel/design-doc.md

+- [適切なフォーカス順序にする](https://a11y-guidelines.ameba.design/2/4/3/)
+  - [ ] フォーカス移動は視覚順序と一致している
+- [フォーカスを見えるようにする](https://a11y-guidelines.ameba.design/2/4/7/)
+  - [ ] フォーカスリングはコントラスト十分なアウトラインで可視化されている


コントラスト十分な

imo. もう少し明確なほうがよいかもです。十分とは？

tokimari · 2026-01-09T03:58:53Z

packages/spindle-ui/src/HeroCarousel/design-doc.md

+- [フォーカスを見えるようにする](https://a11y-guidelines.ameba.design/2/4/7/)
+  - [ ] フォーカスリングはコントラスト十分なアウトラインで可視化されている
+- [ターゲットのサイズを理解する](https://a11y-guidelines.ameba.design/2/5/5/)
+  - [ ] コントロールのタップ領域はおおむね44×44px以上を確保している


おおむね？w

yasuda-shin

ご指摘いただいた箇所諸々修正してみました〜

yasuda-shin · 2026-01-15T07:21:33Z

packages/spindle-ui/src/HeroCarousel/design-doc.md

+```tsx
+import { HeroCarousel } from '@openameba/spindle-ui';
+
+const carouselList = [
+  { title: '記事A', imageUrl: 'https://example.com/a.webp', link: 'https://example.com/a' },
+  { title: '記事B', imageUrl: 'https://example.com/b.webp', link: 'https://example.com/b' },
+  { title: '記事C', imageUrl: 'https://example.com/c.webp', link: 'https://example.com/c' },
+];
+
+<HeroCarousel carouselList={carouselList} autoplay={false} />;
+```


いちお最小限のコード例があると props の想定が分かったりするのでサンプルコードあってもいいかなと思いつつ。

yasuda-shin · 2026-01-15T07:26:42Z

packages/spindle-ui/src/HeroCarousel/design-doc.md

+### DO NOT
+
+- 1件のみ、あるいは0件のリストで使用しない（1件のみはカルーセルの意図に合わず、0件は描画されません）
+- 画像の代替テキストに意味のある文言を重ねない（本コンポーネントではタイトルが視覚的ラベルとなるため、画像は `alt=""` で装飾扱い）


画像に意味のある代替テキストを付与しない（タイトルがリンクラベルとなるため、画像はalt=""で装飾扱い）

って感じの言い回しにしてみました。
経緯わからないんですが、altそうなんですよねー

yasuda-shin requested review from herablog, tatz012, tokimari and yu-3in November 21, 2025 07:40

yasuda-shin self-assigned this Nov 21, 2025

yasuda-shin force-pushed the docs/hero-carousel branch from 821fa50 to fa131c5 Compare November 21, 2025 07:42

yasuda-shin force-pushed the docs/hero-carousel branch 5 times, most recently from bd883c2 to 53e808e Compare November 21, 2025 08:25

docs(spindle-ui): add HeroCarousel design doc and tests and story

0c538d2

yasuda-shin force-pushed the docs/hero-carousel branch from 53e808e to 0c538d2 Compare January 9, 2026 01:20

tokimari reviewed Jan 9, 2026

View reviewed changes

docs(spindle-ui): improve clarity in HeroCarousel design doc

4d1d48d

yasuda-shin commented Jan 15, 2026

View reviewed changes

docs(spindle-ui): add HeroCarousel design doc and tests and story #1651

Are you sure you want to change the base?

docs(spindle-ui): add HeroCarousel design doc and tests and story #1651

Uh oh!

Conversation

yasuda-shin commented Nov 21, 2025

Summary

Test plan

Uh oh!

changeset-bot bot commented Nov 21, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

⚠️ No Changeset found

Uh oh!

github-actions bot commented Nov 21, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

reg-suit bot commented Nov 21, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

tokimari commented Jan 9, 2026

Uh oh!

yasuda-shin commented Jan 9, 2026

Uh oh!

tokimari left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

yasuda-shin left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

changeset-bot bot commented Nov 21, 2025 •

edited

Loading

github-actions bot commented Nov 21, 2025 •

edited

Loading

reg-suit bot commented Nov 21, 2025 •

edited

Loading