Bygga tillgängliga React-applikationer med React Aria-komponenter

React Aria Components är ett bibliotek som innehåller en samling icke-stylade komponenter som bygger på React Aria-krokar.

Adobe har lett utvecklingen av denna teknik som en del av deras pågående arbete inom React Spectrum-initiativet, en ambitiös strävan att förse utvecklare med en mängd olika resurser som är utformade för att underlätta skapandet av responsiva, inkluderande och motståndskraftiga användargränssnitt.

Förstå React Aria Components

React Aria Components ger tillgänglighet, användarinteraktioner och beteende enligt WAI-ARIA (Web Accessibility Initiative - Accessible Rich Internet Applications) bästa praxis. Till skillnad från React Aria-biblioteket, som använder React-krokar för att bygga dina komponenter.

React Aria Components-biblioteket innehåller en rad inbyggda element som knappar, kryssrutor och skjutreglage som inte har någon styling, vilket ger utvecklarna flexibilitet att bestämma det visuella utseendet och atmosfären i deras programvara enligt deras önskade specifikationer.

Fördelar med att använda React Aria Components

Användningen av React Aria Components-biblioteket ger en mängd fördelar, bland annat:

React Aria-komponenter följer WAI-ARIA:s riktlinjer för tillgänglighet, vilket möjliggör full funktionalitet och användbarhet i en applikation för personer som använder tekniska hjälpmedel.

React Aria-komponenter tillhandahålls i en odesignad form, vilket gör det möjligt att implementera ett anpassat designsystem utan några begränsningar eller restriktioner. Denna flexibilitet gör det möjligt för utvecklare att införliva sina unika visuella och interaktiva element i komponenterna, vilket resulterar i en skräddarsydd användarupplevelse som överensstämmer med applikationens specifika krav och preferenser.

React Aria erbjuder en heltäckande metod för att hantera användarinteraktioner via olika inmatningsmetoder som tangentbord, möss och pekdon.

React Aria erbjuder omfattande stöd för RTL-språklayouter (Right-to-Left) samt avancerade funktioner som datum- och sifferformatering, vilket underlättar utvecklingen av tvärkulturella och flerspråkiga webbapplikationer.

Bygga React-appar med React Aria Components

För att kunna bygga en grundläggande React-applikation med hjälp av React Aria Components är det nödvändigt att skapa ett React-projekt som grund. Implementeringen av React Aria Components i en React-applikation kan göras med hjälp av Vite, som är ett effektivt sätt att skapa och hantera sådana projekt.

Skapa din React-applikation

För att skapa ett React-projekt med hjälp av Vite, kör följande kommando i terminalgränssnittet:

 npm init vite

Genom att utföra den angivna koden initieras en sekvens av förfrågningar som är utformade för att underlätta upprättandet av ett nytt React-projekt.

Till exempel:

För att kunna fortsätta med ditt projekt är det viktigt att installera de nödvändiga beroendena. För att utföra denna uppgift kör du koden ovan i din terminalmiljö:

 cd react-aria-app

npm install

Processen innebär att den nuvarande arbetskatalogen ändras till projektets mapp och att alla nödvändiga beroenden installeras. När du har skapat en React-baserad applikation kan du introducera biblioteket React Aria Components som förbättrar tillgängligheten för din applikation.

Installera React Aria Components

För att installera biblioteket React Aria Components med hjälp av antingen npm eller yarn kan man utföra ett specifikt kommando i sin terminal. För att göra detta med hjälp av npm skriver man följande instruktion i terminalen:

 npm install react-aria-components

Alternativt kan du välja att installera paketet med Yarn genom att utföra följande kommando i din terminal eller kommandotolk:

 yarn add react-aria-components

Inom ramen för ett programutvecklingsprojekt som omfattar integrering av React Aria Components-biblioteket är det nu möjligt att använda bibliotekets funktioner.

Använda React Aria Components

Biblioteket React Aria Components innehåller en rad mångsidiga element som effektiviserar och påskyndar utvecklingsprocessen. För att kunna använda dessa komponenter i ditt projekt behöver du bara integrera dem i din applikation och visa dem.

Till exempel:

 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;

