Jak zbudować dostępną aplikację front-endową z interfejsem użytkownika Chakra i Nuxt.js

Dla wielu osób internet jest nieodzowną częścią ich codziennego życia. Używają go w pracy, domu, a nawet w podróży. Dostępność sieci oznacza, że ​​osoby niepełnosprawne mogą jednakowo korzystać z sieci. Dlatego bardzo ważne jest, aby programiści i organizacje tworzące w sieci wbudowali w swoje aplikacje inkluzywność i dostępność.

Aby uczynić sieć bardziej dostępną, istnieje kilka najlepszych praktyk i standardów, które należy wdrożyć w swoich aplikacjach, takich jak przestrzeganie następujących zasad:

• Sekcja 508;
• ustawa o technologii wspomagającej;
• Ustawa o Amerykanach z Niepełnosprawnością (ADA);
• WCAG 2.0 (Wytyczne A i AA);
• Wytyczne BBC dotyczące dostępności mobilnej;
• WAI-ARIA ( Inicjatywa Dostępności Sieciowej – Dostę pne Aplikacje Internetowe R ich).

Nauka wdrażania tych standardów może wydawać się trudnym zadaniem, gdy weźmiesz pod uwagę terminy projektów i inne ograniczenia, z którymi musisz pracować jako programista. W tym świetle pozwól, że przedstawię Ci system projektowania interfejsu użytkownika, który został stworzony, aby pomóc Ci w udostępnianiu aplikacji internetowych.

Interfejs czakry

Chakra UI to system projektowania i framework UI stworzony przez Segun Adebayo. Został stworzony z myślą o prostocie, modułowości, komponowaniu i dostępności. Interfejs użytkownika Chakra zawiera wszystkie elementy potrzebne do tworzenia dostępnych aplikacji front-end.

Uwaga : Chociaż interfejs użytkownika Chakra zależy od CSS-in-JS pod maską, nie musisz go znać, aby korzystać z biblioteki.

Chociaż framework został pierwotnie stworzony dla React, Jonathan Bakebwa kierował przeniesieniem do Vue. Tak więc programiści Vuejs/NuxtJS mogą teraz wykorzystywać interfejs użytkownika Chakra do tworzenia dostępnych aplikacji internetowych.

Funkcje interfejsu czakry

Chakra UI został stworzony z myślą o następujących zasadach:

• Stylowe rekwizyty
  Interfejs użytkownika czakry umożliwia stylizowanie komponentów lub nadpisywanie ich stylów za pomocą rekwizytów. Zmniejsza to potrzebę stosowania stylów arkuszy stylów lub wbudowanych. Chakra UI osiąga ten poziom elastyczności, używając Styled Systems pod maską.
• Kompozycja
  Komponenty w interfejsie użytkownika Chakry zostały podzielone na mniejsze części z minimalnymi rekwizytami, aby utrzymać niską złożoność i połączyć je ze sobą. Zapewni to, że style i funkcjonalność będą elastyczne i rozszerzalne. Na przykład, możesz użyć komponentów CBox i CPseudoBox do tworzenia nowych komponentów.
• Dostępny
  Komponenty interfejsu użytkownika czakry są zgodne ze specyfikacjami wytycznych WAI-ARIA i mają odpowiednie atrybuty aria-*. Raport dostępności każdego utworzonego komponentu można również znaleźć w pliku o nazwie accessibility.md . Zobacz raport dostępności dla komponentu CAccordion .
• Tematyczne
  Interfejs użytkownika Chakra umożliwia łatwe odwoływanie się do wartości z motywu w całej aplikacji, na dowolnym komponencie.
• Obsługa trybu ciemnego
  Większość komponentów interfejsu użytkownika Chakra jest kompatybilna z trybem ciemnym zaraz po wyjęciu z pudełka.

Jak interfejs czakry wspiera dostępność

Jedną z podstawowych zasad tworzenia interfejsu użytkownika Chakra jest dostępność . Mając to na uwadze, wszystkie komponenty w interfejsie użytkownika Chakra są dostarczane po wyjęciu z pudełka z obsługą dostępności, zapewniając:

