Как создать доступное внешнее приложение с Chakra UI и Nuxt.js

Опубликовано: 2022-03-10
Краткое резюме ↬ В этой статье мы рассмотрим, как использовать Chakra UI и NuxtJS для создания доступных интерфейсных приложений. Чтобы продолжить, вы должны быть знакомы с использованием прогрессивной интерфейсной среды Vue.js с Nuxt. Если нет, см. документы Vue.js и NuxtJS, чтобы начать работу.

Для многих людей Интернет является неотъемлемой частью их повседневной жизни. Они используют его на работе, дома и даже в дороге. Доступность Интернета означает, что люди с ограниченными возможностями могут пользоваться Интернетом в равной степени. Поэтому крайне важно, чтобы разработчики и организации, работающие в Интернете, обеспечивали инклюзивность и доступность своих приложений.

Чтобы сделать Интернет более доступным, есть несколько лучших практик и стандартов, которые вам придется внедрить в свои приложения, например, придерживаясь следующего:

  • Раздел 508;
  • Закон о вспомогательных технологиях;
  • Закон об американцах с ограниченными возможностями (ADA);
  • WCAG 2.0 (руководство A и AA);
  • Руководство BBC по доступности мобильных устройств;
  • Практики WAI - ARIA (Инициатива доступности веб-сайтов – Доступные многофункциональные интернет-приложения ) .

Обучение внедрению этих стандартов может показаться сложной задачей, если учесть сроки проекта и другие ограничения, с которыми вам приходится работать как разработчику. В свете этого позвольте мне представить вам систему дизайна пользовательского интерфейса, которая была создана, чтобы помочь вам сделать ваши веб-приложения доступными.

Пользовательский интерфейс чакры

Chakra UI — это система дизайна и структура пользовательского интерфейса, созданная Сегуном Адебайо. Он был создан с учетом простоты, модульности, компонуемости и доступности. Пользовательский интерфейс Chakra предоставляет вам все строительные блоки, необходимые для создания доступных интерфейсных приложений.

Примечание . Хотя пользовательский интерфейс Chakra внутри зависит от CSS-in-JS, вам не нужно знать его, чтобы использовать библиотеку.

Хотя фреймворк изначально был создан для React, Джонатан Бакебва возглавил перенос на Vue. Таким образом, разработчики Vuejs/NuxtJS теперь могут использовать пользовательский интерфейс Chakra для создания доступных веб-приложений.

Особенности пользовательского интерфейса чакры

Пользовательский интерфейс Chakra был создан с учетом следующих принципов:

  • Реквизит стиля
    Пользовательский интерфейс Chakra позволяет стилизовать компоненты или переопределять их стили с помощью реквизитов. Это снижает потребность в таблицах стилей или встроенных стилях. Пользовательский интерфейс Chakra достигает такого уровня гибкости за счет скрытого использования Styled Systems.
  • Сочинение
    Компоненты в пользовательском интерфейсе Chakra были разбиты на более мелкие части с минимальными реквизитами, чтобы снизить сложность, и скомпоновать их вместе. Это обеспечит гибкость и расширяемость стилей и функциональности. Например, вы можете использовать компоненты CBox и CPseudoBox для создания новых компонентов.
  • Доступный
    Компоненты пользовательского интерфейса Chakra соответствуют спецификациям рекомендаций WAI-ARIA и имеют правильные атрибуты aria-*. Вы также можете найти отчет о доступности каждого авторского компонента в файле с именем accessibility.md . См. отчет о доступности для компонента CAccordion .
  • тематический
    Пользовательский интерфейс Chakra дает вам возможность легко ссылаться на значения из вашей темы во всем приложении, в любом компоненте.
  • Поддержка темного режима
    Большинство компонентов Chakra UI совместимы с темным режимом прямо из коробки.

Как пользовательский интерфейс Chakra поддерживает специальные возможности

Одним из основных принципов создания пользовательского интерфейса Chakra является доступность . Имея это в виду, все компоненты пользовательского интерфейса Chakra поставляются с поддержкой специальных возможностей, предоставляя:

  • Клавиатурная навигация — полезна для пользователей с ограниченными двигательными навыками,
  • Управление фокусом,
  • атрибуты aria-*, необходимые программам чтения с экрана,
  • Перехват и восстановление фокуса для модальных диалогов.
Еще после прыжка! Продолжить чтение ниже ↓

Начало работы с пользовательским интерфейсом Chakra и Nuxt

Примечание . Чтобы использовать Chakra UI с Vue.js, см. руководство по началу работы.

