tl; dr Библиотека компонентов Chakra-ui заменяет схему доступности по умолчанию своим собственным свойством box-shadow. Используйте пакет focus-visible в npm, чтобы переопределить это свойство css вместо обычного outline: none;
.
Chakra-ui - отличная новая библиотека компонентов для React. Он может похвастаться доступностью и скоростью, а также возможностью повторного использования. Что еще вы можете попросить у библиотеки компонентов ближе к 2020 году?
Я только что начал перестройку старого проекта AngularJS (v1) в React и подумал, что сейчас самое время изучить эту новую библиотеку компонентов. Мгновенный выигрыш! Компоненты, такие как Flex, Box, Text, Link, Button, Card, Drawer, Collapse, Input, Menu, Modal, Toast и т. Д. - это именно то, что вам нужно, чтобы быстро запустить и запустить сайт, чтобы сразу дать вашему клиенту и PM. , визуальная обратная связь.
Просто загрузите тему Chakra по умолчанию в <ThemeProvider />
и загрузите их <CSSReset />
компонент, и бум. У вас есть все компоненты темы и все необходимое для сброса css для согласованности работы браузера.
Но, увы, несмотря на всю эту стремительную установку заголовка с помощью нескольких компонентов Flex и Link, я перехожу на свою причудливую страницу «О нас» и вижу следующее:
Да, это надоедливое синее кольцо доступности, которое мешает щелчку тега <a>
. Конечно, у меня нет проблем с доступностью ради доступности, но когда вы нажимаете что-то, вы, очевидно, знаете, где это, и нам не нужно это синее кольцо, преследующее каждый щелчок пользователя по всему нашему пользовательскому интерфейсу.
Сначала я сделал небольшую шутку и пошел на поиски, чтобы отключить схему (да ладно, только для этого варианта использования, а не в целом 😅).
a:focus { outline: none; }
Но это не сработало. Колеса вращались, я мог видеть, что мое свойство контура css установлено, и при ближайшем рассмотрении оно фактически устанавливается Чакрой. Так что же дает?
Тема Chakra по умолчанию применяет собственное свойство box-shadow к фокусу, пытаясь заменить свойство контура по умолчанию и дать вам контроль над внешним видом.
Большой! Это и стилистически полезно, и легко ухаживать. Мы могли бы просто заменить свойство темы по умолчанию на shadows.outline: none
, но это означает, что мы отключили его для каждого случая. Щелчки, табуляция и т. Д. Это не круто.
Итак, как нам избавиться от действия по щелчку? Мы просто хотим, чтобы эта тень появлялась в фокусе клавиатуры, а не в фокусе щелчка. Введите: yarn add focus-visible
.
Пакет focus-visible дает нам удобную поли-заливку для css-селектора, видимого в фокусе, который в настоящее время реализован только в Firefox. См. Caniuse:
Это отличная особенность, и я надеюсь, что все эти красные превратятся в зеленые как можно скорее. Но до тех пор мы будем использовать пакет focus-visible, чтобы предоставить нам эту функциональность всего за 3 шага. Давай сделаем это!
Шаги:
yarn add focus-visible
в свой проект.import 'focus-visible/dist/focus-visible'
где-то высоко. Я помещаю его в index.jsx:
//index.jsx import React from 'react'; import ReactDOM from 'react-dom'; import 'focus-visible/dist/focus-visible'; import App from './App'; ReactDOM.render(<App />, document.getElementById('root'));
3. Используйте глобальный компонент @emotion/core
, чтобы добавить глобальный стиль CSS, необходимый для видимости фокуса, из их документов.
* У вас уже должна быть установлена @ эмоция / ядро с того момента, когда вы добавили @ chakra-ui / core (согласно их инструкциям по установке).
import { Global, css } from '@emotion/core' const GlobalStyles = css` /* This will hide the focus indicator if the element receives focus via the mouse, but it will still show up on keyboard focus. */ .js-focus-visible :focus:not([data-focus-visible-added]) { outline: none; box-shadow: none; } `; //apply the GlobalStyles to your app: const App: React.FC = () => { return ( <ThemeProvider theme={theme}> <Global styles={GlobalStyles} /> <YourApp /> </ThemeProvider> ); }; export default App;
Разъяснение: Глобальный компонент эмоций позволяет создавать глобальные стили CSS (go-figure). Вы можете просто использовать литерал css`` для написания необходимых стилей, предоставленных нам документами, видимыми в фокусе. Здесь мы используем версию для выбора [data-focus-visible-added], потому что это то, что добавляет эмоция, когда вы переходите к элементу. (вы можете проверить это, используя инструменты разработчика, выбрав элемент и затем перейдя к нему с помощью табуляции).
Валлах! Престо! Бинго-Банго! Сейчас все хорошо в мире доступности ради доступности и в мире непрерывного UX. Подтверждаем, что два наших варианта использования работают должным образом:
- При нажатии на одну из наших навигационных ссылок (поверьте, я щелкнул по ней) не отображается синее кольцо доступности, то есть: тень блока Чакры. Мы можем проверить это, также используя инструменты разработчика, чтобы выбрать
<a>
и на панели стилей и принудительно установить состояние: focus. Мы видим, что focus-visible правильно устанавливает для нашей box-shadow значение none.
2. Переход через наш пользовательский интерфейс правильно дает нам тень окна. И мы можем еще раз проверить с помощью инструментов разработчика, что в фокусированном элементе навигации «Администратор» все еще есть определенная чакра box-shadow, а focus-visible не отменяет ее.
Совместная работа Chakra-ui и focus-visible дает нам удивительную доступность прямо из коробки, когда нам это нужно! Мы хотим, чтобы у всех пользователей был отличный UX, а это означает соблюдение правил доступности и работу над ними как отличные инженеры, а я знаю, что вы ими являетесь! 🍻