Kodblocket ovan importerar flera React-komponenter, nämligen “Button”, “Popover”, “DialogTrigger” och “Dialog” från biblioteket “react-aria-components”. Dessa komponenter bildar tillsammans ett enkelt gränssnitt med en knapp som, när den klickas på, triggar visningen av en popover.

Komponenten DialogTrigger fungerar som en styrenhet för att bestämma synligheten för antingen en dialogruta eller popover, och dess funktion underlättas av ett inbäddat Button element i den. När knappen aktiveras visas respektive Popover och Dialog .

Popover-komponenten fungerar som en behållare som visas över resten av användargränssnittet och kan aktiveras genom att klicka på ett specifikt element. Dialogkomponenten å andra sidan presenterar sitt innehåll i ett separat lager som är placerat ovanpå applikationen. Inom ramen för Popover-komponenten ligger en nästlad Dialog-komponent som innehåller meddelandet “Du klickade på knappen.

När du klickar på den angivna knappen visas ett popup-meddelande på din enhets skärm, med meddelandet “Du har lyckats interagera med knappen”, med en estetik som påminner om det avbildade visuella exemplet.

I den visuella representationen ovan kan man se att det inte finns några förutbestämda estetiska egenskaper i bibliotekets beståndsdelar, vilket ger användaren frihet att välja den design som passar honom eller henne bäst.

Styling av dina komponenter

React Aria-komponenter tillhandahålls i ett osmyckat tillstånd, vilket ger flexibilitet att anpassa deras utseende genom användning av föredragna stylingtekniker som att använda Cascading Style Sheets (CSS), utnyttja kraften i Tailwind CSS, införliva stylade komponenter eller välja alternativa designmetoder för att uppnå estetisk förbättring.

Med hjälp av anpassade klassnamn kan du använda en mängd olika beteckningar för enskilda element i din HTML-struktur. Samtidigt kan du skapa distinkta stilistiska egenskaper för dessa specifika klasser i ditt CSS-dokument, vilket möjliggör skräddarsydda visuella representationer över olika komponenter.

Här är ett exempel:

 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;

Visst! Här är en elegant omformulering av den meningen:I det här fallet tilldelar vi en anpassad klass till vart och ett av elementen Button, Popover och Dialog genom att använda className-attributet i vår HTML-kod. Detta gör att vi kan använda stylingtekniker via en separat CSS-fil, vilket ger större flexibilitet när det gäller att skräddarsy utseendet på dessa komponenter enligt våra designpreferenser.

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

När du har fastställt stylingkonventioner för dina gränssnittselement, t.ex. knappar och popup-fönster, kan den visuella representationen av dessa komponenter se ut som i exemplet nedan.

Om du väljer att inte ange ett individuellt klassattribut för dina element i ramverket React Aria Components kan du vara säker på att biblioteket tillhandahåller en standardklassbeteckning för var och en av komponenterna.Denna standardklassificering har formatet “react-aria- componentName “, där " “componentName” " betecknar nomenklaturen för det specifika element som stylas.

Till exempel:

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

Observera att det ovannämnda CSS-kodblocket ska tillämpas på alla förekomster av knapp-, popup- och dialogkomponenter som används inom ramen för din applikation.

Bygg tillgängliga och interaktiva React-applikationer

React Aria Components är ett mycket effektivt verktyg för att skapa inkluderande och dynamiska React-baserade applikationer genom att följa World Wide Web Consortium’s Accessible Rich Internet Applications (WAI-ARIA) standarder. Detta robusta bibliotek omfattar ett brett utbud av komponenter som är utformade för att tillgodose olika användarinteraktioner och samtidigt säkerställa sömlös tillgänglighet. För dem som söker en omfattande uppsättning komponenter tillsammans med mångsidighet i sin utvecklingsprocess, står React Aria Components som ett överlägset alternativ.

Utöver React Aria Components-biblioteket finns det flera okonstlade komponentsamlingar som gör det möjligt att skapa visuellt tilltalande React-applikationer. Bland dessa samlingar finns Radix UI, ett osmyckat elementarkiv som är särskilt utformat för att skapa React-projekt i toppklass. Som en lämplig ersättning för React Aria Components är det ett mycket effektivt alternativ.