Для нашего демонстрационного проекта мы создадим обозреватель Chakra-ui — доступное одностраничное веб-приложение для поиска компонентов пользовательского интерфейса Chakra.

  • Посмотреть живой проект на Netlify →

Начало работы с Chakra-ui Explorer

Предполагая, что у вас уже установлен NPM, создайте новое приложение Nuxt, запустив:

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

Или, если вы предпочитаете пряжу, запустите:

 $ yarn create nuxt-app chakra-ui-explorer

Следуйте инструкциям по установке, чтобы завершить создание приложения Nuxt.

Настройка пользовательского интерфейса чакры

Пользовательский интерфейс Chakra использует Emotion для обработки стилей компонентов. Итак, чтобы начать работу с пользовательским интерфейсом Chakra, вам необходимо установить пользовательский интерфейс Chakra вместе с Emotion в качестве одноранговой зависимости. Для этого проекта мы будем использовать официальные модули Nuxt как для пользовательского интерфейса Chakra, так и для Emotion, что уменьшит трение при начале работы с пользовательским интерфейсом Chakra. Давайте добавим их в наш проект, выполнив следующую команду:

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

Примечание . @nuxtjs/emotion позволяет генерировать стили компонентов и внедрять их в сборку сервера.

После установки обоих модулей вам нужно будет зарегистрировать их в файле nuxt.config.js в опции массива модулей:

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

Чтобы завершить процесс настройки пользовательского интерфейса Chakra, нам нужно коснуться нашего компонента макета по умолчанию в layouts/ и добавить CThemeProvider , CColorModeProvider и CReset из пользовательского интерфейса Chakra.

Рекомендуется использовать компонент CReset , чтобы обеспечить правильную работу всех компонентов пользовательского интерфейса Chakra.

Компонент CThemeProvider сделает вашу тему доступной для каждой части вашего приложения, а компонент CColorModeProvider отвечает за обработку цветового режима нашего приложения, который может находиться в одном из двух состояний: светлом или темном. Наконец, компонент CReset удалит все стили браузера по умолчанию.

Давайте добавим вышеупомянутые компоненты в layouts/default.vue . В нашем разделе шаблонов давайте добавим это:

 <!-- 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>

Затем в нашем разделе сценариев мы импортируем и регистрируем компоненты следующим образом:

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

Ваш компонент макета 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> <script> import { CThemeProvider, CColorModeProvider, CReset, CBox } from '@chakra-ui/vue' export default { name: 'DefaultLayout', components: { CThemeProvider, CColorModeProvider, CReset, CBox } } </script>

Примечание . Обратите внимание, что я оборачиваю компоненты <c-reset /> и <nuxt /> в компонент c-box .

Настройка темы приложения

Пользовательский интерфейс Chakra позволяет вам установить тему для вашего приложения. Под «темой» я подразумеваю настройку цветовой палитры вашего приложения, масштаба шрифта, стеков шрифтов, точек останова, значений радиуса границы и так далее. Поскольку цвета и контрастность являются жизненно важными компонентами доступности, важно использовать цвета, которые легко воспринимаются.

По умолчанию пользовательский интерфейс Chakra поставляется с объектом темы по умолчанию, который позволяет удовлетворить большинство потребностей вашего приложения с точки зрения цветов, шрифтов и т. д. Тема по умолчанию настроена с учетом контраста, что позволяет легко переключать цветовые режимы (подробнее об этом позже).

Однако пользовательский интерфейс Chakra позволяет расширить или полностью заменить тему по умолчанию. Это возможно, приняв объект темы на основе спецификации Styled System Theme.

Значения в объекте темы автоматически доступны для использования в вашем приложении. Например, на цвета, указанные в theme.colors , можно ссылаться в свойствах color , borderColor , backgroundColor , fill , stroke и style в ваших компонентах.

Чтобы персонализировать свое приложение, вы можете переопределить тему по умолчанию, предоставленную пользовательским интерфейсом Chakra, или установить в ней новые значения. Для этого модуль Chakra UI Nuxt предоставляет объект chakra , который принимает свойство extendTheme , которое принимает объект. Объект, переданный в extendTheme , будет рекурсивно объединен с объектом темы пользовательского интерфейса Chakra по умолчанию. Давайте добавим цветовую палитру нашего бренда в Chakra, чтобы мы могли использовать ее в нашем приложении.

Примечание . Пользовательский интерфейс Chakra рекомендует добавлять цветовую палитру в объект цветов вашей темы, используя ключи от 50 до 900. Вы можете использовать веб-инструменты, такие как coolors и palx, для создания этих палитр.

