Модуль панели для слабовидящих

Готовый accessibility (a11y) виджет/панель для сайта: добавляет на страницу интерфейс “Версия для слабовидящих” и позволяет открывать/закрывать панель через элементы с атрибутом data-js-vipanel-toggle.
Подходит для встраивания в любые проекты (включая React) и может рендериться в document.body или в указанный контейнер (renderTo).

Установка

npm i @delement/vi-panel

yarn add @delement/vi-panel

pnpm add @delement/vi-panel

Быстрый старт

1. Инициализируйте панель один раз:

import { ViPanel } from "@delement/vi-panel";

new ViPanel();

2. Добавьте кнопку(и) для открытия/закрытия панели:

<button data-js-vipanel-toggle>Версия для слабовидящих</button>

После вызова класса панель будет встраиваться в DOM-дерево. По умолчанию рендер происходит в document.body, если не передан параметр renderTo (пример ниже).

Также вместе с панелью в head будет добавлен блок стилей через тег style (панель использует CSS-модули) и шрифт Брайля.

Внешний вид открытой панели

Панель со скрытым блоком дополнительных настроек

Панель с открытым блоком дополнительных настроек

Внешний вид автоматически добавленной кнопки открытия/закрытия панели

Расположение справа (по умолчанию)

Кнопка открытия в свёрнутом состоянии:

Кнопка открытия при наведении:

Кнопка закрытия в свёрнутом состоянии:

Кнопка закрытия при наведении:

Расположение слева

Кнопка открытия в свёрнутом состоянии:

Кнопка открытия при наведении:

Кнопка закрытия в свёрнутом состоянии:

Кнопка закрытия при наведении:

Открытие панели

Панель открывается по клику на кнопку с атрибутом data-js-vipanel-toggle, пример разметки:

<button data-js-vipanel-toggle>Версия для слабовидящих</button>

Таких кнопок на странице может быть несколько. Повторное нажатие на кнопку закрывает панель.

Пример использования в React

Панель можно вызвать в компоненте следующим образом:

import { ViPanel } from "@delement/vi-panel";
import { useEffect, useRef } from "react";

export const MyComponent = () => {
  const ref = useRef(null);
  
  useEffect(() => {
    new ViPanel({ renderTo: ref.current });
  }, []);
  
  return (
    <div ref={ref}>
      <button data-js-vipanel-toggle>Версия для слабовидящих</button>
    </div>
  );
};

Разметка панели будет встроена на страницу через renderTo.insertAdjacentHTML("afterbegin", "panelTemplate");.

Описание возможностей модуля

С возможностями модуля можно ознакомиться в корпоративном сторибуке на ui.d-element.ru