• Nawigacja za pomocą klawiatury — przydatna dla użytkowników z niepełnosprawnością motoryczną,
• Zarządzanie skupieniem,
• atrybuty aria-* potrzebne czytnikom ekranu,
• Wychwytywanie i przywracanie fokusu w modalnych oknach dialogowych.
  

Pierwsze kroki z interfejsem czakry i Nuxt

Uwaga : Aby korzystać z interfejsu użytkownika Chakra z Vue.js, zapoznaj się z przewodnikiem Pierwsze kroki.

W naszym projekcie demonstracyjnym zbudujemy eksploratora Chakra-ui — dostępną, jednostronicową aplikację internetową do wyszukiwania komponentów interfejsu użytkownika Chakra.

• Zobacz projekt na żywo na Netlify →

Pierwsze kroki z Eksploratorem Chakra-ui

Zakładając, że masz już zainstalowany NPM, utwórz nową aplikację Nuxt, uruchamiając:

 $ npx create-nuxt-app chakra-ui-explorer

Lub jeśli wolisz włóczkę, uruchom:

 $ yarn create nuxt-app chakra-ui-explorer

Postępuj zgodnie z monitem instalacji, aby zakończyć tworzenie aplikacji Nuxt.

Konfigurowanie interfejsu czakry

Interfejs czakry wykorzystuje emocje do obsługi stylów komponentów. Aby rozpocząć korzystanie z interfejsu Chakra, musisz zainstalować interfejs Chakra wraz z emocjami jako zależność od rówieśników. W tym projekcie będziemy używać oficjalnych modułów Nuxt zarówno dla interfejsu Chakra, jak i emocji, co zmniejszy tarcia podczas rozpoczynania pracy z interfejsem Chakra. Dodajmy je do naszego projektu, uruchamiając następujące polecenie:

 npm i @chakra-ui/nuxt @nuxtjs/emotion

Uwaga : @nuxtjs/emotion umożliwia generowanie i wstrzykiwanie stylów komponentów do kompilacji serwera.

Po zainstalowaniu obu modułów, będziesz musiał je zarejestrować w pliku nuxt.config.js w opcji tablicy modułów:

 // nuxt.config.js modules: ['@chakra-ui/nuxt', '@nuxtjs/emotion'],

Aby zakończyć nasz proces konfiguracji interfejsu użytkownika Chakra, musimy dotknąć naszego domyślnego komponentu układu w layouts/ i dodać CThemeProvider , CColorModeProvider i CReset z interfejsu użytkownika Chakra.

Zaleca się używanie komponentu CReset , aby upewnić się, że wszystkie komponenty dostarczane przez interfejs użytkownika Chakra działają poprawnie.

Składnik CThemeProvider udostępni motyw dla każdej części aplikacji, podczas gdy składnik CColorModeProvider odpowiada za obsługę trybu kolorów naszej aplikacji, który może znajdować się w jednym z dwóch stanów: jasny lub ciemny. Wreszcie składnik CReset usunie wszystkie domyślne style przeglądarki.

Dodajmy wyżej wymienione komponenty w layouts/default.vue . W naszej sekcji szablonów dodajmy to:

 <!-- layouts/default.vue --> <template> <div class="container"> <c-theme-provider> <c-color-mode-provider> <c-box as="section"> <c-reset /> <nuxt /> </c-box> </c-color-mode-provider> </c-theme-provider> </div> </template>

Następnie w naszej sekcji skryptów zaimportujemy i zarejestrujemy komponenty takie jak:

 <script> import { CThemeProvider, CColorModeProvider, CReset, CBox } from '@chakra-ui/vue' export default { name: 'DefaultLayout', components: { CThemeProvider, CColorModeProvider, CReset, CBox } } </script>

Twój komponent układu default.vue powinien wyglądać tak:

 <template> <div class="container"> <c-theme-provider> <c-color-mode-provider> <c-box as="section"> <c-reset /> <nuxt /> </c-box> </c-color-mode-provider> </c-theme-provider> </div> </template> <script> import { CThemeProvider, CColorModeProvider, CReset, CBox } from '@chakra-ui/vue' export default { name: 'DefaultLayout', components: { CThemeProvider, CColorModeProvider, CReset, CBox } } </script>

