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 шага. Давай сделаем это!

Шаги:

  1. yarn add focus-visible в свой проект.
  2. 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. Подтверждаем, что два наших варианта использования работают должным образом:

  1. При нажатии на одну из наших навигационных ссылок (поверьте, я щелкнул по ней) не отображается синее кольцо доступности, то есть: тень блока Чакры. Мы можем проверить это, также используя инструменты разработчика, чтобы выбрать <a> и на панели стилей и принудительно установить состояние: focus. Мы видим, что focus-visible правильно устанавливает для нашей box-shadow значение none.

2. Переход через наш пользовательский интерфейс правильно дает нам тень окна. И мы можем еще раз проверить с помощью инструментов разработчика, что в фокусированном элементе навигации «Администратор» все еще есть определенная чакра box-shadow, а focus-visible не отменяет ее.

Совместная работа Chakra-ui и focus-visible дает нам удивительную доступность прямо из коробки, когда нам это нужно! Мы хотим, чтобы у всех пользователей был отличный UX, а это означает соблюдение правил доступности и работу над ними как отличные инженеры, а я знаю, что вы ими являетесь! 🍻