用途
Expandable Text 是一种内容管理模式，允许用户按需展开和折叠文本区块。该模式通过初始隐藏非必要内容、同时保持其可访问性，来提升可读性。
它通常用于管理冗长描述、文章摘要或有用但并非立即必要的补充细节，帮助用户高效浏览内容，同时维持干净、简洁的界面。
主要能力
- 按需显示或隐藏额外的文本内容。
- 初始隐藏非必要内容，同时保持其可访问性。
- 帮助用户高效浏览内容，维持干净、简洁的界面。
使用方式
何时使用
当你需要管理冗长内容、同时保持关键信息可见时，使用 Expandable Text。常见场景包括：
- 内容摘要——展示较长文章、产品描述或 FAQ 答案的简短预览。
- 减少页面杂乱——通过隐藏次要细节保持界面干净。
- 改善移动端可用性——在较小设备上高效管理屏幕空间。
- 渐进式披露——仅在需要时显示额外信息。
- 提升可读性——防止信息过载，同时保持细节可访问。
何时避免
- 关键信息——用户不应需要展开内容才能访问关键细节，例如价格、条款或重要警告。
- 频繁访问的内容——如果大多数用户都会展开内容，最好默认显示它。
- 需要预先展示完整内容时——避免隐藏能帮助用户快速做出知情决策的信息。
实现工作流
- 在复制示例前，确认该模式与问题和约束匹配。
- 从 references/pattern.md 中的结构和示例开始，然后选择最小可行的变体。
- 在叠加视觉打磨之前，先应用无障碍、性能和交互防护措施。
- 使用测试指南验证键盘、屏幕阅读器、响应式和失败场景下的行为。
无障碍防护措施
ARIA 属性：
- 按钮上必需的 ARIA 属性：aria-expanded="false"（动态更新）。
- aria-controls="id-of-content"，将按钮与可展开内容关联。
- 折叠时，可展开内容上使用 hidden 属性。
屏幕阅读器支持：
- 确保展开的内容能被屏幕阅读器正确播报。
- 如果内容更新需要被播报，使用 aria-live="polite"。
适用场景
- 文章、产品描述或 FAQ 答案的摘要预览。
- 需要隐藏次要细节以保持界面干净的页面。
- 屏幕空间有限的移动端界面。
- 需要渐进式披露额外信息的场景。
- 需要防止信息过载、同时保持细节可访问的内容。
限制
- 不适用于价格、条款或重要警告等关键信息。
- 不适用于大多数用户都会展开的内容。
- 不适用于需要预先展示完整内容以帮助用户快速决策的场景。
相关模式
- https://uxpatterns.dev/patterns/content-management/accordion
- https://uxpatterns.dev/patterns/content-management/modal
- https://uxpatterns.dev/patterns/content-management/tooltip
完整实现细节、示例和测试说明，请参见 references/pattern.md。
模式页面：https://uxpatterns.dev/patterns/content-management/expandable-text