Toegankelijke React-toepassingen bouwen met React Aria-componenten
React Aria Components is een bibliotheek met een verzameling niet-gestileerde componenten die zijn gebouwd bovenop React Aria-haken.
Adobe heeft het voortouw genomen bij de ontwikkeling van deze technologie als onderdeel van hun voortdurende inspanningen binnen het React Spectrum initiatief, een ambitieuze poging om ontwikkelaars te voorzien van een gevarieerd aanbod van middelen die zijn ontworpen om het maken van responsieve, inclusieve en veerkrachtige gebruikersinterfaces te vergemakkelijken.
Inzicht in React Aria Components
React Aria Components biedt toegankelijkheid, gebruikersinteracties en gedrag volgens de best practices van WAI-ARIA (Web Accessibility Initiative - Accessible Rich Internet Applications). In tegenstelling tot de React Aria-bibliotheek, die React-haken gebruikt om je componenten te bouwen.
De React Aria Components-bibliotheek biedt een reeks ingebouwde elementen zoals knoppen, selectievakjes en schuifregelaars die niet zijn opgesmukt met enige styling, waardoor ontwikkelaars de flexibiliteit hebben om het visuele uiterlijk en de sfeer van hun software te bepalen volgens de specificaties van hun voorkeur.
Voordelen van het gebruik van React Aria Components
Het gebruik van de React Aria Components-bibliotheek biedt een groot aantal voordelen, waaronder:
React Aria Components voldoen aan de WAI-ARIA richtlijnen voor toegankelijkheid, waardoor volledige functionaliteit en bruikbaarheid van een applicatie mogelijk is voor mensen die gebruik maken van ondersteunende technologie.
React Aria-componenten worden geleverd in een vorm zonder stijl, waardoor een aangepast ontwerpsysteem kan worden geïmplementeerd zonder beperkingen of restricties. Dankzij deze flexibiliteit kunnen ontwikkelaars hun unieke visuele en interactieve elementen in de componenten opnemen, wat resulteert in een gebruikerservaring op maat die aansluit bij de specifieke vereisten en voorkeuren van de toepassing.
React Aria biedt een uitgebreide aanpak voor het beheren van gebruikersinteracties via verschillende invoermethoden, zoals toetsenborden, muizen en aanraakapparaten.
React Aria biedt uitgebreide ondersteuning voor rechts-naar-links (RTL) taallay-outs, evenals geavanceerde functies zoals datum- en getalopmaak, die de ontwikkeling van cross-culturele en meertalige webapplicaties vergemakkelijken.
React Apps bouwen met React Aria Components
Om een basis React applicatie te bouwen met React Aria Components, is het nodig om een React project op te zetten als basis. De implementatie van React Aria Components binnen een React-applicatie kan worden bereikt door gebruik te maken van Vite, dat dient als een efficiënt middel voor het maken en beheren van dergelijke projecten.
Uw React-toepassing maken
Om een React-project op te zetten met behulp van Vite, voert u de volgende opdracht uit in uw terminalinterface:
npm init vite
De uitvoering van de meegeleverde code zal een reeks vragen starten die ontworpen zijn om het opzetten van een nieuw React-project te vergemakkelijken.
Bijvoorbeeld:
Om verder te gaan met je project is het essentieel om de vereiste afhankelijkheden te installeren. Om deze taak uit te voeren, voer je de bovenstaande code uit in je terminalomgeving:
cd react-aria-app
npm install
Het proces omvat het wijzigen van de huidige werkmap naar de projectmap en het installeren van alle vereiste afhankelijkheden. Nadat je een op React gebaseerde toepassing hebt gemaakt, kun je de React Aria Components-bibliotheek introduceren, die toegankelijkheidsverbeteringen biedt voor je toepassing.
React Aria Components installeren
Om de React Aria Components-bibliotheek te installeren met npm of yarn, kun je een specifiek commando in je terminal uitvoeren. Om dit met npm te doen, typt u de volgende instructie in uw terminal:
npm install react-aria-components
U kunt er ook voor kiezen om het pakket met Yarn te installeren door de volgende opdracht in uw terminal of opdrachtprompt uit te voeren:
yarn add react-aria-components
Binnen de context van een softwareontwikkelingsproject waarin de React Aria Components-bibliotheek is geïntegreerd, is het nu mogelijk om de functies van deze bibliotheek te gebruiken.
De React Aria Components-bibliotheek gebruiken
De React Aria Components-bibliotheek biedt een reeks veelzijdige elementen die de ontwikkelingsprocedure stroomlijnen en versnellen. Om deze componenten in je project te gebruiken, hoef je ze alleen maar in je applicatie op te nemen en weer te geven.
Bijvoorbeeld:
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;
Het bovenstaande codeblok importeert verschillende React-componenten, namelijk “Button”, “Popover”, “DialogTrigger” en “Dialog” uit de bibliotheek “react-aria-components”. Deze componenten vormen samen een eenvoudige interface met een knop die, wanneer erop wordt geklikt, de weergave van een popover activeert.
De DialogTrigger component dient als controller voor het bepalen van de zichtbaarheid van een dialoogvenster of popover, waarbij de werking wordt vergemakkelijkt door een ingesloten Button element. Bij activering veroorzaakt deze knop de weergave van de respectieve Popover en Dialog .
De Popover-component dient als een container die over de rest van de gebruikersinterface verschijnt en kan worden geactiveerd door op een specifiek element te klikken. De Dialoogcomponent daarentegen presenteert zijn inhoud in een afzonderlijke laag die bovenop de toepassing wordt geplaatst. Binnen de grenzen van de Popover-component ligt een genest Dialoog-component die het bericht “Je hebt op de knop geklikt.
Als je op de gespecificeerde knop klikt, verschijnt er een pop-upmelding op het scherm van je apparaat met het bericht “Je hebt met succes op de knop geklikt”, met een esthetiek die doet denken aan het afgebeelde visuele voorbeeld.
In de hierboven afgebeelde visuele weergave is te zien dat er geen vooraf vastgestelde esthetische eigenschappen zijn binnen de samenstellende elementen van de bibliotheek, waardoor de gebruiker zelf zijn favoriete ontwerpkeuzes kan maken.
Uw componenten stylen
React Aria-componenten worden geleverd in een onversierde staat, waardoor flexibiliteit mogelijk is bij het aanpassen van hun uiterlijk door gebruik te maken van voorkeurstechnieken voor styling, zoals het gebruik van Cascading Style Sheets (CSS), het benutten van de kracht van Tailwind CSS, het opnemen van gestileerde componenten of het kiezen voor alternatieve ontwerpmethoden om esthetische verbetering te bereiken.
Door gebruik te maken van aangepaste class-namen kun je een verscheidenheid aan benamingen toepassen op individuele elementen binnen je HTML-structuur. Tegelijkertijd kun je onderscheidende stilistische eigenschappen instellen voor deze specifieke klassen in je CSS-document, waardoor een aangepaste visuele weergave van verschillende componenten mogelijk wordt.
Hier is een voorbeeld:
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;
Zeker! Hier is een elegante herformulering van die zin: In dit geval wijzen we een aangepaste class toe aan elk van de elementen Button, Popover en Dialog door gebruik te maken van het className attribuut in onze HTML-code. Dit stelt ons in staat om stylingtechnieken toe te passen via een apart CSS-bestand, waardoor we meer flexibiliteit hebben om het uiterlijk van deze componenten aan te passen aan onze ontwerpvoorkeuren.
.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;
}
Na het instellen van stylingconventies voor je UI-elementen, zoals knoppen en pop-overs, kan de visuele weergave van deze componenten lijken op het onderstaande voorbeeld.
Als je ervoor kiest om geen geïndividualiseerd klassenattribuut op te geven voor je elementen in het React Aria Components-raamwerk, kun je erop vertrouwen dat de bibliotheek een standaard klassenaanduiding biedt voor elk component.Deze standaardclassificatie heeft het formaat “react-aria- componentName “, waarbij " “componentName” " de naam aanduidt van het specifieke element dat wordt gestyled.
Bijvoorbeeld:
.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;
}
Houd er rekening mee dat het bovenstaande CSS-codeblok van toepassing is op alle instanties van Button-, Popover- en Dialog-componenten die binnen het bereik van je applicatie worden gebruikt.
Bouw toegankelijke en interactieve React-toepassingen
React Aria Components is een zeer effectief hulpmiddel voor het maken van inclusieve en dynamische React-toepassingen die voldoen aan de WAI-ARIA-normen (Accessible Rich Internet Applications) van het World Wide Web Consortium. Deze robuuste bibliotheek bevat een breed scala aan componenten die zijn ontworpen om tegemoet te komen aan diverse gebruikersinteracties en tegelijkertijd naadloze toegankelijkheid te garanderen. Voor wie op zoek is naar een uitgebreide set componenten en veelzijdigheid in het ontwikkelproces, is React Aria Components een superieure optie.
Naast de React Aria Components-bibliotheek bestaan er verschillende onopgesmukte componentenverzamelingen waarmee je visueel aantrekkelijke React-toepassingen kunt maken. Een van deze verzamelingen is Radix UI, een opslagplaats voor onopgesmukte elementen die speciaal is ontworpen voor het maken van eersteklas React-projecten. Als geschikte vervanging voor React Aria Components is het een zeer effectieve optie.