Доступная маршрутизация в React

От автора: маршрутизация React, Angular, Vue, PHP, WordPress и в других средах позволяет осуществлять навигацию в приложении между различными представлениями или компонентами. Она существует уже давно и стала важным дополнением ко многим нашим проектам React.

Независимо от того, используете ли вы React Navigation, React Router, Reach Router, Next, History API или какой-либо другой маршрутизатор, вы, вероятно, столкнулись с некоторыми из распространенных шаблонов и таким кодом:

<Link to='/about'>About</Link>

Простой фрагмент кода, который может заблокировать любого, кто использует вспомогательные технологии, если он не реализован должным образом.

Проблема

В этой статье я буду рассматривать React, но эти концепции могут быть применены к любому JavaScript-фреймворку в среде SPA.

Маршрутизация по своей сути — это не что иное, как Ajax-вызов для загрузки страницы и обновление URL-адреса. «Выполните этот код, когда URL-адрес соответствует XYZ». Проблема возникает из-за того, что нет естественной перезагрузки страницы, чтобы сбросить DOM, состояние фокуса и позволить вспомогательной технологии (например, программам чтения с экрана) отследить изменение — аналогичные вещи случаются со всеми вызовами Ajax. Это как если вы стоите в комнате, а позади вас появляется лошадь — вы не заметите ее, если она не издаст звук. Это концепция маршрутизации. Если вам никто не скажет, что страница изменилась, вы не узнаете об этом, если не посмотрите прямо на лошадь.

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

Установка заголовка документа

Поскольку в обычном приложении с маршрутизацией мы не покидаем основной области содержимого, важно явно обновить заголовок документа. Это первое, на что экранные дикторы смотрят при загрузке страницы. Как правило, у нас не возникало с этим проблем в наших проектах, но все же важно отметить и убедиться, что мы справляемся с этим успешно.

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

componentDidMount() { document.title = 'About';
}

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

Управление фокусом

Установка заголовок является хорошим шагом в правильном направлении, но пользователи все равно остаются застрявшими в середине документа, если весь контент вокруг них изменяется, а они не знают об этом. Нам нужно также управлять фокусом при обновлении маршрута. Если фокус не обрабатывается должным образом, когда пользователь кликает ссылку, курсор будет находиться там, где он был раньше (вероятно, на ссылке навигации), и они никогда не узнают, что страница изменилась.

Вот где нам на помощь приходит ref. Ref — это «аварийный люк», который есть в React, когда вам действительно нужно работать в DOM — в основном в ситуациях, связанных с доступностью. Мы можем использовать ссылку в React, чтобы программно переместить для пользователя фокус на страницу. Любой, кто собирал компоненты модала, вкладок или аккордеона, должен быть знаком с ref, все остальные могут ознакомиться с ref из документации React.

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

componentDidMount() { // Still setting the document title document.title = 'About | Site Name'; // Set focus to the content ref this.content.focus();
} render() { return ( <div> <h1 tabIndex="-1" ref={( content ) => { this.content = content; }}>Hello, About page</h1> </div> );
}

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

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

Коммуникация с пользователем

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

const Message = ( props ) => ( <div aria-live="polite" aria-atomic="true"> {props.text} </div>
);

Этот компонент использует состояния ARIA для асинхронной передачи информации пользователю. Его можно использовать в любой ситуации, но для маршрутизации мы вернемся к методу жизненного цикла componentDidMount (или используем хуки , это не имеет значения, просто что-то, что срабатывает при загрузке компонента).

componentDidMount() { // Все равно устанавливаем заголовок документа document.title = 'About | Site Name'; // Устанавливаем фокус на ref контента this.content.focus(); // Устанавливаем содержимое сообщения this.setState( { text: 'The about page has loaded'} );
} render() { return ( <div> <h1 tabIndex="-1" ref={( content ) => { this.content = content; }}>Hello, About page</h1> <Message text={this.state.text} /> </div> );
}

В приведенном выше блоке кода вы можете видеть содержимое сообщения, которое устанавливается в componentDidMount, а также компонент Message, который передается в свойство для отображения. Вот, что здесь происходит:

И вот, у вас есть доступная маршрутизация в приложении React. Не так уж и плохо, правда? Всего несколько строк кода, и вы можете помочь миллионам людей.

Оставайтесь доступными

Обновление ваших проектов для использования доступной маршрутизации — это замечательно, но мы также можем предпринять шаги, чтобы гарантировать, что наша работа React поддерживает определенный уровень доступности по мере развития сборки. Для этого я рекомендую использовать плагин jsx-a11y eslint, его очень легко добавить в проект, который уже использует eslint, и это поможет следить за JSX. Ваш файл .eslintrc должен выглядеть примерно так:

{ "parser": "babel-eslint", "plugins": [ "react", "jsx-a11y" ], "extends": [ "eslint:recommended", "plugin:react/recommended", "plugin:jsx-a11y/recommended" ], "settings": { "react": { "version": "detect" } }
}

Ну вот и все! Желаю успехов!

Источник: https://timwright.org

Редакция: Команда webformyself.