使用 React Aria 組件構建可訪問的 React 應用程序
React Aria Components 是一個庫，包含構建在 React Aria hooks 之上的無樣式組件的集合。
Adobe 率先開發了這項技術，作為其在React Spectrum 計劃中持續努力的一部分，這是一項雄心勃勃的努力，旨在為開發人員提供各種資源，旨在促進創建響應式、包容性和彈性的用戶界面。
了解 React Aria 組件
React Aria 組件 根據WAI-ARIA（Web 可訪問性倡議-Accessible Rich）提供可訪問性、用戶交互和行為互聯網應用程序）最佳實踐。與 React Aria 庫不同，React Aria 庫使用 React hooks 來構建組件。
React Aria 組件庫提供了一系列內置元素，例如按鈕、複選框和滑塊，這些元素沒有任何樣式裝飾，從而使開發人員能夠根據自己喜歡的規範靈活地確定其軟件的視覺外觀和氛圍。
使用 React Aria 組件的好處
使用 React Aria Components 庫具有許多優勢，包括:
React Aria 組件遵循 WAI-ARIA 的可訪問性指南，使個人能夠利用輔助技術實現應用程序的完整功能和可用性。
React Aria 組件以無樣式的形式提供，允許在沒有任何限製或約束的情況下實現定制的設計系統。這種靈活性使開發人員能夠將其獨特的視覺和交互元素融入到組件中，從而產生符合應用程序的特定要求和偏好的定制用戶體驗。
React Aria 提供了一種全面的方法來通過各種輸入方法（例如鍵盤、鼠標和触摸設備）管理用戶交互。
React Aria 提供對從右到左 (RTL) 語言佈局的全面支持，以及日期和數字格式等高級功能，有助於跨文化和多語言 Web 應用程序的開發。
使用 React Aria 組件構建 React 應用程序
為了利用 React Aria Components 構建一個基本的 React 應用程序，需要建立一個 React 項目作為基礎。 React Aria 組件在 React 應用程序中的實現可以通過使用 Vite 來實現，Vite 是創建和管理此類項目的有效手段。
創建你的 React 應用程序
要使用 Vite 創建 React 項目，請在終端界面中執行以下命令:
npm init vite
執行所提供的代碼將啟動一系列查詢，旨在促進新的 React 項目的建立。
例如:
為了繼續您的項目，必須安裝所需的依賴項。要完成此任務，請在終端環境中執行上述代碼:
cd react-aria-app
npm install
該過程涉及將當前工作目錄更改為項目文件夾並安裝任何所需的依賴項。建立基於 React 的應用程序後，您可以引入 React Aria 組件庫，它為您的應用程序提供可訪問性增強。
安裝 React Aria 組件
要使用npm或yarn安裝React Aria組件庫，可以在終端中執行特定命令。具體來說，要通過使用 npm 來執行此操作，需要在終端中輸入以下指令:
npm install react-aria-components
或者，您可以選擇通過在終端或命令提示符中執行以下命令來使用 Yarn 安裝軟件包:
yarn add react-aria-components
在涉及集成 React Aria Components 庫的軟件開發項目中，利用該庫的功能現在是可行的。
使用 React Aria 組件
React Aria 組件庫提供了一系列多功能元素，可以簡化開發過程並加快開發速度。為了在您的項目中使用這些組件，只需將它們合併到您的應用程序中並顯示它們即可。
例如:
import React from "react";
import { Button, Popover, DialogTrigger, Dialog } from "react-aria-components";
function App() {
return (
<div>
<DialogTrigger>
<Button>Click Me</Button>
<Popover>
<Dialog>You clicked the button</Dialog>
</Popover>
</DialogTrigger>
</div>
);
}
export default App;
上面的代碼塊從“react-aria-components”庫導入了幾個 React 組件，即“Button”、“Popover”、“DialogTrigger”和“Dialog”。這些組件共同形成一個帶有按鈕的簡單界面，單擊該按鈕會觸發彈出窗口的顯示。
“DialogTrigger”組件充當控制器，用於確定對話框或彈出窗口的可見性，其操作通過其中嵌入的“Button”元素來促進。激活後，此按鈕會顯示相應的“Popover”和“Dialog”。
Popover 組件充當出現在用戶界面其餘部分上方的容器，並且可以通過單擊特定元素來觸發。另一方面，對話框組件在位於應用程序之上的單獨層中呈現其內容。 Popover 組件的範圍內有一個嵌套的 Dialog 組件，其中包含消息“您單擊了按鈕。
單擊指定按鈕後，設備屏幕上將出現彈出通知，顯示消息“您已成功與按鈕交互”，呈現出令人想起所描繪的視覺示例的美感。
在上面描述的視覺表示中，人們觀察到圖書館的組成元素中缺乏任何預先建立的美學屬性，從而賦予用戶自主選擇他們喜歡的設計選擇的權利。
設置組件的樣式
React Aria 組件以樸素的狀態提供，允許通過利用首選樣式技術（例如使用級聯樣式表 (CSS)、利用 Tailwind CSS 的功能、合併樣式組件或選擇替代設計）靈活地自定義其外觀實現審美增強的方法。
使用自定義類名稱，您可以將各種名稱應用於 HTML 結構中的各個元素。同時，您可以在 CSS 文檔中為這些特定類建立獨特的風格屬性，從而實現跨各種組件的定制視覺表示。
這是一個例子:
import React from "react";
import { Button, Popover, DialogTrigger, Dialog } from "react-aria-components";
function App() {
return (
<div>
<DialogTrigger>
<Button className="button">Click Me</Button>
<Popover className="popover">
<Dialog className="dialog">You clicked the button</Dialog>
</Popover>
</DialogTrigger>
</div>
);
}
export default App;
當然！這是該句子的優雅改寫:在本例中，我們通過利用 HTML 代碼中的 className 屬性為每個 Button、Popover 和 Dialog 元素分配一個自定義類。這使我們能夠通過單獨的 CSS 文件採用樣式技術，從而在根據我們的設計偏好定制這些組件的外觀時提供更大的靈活性。
.button{
margin-block-start: 1rem;
border: none;
color: #f2f2f2;
background-color: #333333;
padding: 0.7rem 0.8rem;
border-radius: 12px;
font-family: cursive;
}
.popover{
padding: 1rem;
background-color: antiquewhite;
border-radius: 12px;
}
.dialog{
outline: none;
}
在為 UI 元素（例如按鈕和彈出窗口）建立樣式約定後，這些組件的視覺表示可能類似於下面提供的示例。
如果您選擇不在 React Aria Components 框架中為元素指定個性化的類屬性，請放心，該庫為每個組件提供了默認的類名稱。此默認分類採用“react-aria-componentName”格式，其中““componentName””表示正在設置樣式的特定元素的命名法。
例如:
.react-aria-Button{
margin-block-start: 1rem;
border: none;
color: #f2f2f2;
background-color: #333333;
padding: 0.7rem 0.8rem;
border-radius: 12px;
font-family: cursive;
}
.react-aria-Popover{
padding: 1rem;
background-color: antiquewhite;
border-radius: 12px;
}
.react-aria-Dialog{
outline: none;
}
請注意，上述 CSS 代碼塊應適用於應用程序範圍內使用的 Button、Popover 和 Dialog 組件的所有實例。
構建可訪問且交互式的 React 應用程序
React Aria Components 是一款高效的工具，可遵循萬維網聯盟的可訪問富互聯網應用程序 (WAI-ARIA) 標準來創建包容性和動態的基於 React 的應用程序。這個強大的庫包含廣泛的組件，旨在適應不同的用戶交互，同時確保無縫可訪問性。對於那些在開發過程中尋求一套全面的組件和多功能性的人來說，React Aria Components 是一個更好的選擇。
除了 React Aria 組件庫之外，還存在幾個樸素的組件集合，可以用來創建具有視覺吸引力的 React 應用程序。這些組合中包括 Radix UI，這是一個未經修飾的元素存儲庫，專為製作頂級 React 項目而設計。作為 React Aria Components 的合適替代品，它代表了一個非常有效的選擇。