Uwaga : Zauważ, że opakowuję komponenty <c-reset /> i <nuxt /> w składnik c-box .

Ustawianie motywu aplikacji

Chakra UI pozwala na ustawienie motywu dla Twojej aplikacji. Przez „motyw” rozumiem ustawienie palety kolorów twojej aplikacji, skalę tekstu, stosy czcionek, punkty przerwania, wartości promienia obramowania i tak dalej. Ponieważ kolory i kontrast są istotnymi składnikami dostępności, ważne jest, aby używać kolorów, które są łatwo dostrzegalne.

Po wyjęciu z pudełka interfejs użytkownika Chakra jest dostarczany z domyślnym obiektem motywu, który spełnia większość potrzeb aplikacji pod względem kolorów, czcionek i tak dalej. Domyślny motyw jest skonfigurowany z myślą o kontraście, co pozwala na łatwe przełączanie trybów kolorów (więcej o tym później).

Chakra UI pozwala jednak rozszerzyć lub całkowicie zastąpić domyślny motyw. Jest to możliwe po zaakceptowaniu obiektu motywu w oparciu o Specyfikację stylizowanego motywu systemu.

Wartości w obiekcie motywu są automatycznie dostępne do użycia w aplikacji. Na przykład do kolorów określonych w theme.colors mogą się odnosić rekwizyty color , borderColor , backgroundColor , fill , stroke i style w komponentach .

Aby spersonalizować swoją aplikację, możesz zastąpić domyślny motyw dostarczany przez interfejs użytkownika Chakra lub ustawić w nim nowe wartości. Aby to zrobić, moduł Chakra UI Nuxt udostępnia obiekt chakra , który przyjmie właściwość extendTheme , która przyjmuje obiekt. Obiekt przekazany do extendTheme zostanie rekursywnie scalony z domyślnym obiektem motywu interfejsu użytkownika Chakra. Dodajmy paletę kolorów naszej marki do Chakry, abyśmy mogli używać jej w naszej aplikacji.

Uwaga : Chakra UI zaleca dodanie palety kolorów do obiektu kolorów twojego motywu za pomocą klawiszy od 50 do 900. Możesz użyć narzędzi internetowych, takich jak coolors i palx, aby wygenerować te palety.

Na naszej stronie demonstracyjnej użyję markowego koloru limonki. Aby Chakra UI wiedział o tym kolorze, utworzę obiekt customeTheme w folderze o nazwie chakra (możesz go nazwać jak chcesz) w katalogu głównym mojego projektu. W tym obiekcie zdefiniuję paletę kolorów naszej marki.

Utwórz plik o nazwie theme.js w utworzonym folderze, a następnie dodaj następujący fragment:

 // ./chakra/theme.js const customTheme = { colors: { brand: { 50: '#f6fcee', 100: '#e2f4c8', 200: '#cbec9e', 300: '#b2e26e', 400: '#94d736', 500: '#75c800', 600: '#68b300', 700: '#599900', 800: '#477900', 900: '#294700' } } } module.exports = customTheme

Teraz połączmy nasz niestandardowy motyw z interfejsem użytkownika Chakra. Robimy to w nuxt.config.js . Najpierw potrzebujemy naszego niestandardowego obiektu motywu:

 import customTheme from './chakra/theme'

Następnie musimy określić klucz chakra dostarczony przez moduł Nuxt UI Chakra i przekazać customTheme do właściwości extendTheme :

 chakra: { extendTheme: customTheme },

Twój plik nuxt.config.js powinien wyglądać tak:

 // nuxt.config.js import customTheme from './chakra/theme' export default { mode: 'spa', /* * Headers of the page */ head: { title: process.env.npm_package_name || '', meta: [ { charset: 'utf-8' }, { name: 'viewport', content: 'width=device-width, initial-scale=1' }, { hid: 'description', name: 'description', content: process.env.npm_package_description || '' } ], link: [{ rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' }] }, /* * Customize the progress-bar color */ loading: { color: '#fff' }, /* * Global CSS */ css: [], /* * Plugins to load before mounting the App */ plugins: [], /* * Nuxt.js dev-modules */ buildModules: [ // Doc: https://github.com/nuxt-community/eslint-module '@nuxtjs/eslint-module' ], /* * Nuxt.js modules */ modules: [ '@chakra-ui/nuxt', '@nuxtjs/emotion' ], chakra: { extendTheme: customTheme }, /* * Build configuration */ build: { /* * You can extend webpack config here */ extend (config, ctx) {} } }

