Criando aplicativos React acessíveis com componentes React Aria
React Aria Components é uma biblioteca que contém uma coleção de componentes sem estilo construídos com base nos hooks React Aria.
A Adobe liderou o desenvolvimento desta tecnologia como parte dos seus esforços contínuos no âmbito da iniciativa React Spectrum, um esforço ambicioso com o objetivo de fornecer aos programadores um conjunto diversificado de recursos concebidos para facilitar a criação de interfaces de utilizador responsivas, inclusivas e resilientes.
Compreendendo os componentes do React Aria
Os componentes do React Aria fornecem acessibilidade, interações com o usuário e comportamento de acordo com as práticas recomendadas da WAI-ARIA (Iniciativa de acessibilidade da Web - Aplicativos avançados de Internet acessíveis). Ao contrário da biblioteca React Aria, que usa ganchos React para construir seus componentes.
A biblioteca de componentes React Aria apresenta uma série de elementos incorporados, como botões, caixas de seleção e controles deslizantes, que não são adornados com nenhum estilo, garantindo aos desenvolvedores a flexibilidade de determinar a aparência visual e o ambiente de seu software de acordo com suas especificações preferidas.
Benefícios do uso de componentes React Aria
A utilização da biblioteca de componentes React Aria apresenta uma infinidade de vantagens, incluindo:
Os componentes React Aria aderem às diretrizes WAI-ARIA para acessibilidade, permitindo total funcionalidade e usabilidade de um aplicativo por indivíduos que utilizam tecnologia assistiva.
Os componentes React Aria são fornecidos numa forma não estilizada, o que permite a implementação de um sistema de design personalizado sem quaisquer limitações ou restrições. Esta flexibilidade permite que os programadores incorporem os seus elementos visuais e interactivos únicos nos componentes, resultando numa experiência de utilizador personalizada que se alinha com os requisitos e preferências específicos da aplicação.
O React Aria oferece uma abordagem abrangente para gerir as interacções do utilizador através de vários métodos de entrada, como teclados, ratos e dispositivos tácteis.
O React Aria oferece suporte abrangente para layouts de idioma da direita para a esquerda (RTL), bem como recursos avançados, como formatação de data e número, que facilitam o desenvolvimento de aplicações Web multiculturais e multilíngues.
Criando aplicativos React com componentes React Aria
Para construir um aplicativo React básico utilizando componentes React Aria, é necessário estabelecer um projeto React como base. A implementação dos Componentes do React Aria em um aplicativo React pode ser obtida com o uso do Vite, que serve como um meio eficiente de criar e gerenciar esses projetos.
Criando seu aplicativo React
Para estabelecer um projeto React utilizando o Vite, execute o comando a seguir na interface do terminal:
npm init vite
A execução do código fornecido iniciará uma sequência de inquéritos concebidos para facilitar o estabelecimento de um novo projeto React.
Por exemplo:
Para prosseguir com o seu projeto, é essencial instalar as dependências necessárias. Para o fazer, execute o código acima mencionado no seu ambiente de terminal:
cd react-aria-app
npm install
O processo envolve a alteração do atual diretório de trabalho para a pasta do projeto e a instalação de quaisquer dependências necessárias. Depois de estabelecer uma aplicação baseada em React, pode introduzir a biblioteca React Aria Components que fornece melhorias de acessibilidade para a sua aplicação.
Instalando os componentes do React Aria
Para instalar a biblioteca de componentes do React Aria utilizando o npm ou o yarn, é possível executar um comando específico no terminal. Especificamente, para fazer isso através do uso do npm, deve-se digitar a seguinte instrução no terminal:
npm install react-aria-components
Como alternativa, você pode optar por instalar o pacote usando o Yarn, executando o seguinte comando no terminal ou no prompt de comando:
yarn add react-aria-components
No contexto de um projeto de desenvolvimento de software que envolve a integração da biblioteca React Aria Components, a utilização dos recursos dessa biblioteca agora é viável.
Utilizar os componentes React Aria
A biblioteca React Aria Components fornece uma série de elementos versáteis que simplificam o processo de desenvolvimento e aceleram o seu ritmo. Para utilizar estes componentes no seu projeto, basta incorporá-los na sua aplicação e exibi-los.
Por exemplo:
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;
O bloco de código acima importa vários componentes React, nomeadamente “Button”, “Popover”, “DialogTrigger” e “Dialog” da biblioteca “react-aria-components”. Estes componentes formam coletivamente uma interface simples com um botão que, ao ser clicado, desencadeia a apresentação de um popover.
O componente DialogTrigger funciona como um controlador para determinar a visibilidade de uma caixa de diálogo ou de um popover, sendo o seu funcionamento facilitado por um elemento Button incorporado no mesmo. Ao ser ativado, este botão provoca a apresentação dos respectivos Popover e Dialog .
O componente Popover funciona como um contentor que aparece sobre o resto da interface do utilizador e pode ser acionado ao clicar num elemento específico. Por outro lado, o componente Diálogo apresenta o seu conteúdo numa camada separada posicionada no topo da aplicação. Dentro dos limites do componente Popover encontra-se um componente Diálogo aninhado que inclui a mensagem “Clicou no botão.
Ao clicar no botão especificado, aparece uma notificação pop-up no ecrã do dispositivo, com a mensagem “Interagiu com sucesso com o botão”, apresentando uma estética que lembra o exemplo visual apresentado.
Na representação visual apresentada acima, observa-se a ausência de quaisquer propriedades estéticas pré-estabelecidas nos elementos constituintes da biblioteca, dando assim ao utilizador autonomia para selecionar as suas opções de design preferidas.
Estilizando seus componentes
Os componentes do React Aria são fornecidos em um estado sem adornos, permitindo flexibilidade na personalização de sua aparência por meio da utilização de técnicas de estilo preferidas, como o emprego de CSS (Cascading Style Sheets), aproveitando o poder do Tailwind CSS, incorporando componentes estilizados ou optando por metodologias de design alternativas para obter aprimoramento estético.
Utilizando nomes de classe personalizados, pode aplicar uma variedade de designações a elementos individuais na sua estrutura HTML. Ao mesmo tempo, pode estabelecer propriedades estilísticas distintas para estas classes específicas no seu documento CSS, permitindo assim representações visuais personalizadas em vários componentes.
Aqui está um exemplo:
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;
Claro! Aqui está uma reformulação elegante desta frase: Neste caso, atribuímos uma classe personalizada a cada um dos elementos Button, Popover e Dialog utilizando o atributo className no nosso código HTML. Isto permite-nos empregar técnicas de estilo através de um ficheiro CSS separado, garantindo uma maior flexibilidade na adaptação do aspeto destes componentes de acordo com as nossas preferências de design.
.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;
}
Após o estabelecimento de convenções de estilo para os seus elementos de IU, tais como botões e popovers, a representação visual destes componentes pode assemelhar-se ao exemplo fornecido abaixo.
Se você optar por não especificar um atributo de classe individualizado para seus elementos no framework React Aria Components, fique tranquilo, pois a biblioteca fornece uma designação de classe padrão para cada componente.Esta classificação predefinida tem o formato “react-aria- componentName “, em que " “componentName” " significa a nomenclatura do elemento específico que está a ser estilizado.
Por exemplo:
.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;
}
Tenha em atenção que o bloco de código CSS acima mencionado será aplicável a todas as instâncias dos componentes Button, Popover e Dialog utilizados no âmbito da sua aplicação.
Crie aplicativos React acessíveis e interativos
O React Aria Components é uma ferramenta altamente eficaz para a criação de aplicativos inclusivos e dinâmicos baseados em React, aderindo aos padrões WAI-ARIA (Accessible Rich Internet Applications) do World Wide Web Consortium. Esta biblioteca robusta engloba uma vasta gama de componentes concebidos para acomodar diversas interacções do utilizador, garantindo simultaneamente uma acessibilidade perfeita. Para quem procura um conjunto abrangente de componentes e versatilidade no seu processo de desenvolvimento, os componentes React Aria são uma opção superior.
Além da biblioteca de componentes do React Aria, existem várias coleções de componentes sem adornos que permitem a criação de aplicativos React visualmente atraentes. Entre esses conjuntos está o Radix UI, um repositório de elementos sem adornos projetado especificamente para a criação de projetos React de alto nível. Como um substituto adequado para o React Aria Components, ele representa uma opção altamente eficaz.