Для нашей демонстрационной домашней страницы я буду использовать фирменный цвет лайма. Чтобы пользовательский интерфейс Chakra знал об этом цвете, я создам объект customeTheme в папке с именем chakra (вы можете называть ее как хотите) в корне каталога моего проекта. В этом объекте я определю цветовую палитру нашего бренда.

Создайте файл с именем theme.js в созданной вами папке, а затем добавьте следующий фрагмент:

 // ./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

Теперь давайте объединим нашу пользовательскую тему с пользовательским интерфейсом Chakra. Мы делаем это в nuxt.config.js . Во-первых, нам нужен наш пользовательский объект темы:

 import customTheme from './chakra/theme'

Затем мы должны указать ключ chakra , предоставленный модулем Chakra UI Nuxt, и передать customTheme в свойство extendTheme :

 chakra: { extendTheme: customTheme },

Ваш файл nuxt.config.js должен выглядеть так:

 // 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) {} } }

Когда вы запускаете приложение с помощью npm run dev , ваша домашняя страница должна выглядеть так:

Демонстрационное приложение, показывающее Chakra UI и NuxtJS
(Большой превью)

Теперь, когда мы успешно установили пользовательский интерфейс Chakra и добавили пользовательскую тему нашего приложения, давайте начнем создавать обозреватель Chakra-ui.

Создание нашей основной навигации

Мы хотим, чтобы наша навигация имела название нашего бренда, в данном случае это будет Chakra-ui explorer , 2 навигационные ссылки: Documentation и Repo , и кнопка, отвечающая за переключение нашего цветового режима. Давайте создадим новый компонент в каталоге components с именем NavBar , в котором мы создадим основную навигацию нашего приложения с помощью пользовательского интерфейса Chakra.

Давай сделаем это. Добавьте следующий фрагмент в 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>

Затем нам нужно импортировать этот компонент в наш компонент макета по умолчанию — default.vue и добавить его в наш шаблон, чтобы в целом наш макет по умолчанию выглядел так:

 <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>

Когда вы сейчас запустите свое приложение, вы увидите это:

Вы можете видеть, что навигация уже доступна, даже не указывая ее. Это можно увидеть только при нажатии клавиши Tab на клавиатуре; Пользовательский интерфейс Chakra управляет фокусом, в то время как вы можете сосредоточиться на каждой ссылке в меню навигации.

as опора

Из приведенного выше фрагмента NavBar.vue вы можете заметить свойство as . Это функция, доступная для компонентов пользовательского интерфейса Chakra, которая позволяет передавать HTML-тег или другой компонент для отображения в качестве базового тега компонента вместе со всеми его стилями и реквизитами. Итак, когда мы сделали:

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

мы просим Chakra UI отобразить элемент <li> и поместить внутрь него компонент кнопки. Вы также можете увидеть, как мы используем этот шаблон здесь:

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

В приведенном выше случае мы просим пользовательский интерфейс Chakra отображать компонент Nuxt <nuxt-link />.

Свойство as дает вам возможность использовать правильный (или неправильный) элемент для контекста вашей разметки. Это означает, что вы можете использовать его для создания шаблона приложения с использованием семантической разметки, что сделает ваше приложение более значимым для программ чтения с экрана. Таким образом, вместо использования общего элемента div для основного содержимого вашего приложения, с опорой as вы можете отображать main элемент, сообщающий программам чтения с экрана, что это основное содержимое вашего приложения.

Примечание . Ознакомьтесь с документацией по всем реквизитам, предоставляемым компонентами пользовательского интерфейса Chakra. Кроме того, обратите внимание на то, как был указан цвет бренда в chakra/theme.js . Вы можете видеть из приведенного выше фрагмента, что мы используем его как любой из цветов, которые предоставляет интерфейс Chakra. Еще одна вещь, о которой следует помнить, — это значок moon , который мы использовали для CIconButton на нашей панели навигации. Значок moon является одним из значков по умолчанию, которые пользовательский интерфейс Chakra предоставляет из коробки.

Цветовой режим

Одной из особенностей пользовательского интерфейса Chakra является поддержка цветового режима. И вы можете сказать по использованию значка moon в навигации Chakra-ui explorer, мы планируем интегрировать темный режим. Так что вместо того, чтобы оставить это напоследок, давайте покончим с этим и подключим прямо сейчас. Для этого CColorModeProvider , используя функцию предоставления/вставки Vue, предоставляет функции $chakraColorMode и $toggleColorMode . $chakraColorMode возвращает текущий цветовой режим вашего приложения, а $toggleColorMode переключает цветовой режим со light на dark и наоборот. Чтобы использовать эти две функции, нам нужно внедрить их в компонент NavBar.vue . Сделаем это ниже в разделе <script /> :

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