Po uruchomieniu aplikacji za pomocą npm run dev strona główna powinna wyglądać tak:

Teraz, gdy pomyślnie zainstalowaliśmy interfejs użytkownika Chakra i dodaliśmy niestandardowy motyw naszej aplikacji, zacznijmy tworzyć eksploratora Chakra-ui.

Tworzenie naszej głównej nawigacji

Chcemy, aby nasza nawigacja miała nazwę naszej marki, w tym przypadku będzie to Eksplorator Chakra-ui , 2 linki nawigacyjne: Dokumentacja i Repo oraz przycisk odpowiedzialny za przełączanie naszego trybu kolorów. Stwórzmy nowy komponent w katalogu components o nazwie NavBar , w którym utworzymy główną nawigację naszej aplikacji za pomocą interfejsu użytkownika Chakra.

Zróbmy to. Dodaj następujący fragment kodu do NavBar.vue :

 <template> <c-box as="nav" h="60px" px="4" d="flex" align-items="center" shadow="sm" > <c-link as="nuxt-link" to="/" color="brand.700" font-weight="bold" :_hover="{ color: 'brand.900' }" > Chakra-ui Explorer </c-link> <c-box as="ul" color="gray.500" d="flex" align-items="center" list-style-type="none" ml="auto" > <c-box as="li" mr="8"> <c-link color="gray.500" :_hover="{ color: 'brand.400' }" is-external href="https://vue.chakra-ui.com" > Documentation </c-link> </c-box> <c-box as="li" mr="8"> <c-link color="gray.500" :_hover="{ color: 'brand.400' }" is-external href="https://github.com/chakra-ui/chakra-ui-vue" > Repo </c-link> </c-box> <c-box as="li"> <c-icon-button variant="ghost" variant-color="gray[900]" aria-label="Switch to dark mode" icon="moon" /> </c-box> </c-box> </c-box> </template> <script> import { CBox, CLink, CIconButton } from '@chakra-ui/vue' export default { name: 'NavBar', components: { CBox, CLink, CIconButton } } </script>

Następnie musimy zaimportować ten komponent do naszego domyślnego komponentu układu — default.vue i dodać go do naszego szablonu, aby ogólnie nasz domyślny układ wyglądał tak:

 <template> <div class="container"> <c-theme-provider> <c-color-mode-provider> <c-box as="section"> <c-reset /> <nav-bar /> <nuxt /> </c-box> </c-color-mode-provider> </c-theme-provider> </div> </template> <script> import { CThemeProvider, CColorModeProvider, CReset, CBox } from '@chakra-ui/vue' import NavBar from '@/components/NavBar' export default { name: 'DefaultLayout', components: { CThemeProvider, CColorModeProvider, CReset, CBox, NavBar } } </script>

Gdy uruchomisz teraz swoją aplikację, zobaczysz to:

Widać, że nawigacja jest już dostępna, nawet nie określając jej. Można to zobaczyć tylko po naciśnięciu klawisza Tab na klawiaturze; Interfejs użytkownika czakry obsługuje zarządzanie fokusem, podczas gdy możesz skupić się na każdym łączu w menu nawigacyjnym.

as Prop

Z powyższego fragmentu naszego NavBar.vue , zauważysz, że as rekwizyt. Jest to funkcja dostępna dla komponentów Chakra UI, która pozwala na przekazanie tagu HTML lub innego komponentu do renderowania jako podstawowego tagu komponentu wraz ze wszystkimi jego stylami i rekwizytami. Więc kiedy to zrobiliśmy:

 <c-box as="li"> <c-icon-button variant="ghost" variant-color="gray[900]" aria-label="Switch to dark mode" icon="moon" /> </c-box>

