由Adobe提供的Reaction Spectrum

我们很高兴宣布推出Reaction Spectrum，这是一个库和工具的集合，可以帮助您构建自适应的、可访问的和健壮的用户体验。在Github上看看这个！Reaction Spectrum包括三个库：

Reaction Aria-一个Reaction钩子库，它为您的设计系统提供可访问的UI原语。

状态反应-反应钩子库，为设计系统提供跨平台的状态管理和核心逻辑。

♿️Accessible-可访问性和行为是根据WAI-ARIA创作实践实现的，包括全屏阅读器和键盘导航支持。所有组件都已在各种屏幕阅读器和设备上进行了测试，以确保所有用户都能获得最佳体验。

📱自适应-所有组件都设计为使用鼠标、触摸和键盘交互。它们采用响应式设计原则构建，无论设备是什么，都能提供出色的体验。

🌍国际版-开箱即可支持30多种语言，支持从右到左的语言、日期和数字格式等。

🎨可自定义反应光谱组件支持自定义主题，并自动适应黑暗模式。为了获得更好的可定制性，您可以使用自己的DOM结构构建您自己的组件，并使用Reaction Aria和Reaction Status挂钩来提供行为、可访问性和交互。

Adobe是一家拥有数千名工程师的大公司，致力于数百种产品，这些产品都必须满足UI一致性、可访问性、国际化和可用性的高标准。在我们的规模上达到这些标准一直是一个挑战，我们很高兴能与社区分享我们所学到的东西，并共同提高Web应用程序的标准。

设计系统现在比以往任何时候都更流行，许多大大小小的公司都在从头开始实现自己的组件库。像Reaction这样的现代视图库允许团队比以往任何时候都更容易地构建和维护这些组件，但是通过跨多种设备工作的交互以完全可访问的方式来做到这一点仍然非常困难。这对每家公司来说意味着数百万美元的投资，因为它们重复了本可以共享的工作。

虽然每个设计系统都是独一无二的，但组件之间的共同点往往多于不同点。设计系统中通常存在的大多数组件，如按钮、复选框、选择，甚至表格，通常具有非常相似的行为和逻辑。WAI-ARIA创作实践描述了多少最常见的组件应该在可访问性、语义和键盘交互方面发挥作用。设计系统之间的主要区别在于造型。

不幸的是，许多公司和团队没有资源或时间来优先考虑可访问性、国际化、全键盘导航和触摸交互等功能。这导致许多Web应用程序的可访问性和交互性都低于平均水平，并导致人们认为与本地应用程序相比，Web是一个较差的应用程序平台。

我们相信有机会在设计系统和跨平台之间共享大部分行为和组件逻辑。例如，可以重用用户交互、可访问性、国际化和行为，同时允许自定义样式和呈现存在于各个设计系统中。这有可能提高应用程序的整体质量，同时为公司节省资金和时间，并减少整个行业的重复工作。

为了能够在设计系统之间重用组件行为，Reaction Spectrum将每个组件拆分为三个部分：状态、行为和渲染的组件。该体系结构是通过Reaction Hooks实现的，它支持在多个组件之间重用行为。

状态反应是为每个组件提供状态管理和核心逻辑的钩子的集合。他们不会对他们运行的平台做任何假设，也不会有主题或设计特定于系统的逻辑。

状态反应钩子接受来自组件的公共道具，并提供状态管理。它们实现组件的核心逻辑，并返回用于读取和更新组件状态的接口。

Reaction Status可以在您自己的组件中独立使用，也可以与Reaction Aria钩子配合使用，以获得更多的Web应用程序的行为和用户交互。通过阅读文档了解更多有关Reaction Statly以及如何入门的信息。

Reaction Aria根据WAI-ARIA创作实践实现Web的行为和可访问性。它包括全屏阅读器和键盘导航支持，以及鼠标和触摸交互，这些交互已经在各种设备和浏览器上进行了测试。它还实现了30多种语言的国际化，具有从右到左的特定行为、本地化的日期和数字格式，等等。

Reaction Aria不包含任何设计系统特定的样式或逻辑。它实现了事件处理、可访问性、国际化等-组件的所有部分可以在多个设计系统之间共享。它返回可以散布到组件呈现的元素上的DOM道具。其中包括语义属性，如ARIA和事件处理程序。事件处理程序依次调用状态接口上的方法来实现组件的行为。

