aria-expanded必须加在触发按钮上而非面板，否则屏幕阅读器无法识别；需用setAttribute动态同步更新，并配合aria-controls和role="region"确保可访问性。
aria-expanded 必须加在 button 上，不能加在面板上
它只对触发控件有意义，加在 <div id="panel"> 里完全无效。屏幕阅读器根本不会读它的值——因为这个属性的语义是“我（按钮）当前控制的内容是否展开”，不是“我（面板）自己是不是展开”。
常见错误写法：<div id="panel" aria-expanded="false"> —— 这属于把属性放错位置，等于没写。
- 正确位置：
<button aria-expanded="false" aria-controls="panel">详情</button> - 对应面板必须有
id="panel"，且加上role="region" - 如果按钮没
id，aria-labelledby或其他反向关联就无法建立，建议始终给按钮加id
用 setAttribute 动态更新，别碰 ariaExpanded 属性名
element.ariaExpanded = true 是错的。这不是标准 DOM 属性，IE 和旧版 Safari 直接忽略，Chrome 也可能不兼容。唯一可靠写法是 element.setAttribute('aria-expanded', 'true')。
更新时机必须严格匹配真实视觉状态：先改 DOM 可见性（比如移除 hidden、设 max-height、切 CSS 类），再调 setAttribute；顺序反了，读屏器会播报“已展开”但内容还没渲染出来。
立即学习“前端免费学习笔记（深入）”；
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
- 展开时：
button.setAttribute('aria-expanded', 'true') - 收起时：
button.setAttribute('aria-expanded', 'false') - 不要依赖 React/Vue 的 state 更新自动同步——必须显式操作 DOM 属性
- 动画中尤其注意：等
transitionend或requestAnimationFrame后再设属性，避免中间态误判
别只靠 aria-expanded 驱动图标旋转
[aria-expanded="true"] { transform: rotate(90deg); } 不会生效。CSS 不监听 JS 对 aria-expanded 的修改，这个选择器永远不匹配。
正确做法是同步操作：JS 改完 aria-expanded，立刻加/删一个视觉类，比如 button.classList.add('is-open')，再用 .is-open 写 CSS。
- 图标旋转、箭头方向切换、背景色变化，都该绑定到自定义 class，不是 aria-expanded
- 否则会出现“图标没转但读屏器说已展开”，或“图标转了但读屏器还报已折叠”
- 检查工具推荐：Chrome DevTools 的 Accessibility pane，实时看属性值和节点可见性是否一致
优先用 <details><summary>，别硬手写
如果你只是做基础折叠/展开，<details> 已经内置完整可访问性：自动管理 aria-expanded、空格/回车触发、焦点流转、无需 JS 就能工作。Chrome 12+、Firefox 49+、Safari 6+、Edge 79+ 全支持。
硬套 div + aria-expanded 容易漏掉键盘操作或状态不同步，尤其是多个面板共存时，状态隔离稍有疏忽就会互相干扰。
- 需要自定义样式？在外层包个容器，用 CSS 覆盖
<summary>默认行为，但别破坏内部结构 - 必须用 JS 控制？确保每次 toggle 都检查真实 DOM 高度或
hidden属性，再设aria-expanded - 复杂点不在“怎么写”，而在“每次交互后，DOM 状态、ARIA 属性、CSS 类、焦点位置”四者是否全部咬合