prosimy Chakra UI o wyrenderowanie elementu <li> i umieszczenie wewnątrz niego komponentu przycisku. Możesz również zobaczyć, jak używamy tego wzoru tutaj:

 <c-link as="nuxt-link" to="/" color="brand.700" font-weight="bold" :_hover="{ color : 'brand.900' }"> ChakraMart </c-link>

W powyższym przypadku prosimy interfejs Chakra o wyrenderowanie komponentu <nuxt-link /> Nuxta.

Właściwość as daje ci możliwość użycia właściwego (lub złego) elementu w kontekście twojego znacznika. Oznacza to, że możesz wykorzystać go do zbudowania szablonu aplikacji przy użyciu znaczników semantycznych, które sprawią, że Twoja aplikacja będzie bardziej zrozumiała dla czytników ekranu. Więc zamiast używać ogólnego elementu div dla głównej zawartości aplikacji, za pomocą as prop możesz renderować main element informujący czytniki ekranu, że jest to główna zawartość Twojej aplikacji.

Uwaga : Sprawdź dokumentację wszystkich rekwizytów ujawnionych przez komponenty interfejsu użytkownika Chakra. Przyjrzyj się również bliżej określeniu koloru marki w chakra/theme.js . Możesz zobaczyć z powyższego fragmentu, że używamy go jako dowolnego z kolorów zapewnianych przez interfejs Chakra. Inną rzeczą, o której należy pamiętać, jest ikona moon , której użyliśmy dla CIconButton na naszym pasku nawigacyjnym. Ikona moon jest jedną z domyślnych ikon dostarczanych przez interfejs Chakra po wyjęciu z pudełka.

Tryb koloru

Jedną z funkcji interfejsu użytkownika Chakra jest obsługa trybu kolorów. I można powiedzieć po użyciu ikony moon w nawigacji eksploratora Chakra-ui, że planujemy zintegrować tryb ciemny. Więc zamiast zostawiać to na koniec, skończmy z tym i podłączmy to teraz. Aby to zrobić, CColorModeProvider korzystając z funkcji Vue zapewnia/wstrzykuje, zapewnia, $chakraColorMode i $toggleColorMode . $chakraColorMode zwraca bieżący tryb koloru aplikacji, podczas gdy $toggleColorMode przełącza tryb koloru z light na dark i odwrotnie. Aby użyć tych dwóch funkcji, musimy je wstrzyknąć do komponentu NavBar.vue . Zróbmy to poniżej w sekcji <script /> :

 <script> <script> import { CBox, CLink, CIconButton } from '@chakra-ui/vue' export default { name: 'NavBar', inject: ['$chakraColorMode', '$toggleColorMode'], components: { CBox, CLink, CIconButton }, } </script>

Stwórzmy obliczoną właściwość, aby zwrócić tryb koloru:

 ... computed: { colorMode () { return this.$chakraColorMode() } }

Teraz, gdy wstrzyknęliśmy obie funkcje do NavBar.vue , zmodyfikujmy przycisk przełączania trybu kolorów. Zaczniemy od ikony, aby wyświetlała inną ikonę w zależności od trybu koloru. Nasz składnik CIconButton wygląda teraz tak w tym stanie:

 <c-icon-button variant="ghost" variant-color="gray[900]" aria-label="Switch to dark mode" :icon="colorMode == 'light' ? 'moon' : 'sun'" />

Obecnie używamy atrybutu aria-label , aby poinformować czytniki ekranu, aby przełączyły się w tryb ciemny. Zmodyfikujmy to, aby obsługiwać zarówno tryb jasny, jak i ciemny:

 <c-icon-button variant="ghost" variant-color="gray[900]" :aria-label="`Switch to ${colorMode == 'light' ? 'dark : 'light'} mode`" :icon="colorMode == 'light' ? 'moon' : 'sun'" />

Na koniec dodamy obsługę zdarzenia kliknięcia na przycisku, aby przełączać tryb kolorów naszej aplikacji za pomocą funkcji $toggleColorMode . Tak jak:

 <c-icon-button variant="ghost" variant-color="gray[900]" :aria-label="`Switch to ${colorMode == 'light' ? 'dark' : 'light'} mode`" :icon="colorMode == 'light' ? 'moon' : 'sun'" @click="$toggleColorMode" />