Reaction Aria使您能够完全控制组件的呈现和样式，但是您不必从头开始构建所有内容，而是从具有内置语义、行为和交互的高级原语开始。这使您可以更快地构建组件，并确保它们跨设备和辅助技术正常工作。

使用Reaction Aria和Reaction Status构建组件如下所示：调用钩子，并将生成的道具散布到适当的DOM元素上。

功能开关(道具){let state=(道具)；let{inputProps}=(道具状态)；let{isFocusVisible accusProps}=()；return(<；={{display：'；flex&39；alignItems：'；center&39；}>；<；<；<；{.inputProps}{.焦点Props}/>。<；/>；<；={40}={24}="；true"；={{argenRight：4}}<；={4}={4}={32}={16}={8}={state isSelected？'；橙色'；：'；灰色'；}/>；<；={state is Selected？28：12}={12}={5}="；白色"；/>；{isFocusVisible&；&；(<；={1}={1}={38}={22}={11}="；无"；="；橙色"；={2}/>；)}<；/>；{道具儿童}<；/>；)；}<；>；测试<；/>；

功能开关(道具){let state=(道具)；let{inputProps}=(道具状态)；let{isFocusVisible accusProps}=()；return(<；={{display：'；flex&39；alignItems：'；center&39；}>；<；<；<；{.inputProps}{.焦点Props}/>。<；/>；<；={40}={24}="；true"；={{argenRight：4}}<；={4}={4}={32}={16}={8}={state isSelected？'；橙色'；：'；灰色'；}/>；<；={state is Selected？28：12}={12}={5}="；白色"；/>；{isFocusVisible&；&；(<；={1}={1}={38}={22}={11}="；无"；="；橙色"；={2}/>；)}<；/>；{道具儿童}<；/>；)；}<；>；测试<；/>；

阅读更多关于Reaction Aria及其解决的问题的信息，并查看文档以开始构建您自己的设计系统。

Reaction Spectrum将所有这些部分放在一起，并实现特定于Adobe的样式。它的设计是自适应的，可以跨鼠标、触摸和键盘交互，在任何屏幕大小的设备上工作。它支持主题，包括自动支持黑暗模式，以及对触摸设备上的大型命中目标进行响应缩放。

如果您正在与Adobe软件集成，或者希望在您的项目中使用端到端组件库，那么Reaction Spectrum是一个很好的起点。使用Project Firefly节省时间，这是我们用于构建自定义原生云Adobe应用程序的完整框架。企业客户和合作伙伴可以在解决特定业务和工作流程需求的自定义应用程序中扩展Adobe Experience Platform和Adobe Experience Cloud解决方案的功能。注册以访问Project Firefly开发人员预览。

我们在Reaction Spectrum中设计了易于使用的API。下面的示例显示了创建支持节和复杂选项的SELECT元素是多么简单。

<；="；>；<；="；权限"；>；<；="；>；<；="；S"；/>；<；>；读取<；/>；<；="；说明&34；>；只读<；/>；<；/>；<；="；写入"；>；<；="；S"；/>；<；写入<；/>；<；="；说明"；>；只读和只写<；/>；<；/>；<；="；管理"；>；<；="；S"；/>；<；>；Admin<；/>；<；="；description"；>；完全访问<；/>；<；/>；<；/>；

<；="；>；<；="；权限"；>；<；="；>；<；="；S"；/>；<；>；读取<；/>；<；="；说明&34；>；只读<；/>；<；/>；<；="；写入"；>；<；="；S"；/>；<；写入<；/>；<；="；说明"；>；只读和只写<；/>；<；/>；<；="；管理"；>；<；="；S"；/>；<；>；Admin<；/>；<；="；description"；>；完全访问<；/>；<；/>；<；/>；

开始使用Reaction Spectrum构建应用程序，查看每个组件的文档以了解更多信息。此外，如果您正在构建自己的组件库，那么Reaction Spectrum就是一个很好的例子，说明了如何使用Reaction Aria和Reaction Status来构建一个完整的设计系统。

我们非常期待看到您如何在自己的应用程序中使用Reaction Aria、Reaction Statent和Reaction Spectrum！我们已经开始了最初的一组组件，在接下来的几个月里还会添加更多的组件。

请查看我们的文档以了解更多信息。我们已经投入了大量的精力来简化入门，每个组件都有API文档和示例，并列出了我们处理的所有开箱即用功能的清晰列表。