Vytváření přístupných aplikací React s komponentami React Aria

React Aria Components je knihovna obsahující sbírku nestylovaných komponent postavených na hácích React Aria.

Je vyvinut společností Adobe a je součástí projektu React Spectrum, jehož cílem je vytvořit komplexní kolekce knihoven a nástrojů, které pomáhají vývojářům vytvářet adaptivní, přístupné a robustní uživatele zkušenosti.

Porozumění komponentám React Aria

Reagovat Aria Components poskytuje přístupnost, uživatelské interakce a chování podle osvědčených postupů WAI-ARIA (Web Accessibility Initiative – Accessible Rich Internet Applications). Na rozdíl od knihovny React Aria, která používá háky React k sestavení vašich komponent.

Knihovna React Aria Components nabízí sadu předpřipravených komponent, včetně tlačítek, zaškrtávacích políček, posuvníků atd. Tyto komponenty nejsou stylizované, což vám umožňuje navrhnout vzhled a dojem aplikace, jak chcete.

Výhody používání komponent React Aria

Knihovna React Aria Components nabízí mnoho výhod, včetně:

• Přístupnost: Komponenty React Aria se řídí osvědčenými postupy WAI-ARIA a zajišťují, že vaše aplikace je přístupná všem uživatelům, včetně těch, kteří používají asistenční technologie.
• Flexibilita: Komponenty React Aria přicházejí bez stylu, což vám umožňuje implementovat váš návrhový systém bez omezení.
• Uživatelské interakce: React Aria poskytuje robustní zpracování uživatelských interakcí, včetně interakce klávesnice, myši a dotyku.
• Internacionalizace: React Aria podporuje jazyky se zápisem zprava doleva, formátování data a čísel a další, což usnadňuje vytváření internacionalizovaných aplikací.

Vytváření aplikací React pomocí komponent React Aria

Pojďme si projít vytvořením jednoduché React aplikace pomocí React Aria Components. Před použitím knihovny React Aria Components ve vašich aplikacích React musíte vytvořit projekt React. Vite je skvělý způsob, jak toho dosáhnout.

Vytvoření aplikace React

Chcete-li vytvořit aplikaci React pomocí Vite, spusťte ve svém terminálu následující kód:

npm init vite

Spuštěním výše uvedeného kódu spustíte řadu výzev, které vám pomohou vytvořit váš nový projekt React.

Například:

Po vytvoření projektu budete muset nainstalovat potřebné závislosti. Chcete-li to provést, spusťte ve svém terminálu následující kód:

cd react-aria-app

npm install

Změní váš aktuální adresář na adresář projektu a poté nainstaluje potřebné závislosti. Jakmile vytvoříte aplikaci React, můžete nainstalovat knihovnu React Aria Components a přidat do aplikace funkce usnadnění.

Instalace komponent React Aria

Knihovnu React Aria Components můžete nainstalovat pomocí npm nebo yarn. Chcete-li jej nainstalovat přes npm, spusťte ve svém terminálu následující příkaz:

npm install react-aria-components

Případně pro instalaci pomocí příze spusťte tento kód:

yarn add react-aria-components

Nyní, když jste nainstalovali knihovnu React Aria Components, můžete její součásti používat ve své aplikaci.

Použití komponent React Aria

Knihovna React Aria Components nabízí řadu komponent, které usnadňují a urychlují proces vývoje. Chcete-li použít komponentu knihovny, importujte ji do aplikace a vykreslete.

Například:

import React from"react";
import { Button, Popover, DialogTrigger, Dialog } from"react-aria-components";
functionApp() {
return (




Click Me</Button>

You clicked the button</Dialog>
 </Popover>
 </DialogTrigger>
 </div>
 );
}
exportdefault App;

Blok kódu výše importuje soubor Knoflík, Druh muffinu, DialogTrigger, a Dialog komponenty z reagovat-aria-komponenty modul. Všechny importované komponenty tvoří jednoduché tlačítko, které po kliknutí zobrazí vyskakovací okno.

The DialogTrigger komponenta řídí viditelnost dialogu nebo vyskakovacího okna. Uvnitř DialogTrigger, tam je Knoflík komponent. Toto tlačítko spouští viditelnost Druh muffinu a Dialog.

The Druh muffinu komponenta je kontejner, který se objeví přes zbytek uživatelského rozhraní, zatímco Dialog komponenta zobrazuje obsah ve vrstvě nad aplikací. Uvnitř Druh muffinu komponenta je a Dialog komponentu s textem „Kliknul jsi na tlačítko."

Kliknutím na tlačítko se zobrazí vyskakovací okno s textem "Klikli jste na tlačítko" na obrazovce, čímž vaše rozhraní bude vypadat podobně jako na obrázku níže.

Jak můžete vidět na obrázku výše, komponenty knihovny jsou dodávány bez stylu, takže si můžete vybrat preferovaný styl.

Styling vašich komponent

Vzhledem k tomu, že komponenty React Aria přicházejí bez stylu, můžete si je upravit, jak chcete. Můžeš použít Kaskádové styly (CSS), Tailwind CSS, stylizované komponenty nebo jakákoli jiná metoda stylingu, kterou preferujete.

Můžete předat různé zvyky názvy tříd ke komponentám a poté definujte třídy CSS ve vašem souboru CSS.

Zde je příklad:

import React from"react";
import { Button, Popover, DialogTrigger, Dialog } from"react-aria-components";
functionApp() {
return (




"button">Click Me</Button>
"popover">
"dialog">You clicked the button</Dialog>
 </Popover>
 </DialogTrigger>
 </div>
 );
}
exportdefault App;

V tomto příkladu definujete a jméno třídy pro Knoflík, Druh muffinu, a Dialog komponenty. Nyní můžete stylizovat komponenty v souboru 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;
}

Po definování stylů pro vaše komponenty by vaše tlačítko a vyskakovací okno měly vypadat nějak takto.

Pokud nechcete definovat vlastní jméno třídy pro vaše komponenty knihovna React Aria Components obsahuje výchozí jméno třídy pro každou komponentu. Výchozí jméno třídy je reagovat-aria-componentName, kde název komponenty je název komponenty, kterou chcete stylizovat.

Například:

.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;
}

Všimněte si, že výše uvedený blok kódu CSS použije tyto styly na všechny Knoflík, Druh muffinu, a Dialog komponentu, kterou používáte ve své aplikaci.

Vytvářejte přístupné a interaktivní aplikace React

React Aria Components je výkonná knihovna pro vytváření přístupných a interaktivních aplikací React. Poskytuje komponenty, které zpracovávají uživatelské interakce a dostupnost podle osvědčených postupů WAI-ARIA. Pokud hledáte knihovnu komponent, která nabízí spoustu komponent a flexibilitu, React Aria Components je vynikající volbou.

Vedle knihovny React Aria Components existují i ​​další nestylové knihovny komponent, které můžete použít k vytvoření krásných aplikací React. Jedna z těchto knihoven obsahuje Radix UI. Radix UI je knihovna komponent bez stylu pro vytváření vysoce kvalitních aplikací React. Je to skvělá alternativa k React Aria Components.