Aby sprawdzić, czy nasza konfiguracja trybu koloru działa, dodam interpolację trybu koloru i tekst obok przycisku CIconButton , który przełącza nasz tryb koloru. Tak jak:

 <c-box as="li"> <c-icon-button variant="ghost" variant-color="gray[900]" :aria-label="`Switch to ${colorMode == 'light' ? 'dark' : 'light'} mode`" :icon="colorMode == 'light' ? 'moon' : 'sun'" @click="$toggleColorMode" /> Current mode: {{ colorMode }} </c-box>

Oto jak obecnie wygląda nasza aplikacja:

Więc zrobiliśmy ciężkie podnoszenie, ustawiając tryb kolorów w interfejsie użytkownika Chakra. Teraz możemy stylizować naszą aplikację w oparciu o tryb kolorów. Przejdźmy do default.vue i użyj atrybutu slotu trybu koloru dostarczonego przez CColorModeProvider , aby nadać styl naszej aplikacji. Zmodyfikujmy najpierw nasz szablon w default.vue .

 <template> <div class="container"> <c-theme-provider> <c-color-mode-provider #default="{ colorMode }"> <c-box v-bind="mainStyles[colorMode]" w="100vw" h="100vh" as="section" > <c-reset /> <nav-bar /> <nuxt /> </c-box> </c-color-mode-provider> </c-theme-provider> </div> </template>

colorMode z właściwości slot props dostarczonej przez CColorModeProvider , a następnie przekazujemy ją jako klucz dynamiczny do obiektu mainStyle , który utworzymy za chwilę. Pomysł polega na użyciu innego zestawu stylów w oparciu o wartość colorMode . Używam również szerokości i wysokości ze skróconymi rekwizytami — odpowiednio w i h , aby ustawić szerokość i wysokość naszego komponentu CBox . Zdefiniujmy ten obiekt mainStyles w naszej sekcji skryptów:

 <script> import { CThemeProvider, CColorModeProvider, CReset, CBox } from '@chakra-ui/vue' import NavBar from '@/components/NavBar' export default { name: 'DefaultLayout', components: { CThemeProvider, CColorModeProvider, CReset, CBox, NavBar }, data () { return { mainStyles: { dark: { bg: 'gray.900', color: 'whiteAlpha.900' }, light: { bg: 'whiteAlpha.900', color: 'gray.900' } } } } } </script>

Eksplorator Chakra-ui obsługuje teraz tryb ciemny!

Teraz mamy nasz pasek nawigacyjny i pomyślnie skonfigurowaliśmy obsługę trybu ciemnego dla naszej aplikacji, skupmy się na index.vue w naszym katalogu pages/ , gdzie można znaleźć mięso naszej aplikacji. Zaczniemy od dodania komponentu CBox w następujący sposób:

 <c-box as="main" d="flex" direction="column" align-items="center" p="10" > </c-box>

Następnie dodamy do niego składnik CInput . Nasz komponent strony index.vue będzie wtedy wyglądał tak:

 <template> <c-box as="main" d="flex" align-items="center" direction="column" w="auto" p="16" > <c-input placeholder="Search components..." size="lg" mb="5" is-full-width /> </c-box> </template> <script> import { CBox, CInput } from '@chakra-ui/vue' export default { components: { CBox, CInput } } </script>

Oto jak teraz wygląda nasza aplikacja:

Możesz zobaczyć z powyższego screencastu, w jaki sposób element CInput automatycznie wie, kiedy jest w trybie ciemnym i odpowiednio się dostosowuje, nawet jeśli tego nie ustawiliśmy. Ponadto użytkownik może nacisnąć klawisz tabulatora, aby skupić się na tym komponencie CInput .

Dodawanie listy komponentów

