Каковы наиболее практичные для реализации глобальных переключателей доступности в NextJS? ⇐ CSS

[Anonymous]

Я делаю веб -приложение в Nextjs, где мне нужно добавить глобальные переключатели доступности для следующих функциональных возможностей, < /p>

[*] Большой текст < /li> Высокий контраст < /li>
Снижение анимации < /li>
< /ol>
Мне не обязательно сохранить состояние через сессии, поэтому я решил взять следующее Подход, < /p>

Оберните мой макет вокруг доступного context < /code> hoc, где определяется пользовательский крюк, который проверяет некоторые классы CSS в корпусе документа, подобного .large-Text , High-Contrast ,. Reduce-animation и т. Д. И передает информацию, чтобы показать состояние Toggler везде.

Сделал компонент доступности , который в основном для кнопок переключения.

Всякий раз, когда переключатель запускается в основном, добавляет или удаляет классные имена из тега тела. Например: < /p>
< /li>
< /ol>

Код: Выделить всё

const { isLargeText, setIsLargeText } = useAccessibility();
const toggleTextSize = () => {
setIsLargeText(!isLargeText);
if (!isLargeText) {
document.body.classList.add("large-text");
sessionStorage.setItem("largeText", "true");
} else {
document.body.classList.remove("large-text");
sessionStorage.removeItem("largeText");
}
};
< /code>

 Наконец, в глобальном файле CSS я определил классы с необработанными свойствами CSS. Например < /li>
< /ol>
html:has(.large-text) {
font-size: 115%;
}

.reduce-animation * {
transition-duration: 50ms !important;
animation-duration: 50ms !important;
animation-iteration-count: 1 !important;
}

.high-contrast *:not(img):not(svg) {
filter: contrast(110%);
}

.high-contrast img, .high-contrast svg {
filter: contrast(50%);
}

.high-contrast a, .high-contrast button, .high-contrast .section,
.high-contrast input, .high-contrast textarea {
outline: 2px solid #808080;
}

Как видите, мне пришлось сделать некоторое время в CSS, например, для размещения класса. >. То же самое и с контрастом. Br /> За контекст, извините, если вопросы кажутся странными, я на самом деле дизайнер, который возится с Web Dev. И нужно быть честным, JS Stack не мой сильный костюм.


Подробнее здесь: https://stackoverflow.com/questions/794 ... -in-nextjs