Курс NextJS. 14. Улучшение доступности приложения / Improviьg accessibility Обсуждаем понятие доступности (accessibility) и аспекты ее реализации в Next.js Валидируем значения, введенные в поля формы создания и редактирования инвойсов: 1. Непосредственно в формах с помощью атрибутов HTML required (валидация на клиентской стороне) 2. С помощью проверок схемы Zod, происходящей в Server Actions (валидация на серверной стороне) Возникающие при проверке ошибки возвращаются в форму через хук useActionState и отображаются под полями с ошибочными значениями в виде aria-labels с описанием соответствующей ошибки Используем инструмент lint для проверки кода приложения Презентацию можно скачать здесь:
Ссылка на GitHub:
Поддержать автора:
https://www.donationalerts.com/r/dmit... Хронометраж 0:00:00 Введение 0:00:36 Целевая аудитория 0:00:55 План работы 0:03:03 Реализация доступности (accessibility) в приложениях Next.js 0:05:45 Улучшение доступности приложения. Постановка задачи 0:08:08 Проверка значений непосредственно в форме (Client-side validation) 0:13:38 Схема взаимодействия компонентов при серверной валидации 0:17:45 Валидация на серверной стороне: форма создания инвойса 0:23:06 Валидация на серверной стороне: форма редактирования инвойса 0:28:19 Используем next lint для проверки кода приложения 0:32:01 Заключительные операции. Домашнее задание 0:33:05 Полезные ссылки 0:34:18 Подведем итоги 0:34:54 Заключительные замечания Timing 0:00:00 Introduction 0:00:36 Target audience 0:00:55 Agenda 0:05:45 Improving accessibility of an app. Statement of the problem 0:08:08 Client-side form validation 0:13:38 Interaction of components during server-side form validation 0:17:45 Invoice creation form server-side validation 0:23:06 Invoice edit form server-side validation 0:28:19 Using next lint to check the app code 0:32:01 Final operations and homework 0:33:05 Useful links 0:34:18 Summary 0:34:54 Closing comments We discuss the concept of accessibility and aspects of its implementation in Next.js We validate the values entered in the fields of the invoice creation / edit forms: 1. Directly in the forms using HTML required attributes (client-side validation) 2. Using Zod schema checks performed within Server Actions (server-side validation) The validation errors are returned to the form via the useActionState hook and displayed below fields with erroneous values as aria-labels with an explanation of the corresponding error We use the lint tool to check the application code The presentation can be downloaded here:
GitHub Link:
Donate the author:
https://www.donationalerts.com/r/dmit... 