Давайте создадим вычисляемое свойство для возврата цветового режима:

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

Теперь, когда мы внедрили обе функции в NavBar.vue , давайте изменим кнопку переключения цветового режима. Мы начнем со значка, чтобы он отображал разные значки в зависимости от цветового режима. Наш компонент CIconButton теперь выглядит так в этом состоянии:

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

В настоящее время мы используем атрибут aria-label , чтобы сообщать программам чтения с экрана о переходе в темный режим. Давайте изменим это, чтобы поддерживать как светлый, так и темный режим:

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

Наконец, мы добавим обработчик события нажатия кнопки для переключения цветового режима нашего приложения с помощью функции $toggleColorMode . Вот так:

 <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" />

Чтобы проверить, работает ли наш цветовой режим, я добавлю интерполяцию цветового режима и текст рядом с CIconButton переключающий наш цветовой режим. Вот так:

 <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>

Вот как сейчас выглядит наше приложение:

Итак, мы проделали тяжелую работу по настройке цветового режима в пользовательском интерфейсе Chakra. Итак, теперь мы можем стилизовать наше приложение на основе цветового режима. Давайте перейдем к default.vue и используем свойство слота цветового режима, предоставленное CColorModeProvider , для стилизации нашего приложения. Давайте сначала изменим наш шаблон в 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 из свойства реквизита слота, предоставленного CColorModeProvider , а затем передаем его в качестве динамического ключа объекту mainStyle , который мы создадим чуть позже. Идея состоит в том, чтобы использовать другой набор стилей в зависимости от значения colorMode . Я также использую ширину и высоту с сокращенными реквизитами — w и h соответственно, чтобы установить ширину и высоту нашего компонента CBox . Давайте определим этот объект mainStyles в нашем разделе сценария:

 <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>

Chakra-ui explorer теперь поддерживает темный режим!

Теперь у нас есть панель навигации и мы успешно настроили поддержку темного режима для нашего приложения, давайте сосредоточимся на index.vue в нашем каталоге pages/ , где можно найти основную часть нашего приложения. Мы начнем с добавления компонента CBox следующим образом:

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

Затем мы добавим внутрь него компонент CInput . Наш компонент страницы index.vue будет выглядеть следующим образом:

 <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>

Вот как теперь выглядит наше приложение:

Вы можете видеть из приведенного выше скриншота, как элемент CInput автоматически определяет, когда он находится в темном режиме, и соответствующим образом настраивается, даже если мы не устанавливали это явно. Кроме того, пользователь может нажать клавишу табуляции, чтобы сфокусироваться на этом компоненте CInput .

Добавление списка компонентов

Таким образом, идея обозревателя Chakra-ui (как указывалось ранее) состоит в том, чтобы показать пользователю все доступные компоненты в пользовательском интерфейсе Chakra, чтобы у нас был список этих компонентов, а также ссылки, которые приведут пользователя к документации. компонента. Для этого я создам папку с именем data в корне каталога нашего проекта, а затем создам файл с именем index.js . В index.js я экспортирую массив объектов, который будет содержать имена компонентов. Вот как должен выглядеть файл:

 // ./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' } ]

Чтобы наша реализация была завершена, я импортирую приведенный выше массив в pages/index.vue и перебираю его, чтобы отобразить все компоненты. Также мы дадим пользователю возможность фильтровать компоненты с помощью окна поиска. Вот полная реализация:

 // 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>

И теперь наше приложение выглядит так:

Теперь вы можете видеть, как темный режим является автоматическим для списка компонентов, а также как добавлено управление фокусом для ссылок (по умолчанию), чтобы облегчить доступность.

Тестирование пользовательского интерфейса Chakra

Наконец, давайте посмотрим, как оценивает наше приложение, запустив на нем тест доступности Lighthouse. Имейте в виду, что этот тест основан на оценке воздействия пользователя Axe. Ниже представлен скриншот теста. Вы также можете запустить тест самостоятельно, выполнив следующие действия.

Из скринкаста выше видно, что наше приложение Chakra UI набрало 85 баллов в тесте на доступность маяка.

Заключение

В этой статье мы коснулись необходимости создания доступных интерфейсов, а также увидели, как использовать пользовательский интерфейс Chakra для создания доступных приложений с нуля путем создания проводника (проводник Chakra-ui) для компонентов пользовательского интерфейса Chakra.

  • Посмотреть живое приложение на Netlify →
  • Ссылка на репозиторий →