aria-expanded必须加在触发按钮上并用setattribute动态更新为字符串值，严格同步视觉状态；优先使用原生实现折叠展开。
aria-expanded 不是装饰性属性，它直接决定屏幕阅读器能否正确播报“这个按钮控制的内容现在是展开还是收起”。用错位置、更新不同步、值类型错误，都会导致读屏器静默或误报——用户根本不知道自己点了什么。
aria-expanded 必须加在触发按钮上，不是面板上
常见错误是把 aria-expanded 写在面板容器里：<div id="panel" aria-expanded="false">。这完全无效。该属性语义是“我（按钮）控制的内容是否展开”，不是“我（面板）自己是否展开”。屏幕阅读器只监听触发控件上的这个值。
<p>正确写法必须满足三点：</p>
<ul>
<li><code><button aria-expanded="false" aria-controls="panel">详情</button>
id="panel" 和 role="region"
id，否则 aria-labelledby 等反向关联无法建立必须用 setAttribute 动态更新，不能赋值给 ariaExpanded
element.ariaExpanded = true 是错的。这不是标准 DOM 属性，IE 和旧版 Safari 会忽略，Chrome 行为也不一致。唯一可靠方式是：
- 展开时：
button.setAttribute('aria-expanded', 'true') - 收起时：
button.setAttribute('aria-expanded', 'false') - 值必须是字符串
"true"或"false"，不能是 JavaScript 布尔值true/false，尤其在 Vue/React 中要显式转字符串
更新时机必须严格匹配视觉状态：先改 DOM（比如移除 hidden、切 CSS 类），再调 setAttribute；顺序反了，读屏器会提前播报“已展开”但内容还没出现。
CSS 不能监听 aria-expanded 变化，图标旋转得靠 class
[aria-expanded="true"] { transform: rotate(90deg); } 永远不生效。CSS 选择器不会响应 JS 对 aria-expanded 的修改。
正确做法是同步操作：
- JS 更新
aria-expanded后，立刻加/删一个视觉类：button.classList.toggle('is-open') - 所有样式（箭头方向、背景色、图标旋转）都绑定到
.is-open这类自定义 class 上 - 否则会出现“图标没转但读屏器说已展开”，或“图标转了但读屏器还报已折叠”
优先用 ，别手写
，别手写
如果你只是做基础折叠/展开，<details></details> 已内置完整可访问性：自动管理 aria-expanded、空格/回车触发、焦点流转、无需 JS 就能工作。手写一套等价逻辑，出错概率远高于收益。
真正需要手动控制 aria-expanded 的场景只有两个：组件交互复杂（如带动画、异步加载）、或必须兼容不支持 <details></details> 的老浏览器（IE 全系、Android 4.4 WebView）。其他情况，硬写就是给自己埋坑。
