UnoCSS 中增强 ARIA 属性与选择器的联动能力

在 UnoCSS 项目中，开发者提出了一项关于增强 ARIA 属性与选择器联动能力的建议。这项改进将使得开发者能够更灵活地基于 ARIA 状态属性来应用样式规则，特别是在处理交互式组件时。

当前限制

目前 UnoCSS 虽然支持 ARIA 属性变体（如 aria-expanded），但这些变体无法与同级选择器（peer）或组选择器（group）配合使用。这导致开发者无法基于相关元素的 ARIA 状态来动态调整样式。

例如，在实现一个可折叠的 accordion 组件时，开发者可能希望根据按钮的 aria-expanded 状态来旋转其内部的图标。按照当前 UnoCSS 的功能，开发者不得不使用更复杂的 CSS 选择器语法来实现这一效果。

改进建议

建议扩展 UnoCSS 的功能，使其支持 ARIA 属性变体与 peer 和 group 选择器的组合使用。这将带来以下优势：

1. 更清晰的代码结构：将样式逻辑与组件逻辑分离，提高代码的可维护性
2. 更好的可重用性：组件样式可以更灵活地适应不同的 ARIA 状态
3. 更直观的语法：使用类似 group-aria-expanded-rotate-180 的语法，比复杂的 CSS 选择器更易读

实现示例

改进后，开发者可以这样编写代码：

<button data-accordion-trigger aria-label="toggle button" 
    class="... group" ...>
    可折叠内容
    <span class="... group-aria-expanded-rotate-180"></span>
</button>

相比之下，当前实现相同效果需要更冗长的代码：

<button data-accordion-trigger aria-label="toggle button"
    class="... [&[aria-expanded=true]>span]-rotate-180" ...>
    可折叠内容
    <span data-trigger-icon
        class="ease-linear duration-300 ..."></span>
</button>

技术意义

这项改进将增强 UnoCSS 在无障碍网页开发中的能力。ARIA 属性是网页无障碍的重要标准，能够基于这些属性动态调整样式，意味着开发者可以更容易地创建既美观又符合无障碍标准的组件。

同时，这也符合 UnoCSS 的设计理念 - 通过简洁的类名语法提供强大的样式控制能力。扩展 ARIA 属性与选择器的联动，将使 UnoCSS 在处理动态状态变化时更加得心应手。

总结

这项改进虽然看似是一个小功能的扩展，但实际上将显著提升 UnoCSS 在构建现代、交互式、无障碍网页组件时的能力。它代表了工具链对开发者实际需求的响应，也体现了 UnoCSS 在简化前端开发流程方面的持续努力。