Ideą eksploratora Chakra-ui (jak wspomniano wcześniej) jest pokazanie użytkownikowi wszystkich dostępnych komponentów w interfejsie użytkownika Chakra, abyśmy mogli mieć listę tych komponentów, a także linki, które przeniosą użytkownika do dokumentacji składnika. W tym celu utworzę folder o nazwie data w katalogu głównym naszego projektu, a następnie utworzę plik o nazwie index.js . W index.js wyeksportuję tablicę obiektów, która będzie zawierać nazwy komponentów. Oto jak plik powinien wyglądać:

 // ./data/index.js export const components = [ { name: 'Accordion' }, { name: 'Alert' }, { name: 'AlertDialog' }, { name: 'AspectRatioBox' }, { name: 'AspectRatioBox' }, { name: 'Avatar' }, { name: 'Badge' }, { name: 'Box' }, { name: 'Breadcrumb' }, { name: 'Button' }, { name: 'Checkbox' }, { name: 'CircularProgress' }, { name: 'CloseButton' }, { name: 'Code' }, { name: 'Collapse' }, { name: 'ControlBox' }, { name: 'Divider' }, { name: 'Drawer' }, { name: 'Editable' }, { name: 'Flex' }, { name: 'Grid' }, { name: 'Heading' }, { name: 'Icon' }, { name: 'IconButton' }, { name: 'IconButton' }, { name: 'Input' }, { name: 'Link' }, { name: 'List' }, { name: 'Menu' }, { name: 'Modal' }, { name: 'NumberInput' }, { name: 'Popover' }, { name: 'Progress' }, { name: 'PseudoBox' }, { name: 'Radio' }, { name: 'SimpleGrid' }, { name: 'Select' }, { name: 'Slider' }, { name: 'Spinner' }, { name: 'Stat' }, { name: 'Stack' }, { name: 'Switch' }, { name: 'Tabs' }, { name: 'Tag' }, { name: 'Text' }, { name: 'Textarea' }, { name: 'Toast' }, { name: 'Tooltip' } ]

Aby nasza implementacja była kompletna, zaimportuję powyższą tablicę do pages/index.vue i przejdę po niej, aby wyświetlić wszystkie komponenty. Ponadto damy użytkownikowi możliwość filtrowania komponentów za pomocą pola wyszukiwania. Oto pełna realizacja:

 // pages/index.vue <template> <c-box as="main" d="flex" align-items="space-between" flex-direction="column" w="auto" p="16" > <c-input v-model="search" placeholder="Search components..." size="lg" mb="10" is-full-width /> <c-grid template-columns="repeat(4, 1fr)" gap="3" p="5"> <c-box v-for="(chakraComponent, index) of filteredComponents" :key="index" h="10"> {{ chakraComponent.name }} <c-badge> <c-link is-external :href="lowercase(`https://vue.chakra-ui.com/${chakraComponent.name}`)" > <c-icon name="info" size="18px" /> </c-link> </c-badge> </c-box> </c-grid> </c-box> </template> <script> import { CBox, CInput, CGrid, CLink, CBadge, CIcon } from '@chakra-ui/vue' import { components as chakraComponents } from '../data' export default { components: { CBox, CInput, CGrid, CBadge, CIcon, CLink }, data () { return { search: '' } }, computed: { filteredComponents () { return chakraComponents.filter((component) => { return this.lowercase(component.name).includes(this.lowercase(this.search)) }) } }, methods: { lowercase (value) { return value.toLowerCase() } } } </script>

A teraz nasza aplikacja wygląda tak:

Możesz teraz zobaczyć, jak tryb ciemny jest automatyczny dla listy komponentu, a także jak dodawane jest zarządzanie fokusem dla łączy (domyślnie), aby ułatwić dostęp.

Testowanie interfejsu czakry

Na koniec zobaczmy, jak wypada nasza aplikacja, uruchamiając na niej test dostępności Lighthouse. Pamiętaj, że ten test opiera się na ocenie wpływu użytkownika Axe. Poniżej znajduje się screencast testu. Test można również przeprowadzić samodzielnie, wykonując poniższe czynności.

Z powyższego screencastu widać, że nasza aplikacja Chakra UI uzyskała wynik 85 w teście dostępności latarni morskiej.

Wniosek

W tym artykule poruszyliśmy potrzebę budowania dostępnych interfejsów, a także widzieliśmy, jak używać interfejsu użytkownika Chakra do tworzenia dostępnych aplikacji od podstaw poprzez budowanie eksploratora (eksploratora Chakra-ui) dla komponentów interfejsu użytkownika Chakra.

• Zobacz aplikację na żywo na Netlify →
• Link do repozytorium →