{"id":485319,"date":"2026-06-28T10:13:18","date_gmt":"2026-06-28T10:13:18","guid":{"rendered":"https:\/\/savepearlharbor.com\/?p=485319"},"modified":"-0001-11-30T00:00:00","modified_gmt":"-0001-11-29T21:00:00","slug":"","status":"publish","type":"post","link":"https:\/\/savepearlharbor.com\/?p=485319","title":{"rendered":"\u041f\u043e\u043f\u0440\u043e\u0441\u0438\u043b\u0438 Claude \u0441\u043e\u0437\u0434\u0430\u0442\u044c WCAG-\u0434\u043e\u0441\u0442\u0443\u043f\u043d\u044b\u0439 DataPicker \u043d\u0430 React \u0438 \u043f\u043e\u0442\u0440\u0430\u0442\u0438\u043b\u0438 3 \u0434\u043d\u044f \u043d\u0430 \u0434\u043e\u0440\u0430\u0431\u043e\u0442\u043a\u0438"},"content":{"rendered":"
\n

\u0412\u0432\u0435\u0434\u0435\u043d\u0438\u0435<\/h2>\n

\u041a\u0430\u0437\u0430\u043b\u043e\u0441\u044c, \u0447\u0442\u043e Datapicker \u043e\u0442 Cloude \u0441\u0440\u0430\u0437\u0443 \u0431\u044b\u043b \u0433\u043e\u0442\u043e\u0432 \u0432 prod, \u043d\u043e:<\/strong><\/p>\n

\n

\u042f \u0437\u0430\u043f\u0443\u0441\u0442\u0438\u043b NVDA<\/abbr>, \u043f\u0435\u0440\u0435\u043a\u043b\u044e\u0447\u0438\u043b\u0441\u044f \u043a\u043b\u0430\u0432\u0438\u0448\u0435\u0439 Tab \u043f\u043e \u043d\u0430\u0448\u0435\u043c\u0443 \u043d\u043e\u0432\u043e\u043c\u0443 DataPicker’\u0443, \u0438 \u0444\u043e\u043a\u0443\u0441 \u0432\u044b\u0441\u043a\u043e\u0447\u0438\u043b \u0437\u0430 \u043f\u0440\u0435\u0434\u0435\u043b\u044b \u0434\u0438\u0430\u043b\u043e\u0433\u043e\u0432\u043e\u0433\u043e \u043e\u043a\u043d\u0430. \u0412 Storybook<\/abbr> \u0432\u0441\u0435 \u0440\u0430\u0431\u043e\u0442\u0430\u043b\u043e \u043d\u043e\u0440\u043c\u0430\u043b\u044c\u043d\u043e. \u041a\u0430\u043b\u0435\u043d\u0434\u0430\u0440\u044c \u043e\u0442\u043a\u0440\u044b\u0432\u0430\u043b\u0441\u044f, \u0434\u0430\u0442\u044b \u043c\u0435\u043d\u044f\u043b\u0438\u0441\u044c, \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435 \u0432\u044b\u0431\u043e\u0440\u0430 \u0441\u0440\u0430\u0431\u0430\u0442\u044b\u0432\u0430\u043b\u043e, \u0438 Claude \u043d\u0430\u043f\u0438\u0441\u0430\u043b \u043f\u0440\u0438\u043b\u0438\u0447\u043d\u0443\u044e \u0441\u0442\u0440\u0443\u043a\u0442\u0443\u0440\u0443 \u043d\u0430 React, \u043d\u043e \u043a\u0430\u043a \u0442\u043e\u043b\u044c\u043a\u043e \u0432 \u0434\u0435\u043b\u043e \u0432\u043c\u0435\u0448\u0430\u043b\u0441\u044f \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c \u0441\u043e screen reader’\u043e\u043c, \u0432\u0441\u0435 \u044d\u0442\u043e \u043f\u0435\u0440\u0435\u0441\u0442\u0430\u043b\u043e \u043a\u0430\u0437\u0430\u0442\u044c\u0441\u044f \u0433\u043e\u0442\u043e\u0432\u044b\u043c \u0432 prod.<\/p>\n<\/blockquote>\n

\u041f\u0440\u0438\u0432\u0435\u0442, \u043a\u043e\u043b\u043b\u0435\u0433\u0438!<\/p>\n

\u041c\u0435\u043d\u044f \u0437\u043e\u0432\u0443\u0442 \u0418\u043b\u044c\u044f, \u044f \u0442\u0435\u0445\u043d\u0438\u0447\u0435\u0441\u043a\u0438\u0439 \u0434\u0438\u0440\u0435\u043a\u0442\u043e\u0440 \u0432 \u00ab\u0418\u0441\u0445\u043e\u0434\u043d\u043e\u043c \u043a\u043e\u0434\u0435\u00bb. \u041d\u0430\u0448\u0430 frontend-\u043a\u043e\u043c\u0430\u043d\u0434\u0430 \u043f\u043e\u0441\u043b\u0435\u0434\u043d\u0438\u0435 \u0448\u0435\u0441\u0442\u044c \u043c\u0435\u0441\u044f\u0446\u0435\u0432 \u0437\u0430\u043d\u0438\u043c\u0430\u043b\u0430\u0441\u044c \u0443\u043b\u0443\u0447\u0448\u0435\u043d\u0438\u0435\u043c \u0434\u043e\u0441\u0442\u0443\u043f\u043d\u043e\u0441\u0442\u0438 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432 React (a11y). \u042d\u0442\u043e\u0442 DataPicker \u0441\u0442\u0430\u043b \u043e\u0434\u043d\u0438\u043c \u0438\u0437 \u043b\u0443\u0447\u0448\u0438\u0445 \u043d\u0430\u043f\u043e\u043c\u0438\u043d\u0430\u043d\u0438\u0439 \u043e \u0442\u043e\u043c, \u0447\u0442\u043e AI \u043c\u043e\u0436\u0435\u0442 \u0441\u044d\u043a\u043e\u043d\u043e\u043c\u0438\u0442\u044c \u0432\u0440\u0435\u043c\u044f \u043d\u0430 \u0448\u0430\u0431\u043b\u043e\u043d\u043d\u043e\u043c \u043a\u043e\u0434\u0435, \u043d\u043e \u043e\u043d \u043f\u043e-\u043f\u0440\u0435\u0436\u043d\u0435\u043c\u0443 \u043d\u0435 \u043f\u043e\u043d\u0438\u043c\u0430\u0435\u0442 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c\u0441\u043a\u043e\u0433\u043e \u043e\u043f\u044b\u0442\u0430, \u0441\u043a\u0440\u044b\u0442\u043e\u0433\u043e \u0437\u0430 aria\u2011label<\/code>, \u043f\u043e\u0432\u0435\u0434\u0435\u043d\u0438\u0435\u043c \u043a\u043b\u0430\u0432\u0438\u0430\u0442\u0443\u0440\u044b \u0438 \u0444\u043e\u043a\u0443\u0441\u043e\u043c.<\/p>\n

\u041f\u0440\u0438\u0433\u043e\u0442\u043e\u0432\u044c\u0442\u0435\u0441\u044c \u043a \u0438\u043d\u0441\u0430\u0439\u0442\u0430\u043c, \u0431\u0430\u0433\u0430\u043c \u0438 \u043f\u043e\u0431\u0435\u0434\u0430\u043c. \u041d\u0443 \u0438, \u043a\u043e\u043d\u0435\u0447\u043d\u043e, \u043d\u0435 \u0431\u0435\u0437 \u044d\u043a\u0441\u043f\u0435\u0440\u0438\u043c\u0435\u043d\u0442\u0430: \u00ab\u0410 \u0447\u0442\u043e, \u0435\u0441\u043b\u0438 Claude \u043d\u0430\u043f\u0438\u0448\u0435\u0442 \u043e\u0441\u043d\u043e\u0432\u0443?\u00bb. Claude \u0434\u0430\u043b \u043d\u0430\u043c \u0445\u043e\u0440\u043e\u0448\u0438\u0439 \u043a\u0430\u0440\u043a\u0430\u0441, \u043c\u044b \u0441\u043e\u0445\u0440\u0430\u043d\u0438\u043b\u0438 \u0431\u043e\u043b\u044c\u0448\u0443\u044e \u0435\u0433\u043e \u0447\u0430\u0441\u0442\u044c, \u043d\u043e \u043f\u043e\u0442\u043e\u043c \u043c\u044b \u043f\u043e\u0442\u0440\u0430\u0442\u0438\u043b\u0438 \u0442\u0440\u0438 \u0434\u043d\u044f \u043d\u0430 \u0442\u043e, \u0447\u0442\u043e\u0431\u044b \u043f\u0440\u0435\u0432\u0440\u0430\u0442\u0438\u0442\u044c \u0440\u0430\u0431\u043e\u0442\u0430\u044e\u0449\u0438\u0439 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 \u0432 WCAG<\/abbr>-\u0434\u043e\u0441\u0442\u0443\u043f\u043d\u044b\u0439.<\/p>\n

\u041f\u043e\u0447\u0435\u043c\u0443 \u043c\u044b \u043d\u0435 \u0432\u043e\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043b\u0438\u0441\u044c \u0433\u043e\u0442\u043e\u0432\u043e\u0439 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u043e\u0439<\/h2>\n

\u041a\u043e\u043d\u0442\u0435\u043a\u0441\u0442<\/h3>\n

\u041d\u0435\u0434\u0430\u0432\u043d\u043e \u043d\u0430\u043c \u0434\u043b\u044f \u043e\u0434\u043d\u043e\u0433\u043e \u0438\u0437 \u043f\u0440\u043e\u0435\u043a\u0442\u043e\u0432 (\u0432 \u043e\u0431\u043b\u0430\u0441\u0442\u0438 \u043c\u0435\u0434\u0438\u0446\u0438\u043d\u044b) \u043f\u043e\u043d\u0430\u0434\u043e\u0431\u0438\u043b\u0441\u044f DatePicker, \u043f\u0430\u0446\u0438\u0435\u043d\u0442\u0430\u043c \u043d\u0443\u0436\u043d\u043e \u0431\u044b\u043b\u043e \u0432\u044b\u0431\u0440\u0430\u0442\u044c \u0434\u0430\u0442\u0443 \u0438 \u0437\u0430\u043f\u0438\u0441\u0430\u0442\u044c\u0441\u044f \u043d\u0430 \u043f\u0440\u0438\u0435\u043c. \u0421\u0430\u043c \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 \u043f\u043e\u0434 NDA, \u043d\u043e \u0441\u043f\u0435\u0446\u0438\u0430\u043b\u044c\u043d\u043e \u0434\u043b\u044f \u044d\u0442\u043e\u0439 \u0441\u0442\u0430\u0442\u044c\u0438 \u043c\u044b \u0441\u043e\u0431\u0440\u0430\u043b\u0438 \u043f\u043e\u0445\u043e\u0436\u0438\u0439 open-source \u043a\u043e\u043d\u0446\u0435\u043f\u0442 \u0441 \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u044c\u044e \u043f\u043e\u0442\u044b\u043a\u0430\u0442\u044c \u0432\u0436\u0438\u0432\u0443\u044e (\u0441\u0441\u044b\u043b\u043a\u0430 \u0436\u0434\u0435\u0442 \u0432 \u043a\u043e\u043d\u0446\u0435), \u0447\u0442\u043e\u0431\u044b \u0447\u0435\u0441\u0442\u043d\u043e \u043f\u043e\u0434\u0435\u043b\u0438\u0442\u044c\u0441\u044f \u0441 \u0432\u0430\u043c\u0438 \u043f\u0440\u043e\u0446\u0435\u0441\u0441\u043e\u043c.<\/p>\n

\u0420\u0435\u0430\u043b\u044c\u043d\u0430\u044f \u043f\u0440\u043e\u0431\u043b\u0435\u043c\u0430<\/h3>\n

\u041f\u0430\u0446\u0438\u0435\u043d\u0442\u044b \u0441 \u043d\u0430\u0440\u0443\u0448\u0435\u043d\u0438\u044f\u043c\u0438 \u0437\u0440\u0435\u043d\u0438\u044f \u0434\u043e\u043b\u0436\u043d\u044b \u0431\u044b\u043b\u0438 \u0437\u0430\u043f\u0438\u0441\u044b\u0432\u0430\u0442\u044c\u0441\u044f \u043d\u0430 \u043f\u0440\u0438\u0435\u043c \u0441 \u0442\u0430\u043a\u043e\u0439 \u0436\u0435 \u0443\u0432\u0435\u0440\u0435\u043d\u043d\u043e\u0441\u0442\u044c\u044e, \u043a\u0430\u043a \u0438 \u0432\u0441\u0435 \u043e\u0441\u0442\u0430\u043b\u044c\u043d\u044b\u0435.<\/p>\n

\u041f\u043b\u0430\u043d\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0435 \u0440\u0435\u0448\u0435\u043d\u0438\u044f<\/h3>\n

\u041e\u0447\u0435\u0432\u0438\u0434\u043d\u044b\u043c \u0440\u0435\u0448\u0435\u043d\u0438\u0435\u043c \u0431\u044b\u043b\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0433\u043e\u0442\u043e\u0432\u044b\u0439 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 \u0432\u044b\u0431\u043e\u0440\u0430 \u0434\u0430\u0442\u044b.<\/p>\n

\u041c\u044b \u0432\u043d\u0438\u043c\u0430\u0442\u0435\u043b\u044c\u043d\u043e \u0438\u0437\u0443\u0447\u0438\u043b\u0438 @react-aria\/datepicker<\/code> \u043e\u0442 Adobe \u2014 \u044d\u0442\u043e \u043e\u0442\u043b\u0438\u0447\u043d\u044b\u0439 \u0432\u0430\u0440\u0438\u0430\u043d\u0442, \u043e\u0440\u0438\u0435\u043d\u0442\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u044b\u0439 \u0432 \u043f\u0435\u0440\u0432\u0443\u044e \u043e\u0447\u0435\u0440\u0435\u0434\u044c \u043d\u0430 \u0434\u043e\u0441\u0442\u0443\u043f\u043d\u043e\u0441\u0442\u044c, \u0438 \u0432\u043e \u043c\u043d\u043e\u0433\u0438\u0445 \u043f\u0440\u043e\u0435\u043a\u0442\u0430\u0445 \u044f \u0431\u044b \u043f\u0440\u0435\u0434\u043f\u043e\u0447\u0435\u043b \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0438\u043c\u0435\u043d\u043d\u043e \u0435\u0433\u043e, \u0430 \u043d\u0435 \u0441\u043e\u0437\u0434\u0430\u0432\u0430\u0442\u044c \u0441\u043e\u0431\u0441\u0442\u0432\u0435\u043d\u043d\u044b\u0439 \u043a\u0430\u043b\u0435\u043d\u0434\u0430\u0440\u044c, \u043d\u043e \u0432 \u0434\u0430\u043d\u043d\u043e\u043c \u0441\u043b\u0443\u0447\u0430\u0435 \u043e\u0433\u0440\u0430\u043d\u0438\u0447\u0435\u043d\u0438\u044f \u043d\u0435 \u043f\u043e\u0437\u0432\u043e\u043b\u0438\u043b\u0438 \u043d\u0430\u043c \u043f\u043e\u0439\u0442\u0438 \u043f\u043e \u044d\u0442\u043e\u043c\u0443 \u043f\u0443\u0442\u0438.<\/p>\n

\u041e\u0433\u0440\u0430\u043d\u0438\u0447\u0435\u043d\u0438\u044f:<\/p>\n

    \n
  1. \n

    \u0423 \u043d\u0430\u0441 \u0431\u044b\u043b \u0441\u043e\u0431\u0441\u0442\u0432\u0435\u043d\u043d\u044b\u0439 \u043c\u0430\u043a\u0435\u0442 \u0441 \u0433\u043e\u0440\u0438\u0437\u043e\u043d\u0442\u0430\u043b\u044c\u043d\u043e\u0439 \u043f\u0440\u043e\u043a\u0440\u0443\u0442\u043a\u043e\u0439 \u043c\u0435\u0441\u044f\u0446\u0435\u0432.<\/p>\n<\/li>\n

  2. \n

    \u0421\u0438\u0441\u0442\u0435\u043c\u0430 \u0434\u0438\u0437\u0430\u0439\u043d\u0430 \u043a\u043b\u0438\u0435\u043d\u0442\u0430 \u043f\u0440\u0435\u0434\u044a\u044f\u0432\u043b\u044f\u043b\u0430 \u0441\u0442\u0440\u043e\u0433\u0438\u0435 \u0442\u0440\u0435\u0431\u043e\u0432\u0430\u043d\u0438\u044f \u043a \u043c\u0430\u043a\u0435\u0442\u0443 \u0438 \u0432\u0438\u0437\u0443\u0430\u043b\u044c\u043d\u043e\u043c\u0443 \u043f\u043e\u0432\u0435\u0434\u0435\u043d\u0438\u044e.<\/p>\n<\/li>\n

  3. \n

    \u041a\u0440\u043e\u043c\u0435 \u0442\u043e\u0433\u043e, \u043c\u044b \u043d\u0435 \u0445\u043e\u0442\u0435\u043b\u0438 \u0442\u044f\u043d\u0443\u0442\u044c 25KB react-aria<\/code> \u0441 \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u0438\u043c\u0438 \u0430\u0431\u0441\u0442\u0440\u0430\u043a\u0446\u0438\u044f\u043c\u0438 \u0440\u0430\u0434\u0438 \u043e\u0434\u043d\u043e\u0433\u043e \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430, \u0435\u0441\u043b\u0438 \u043c\u043e\u0436\u043d\u043e \u0431\u044b\u043b\u043e \u0441\u043e\u0445\u0440\u0430\u043d\u0438\u0442\u044c \u0440\u0435\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u044e \u043a\u043e\u043c\u043f\u0430\u043a\u0442\u043d\u043e\u0439 \u0438 \u043a\u043e\u043d\u0442\u0440\u043e\u043b\u0438\u0440\u0443\u0435\u043c\u043e\u0439.<\/p>\n<\/li>\n<\/ol>\n

    \u041f\u0440\u0438\u043d\u044f\u043b\u0438 \u0440\u0435\u0448\u0435\u043d\u0438\u0435 \u043d\u0430\u043f\u0438\u0441\u0430\u0442\u044c \u0441\u043e\u0431\u0441\u0442\u0432\u0435\u043d\u043d\u044b\u0439 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442, \u043d\u043e \u0432 \u043a\u0430\u0447\u0435\u0441\u0442\u0432\u0435 \u043e\u0441\u043d\u043e\u0432\u043d\u043e\u0433\u043e \u043e\u0440\u0438\u0435\u043d\u0442\u0438\u0440\u0430 \u0441\u043b\u0435\u0434\u043e\u0432\u0430\u0442\u044c \u0441\u0442\u0440\u043e\u0433\u043e\u043c\u0443 \u043f\u0430\u0442\u0442\u0435\u0440\u043d\u0443 WAI-ARIA APG \u00abDate Picker Dialog\u00bb<\/a>.<\/p>\n

    \u0423\u0436\u0435 \u0437\u0434\u0435\u0441\u044c \u043a \u0438\u0433\u0440\u0435 \u043f\u0440\u0438\u0441\u043e\u0435\u0434\u0438\u043d\u0438\u043b\u0441\u044f Claude.<\/p>\n

    \u0413\u0438\u043f\u043e\u0442\u0435\u0437\u0430<\/h3>\n

    \u041d\u0430\u0448\u0430 \u0433\u0438\u043f\u043e\u0442\u0435\u0437\u0430 \u043d\u043e\u0441\u0438\u043b\u0430 \u043f\u0440\u0430\u043a\u0442\u0438\u0447\u0435\u0441\u043a\u0438\u0439 \u0445\u0430\u0440\u0430\u043a\u0442\u0435\u0440.<\/p>\n

    Claude \u0434\u043e\u043b\u0436\u0435\u043d \u0431\u044b\u043b \u043e\u0431\u0435\u0441\u043f\u0435\u0447\u0438\u0442\u044c \u043f\u0435\u0440\u0432\u044b\u0435 70%: \u0441\u0442\u0440\u0443\u043a\u0442\u0443\u0440\u0443 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430, \u043b\u043e\u0433\u0438\u043a\u0443 \u043a\u0430\u043b\u0435\u043d\u0434\u0430\u0440\u044f, \u0442\u0438\u043f\u044b TypeScript, \u0431\u0430\u0437\u043e\u0432\u043e\u0435 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435 \u0438 \u0432\u0441\u0435 \u0442\u0435 \u0441\u043a\u0443\u0447\u043d\u044b\u0435 \u043c\u043e\u043c\u0435\u043d\u0442\u044b, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043e\u0431\u044b\u0447\u043d\u043e \u043e\u0442\u043d\u0438\u043c\u0430\u044e\u0442 \u0432\u0440\u0435\u043c\u044f, \u043d\u043e \u043d\u0435 \u0442\u0440\u0435\u0431\u0443\u044e\u0442 \u043e\u0441\u043e\u0431\u044b\u0445 \u0440\u0435\u0448\u0435\u043d\u0438\u0439, \u0441\u0432\u044f\u0437\u0430\u043d\u043d\u044b\u0445 \u0441 \u043f\u0440\u043e\u0434\u0443\u043a\u0442\u043e\u043c.<\/p>\n

    \u041e\u0441\u0442\u0430\u043b\u044c\u043d\u044b\u0435 30% \u043e\u0441\u0442\u0430\u0432\u0430\u043b\u0438\u0441\u044c \u0437\u0430 \u043d\u0430\u043c\u0438: ARIA-\u0430\u0442\u0440\u0438\u0431\u0443\u0442\u044b, keyboard navigation, focus management, \u0442\u0435\u0441\u0442\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0435 \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e screen reader’\u043e\u0432 \u0438 \u0432\u0441\u0435 \u0442\u0435 \u043c\u043e\u043c\u0435\u043d\u0442\u044b, \u0432 \u043a\u043e\u0442\u043e\u0440\u044b\u0445 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 \u0434\u043e\u043b\u0436\u0435\u043d \u043a\u043e\u0440\u0440\u0435\u043a\u0442\u043d\u043e \u0440\u0430\u0431\u043e\u0442\u0430\u0442\u044c \u0434\u043b\u044f \u0440\u0435\u0430\u043b\u044c\u043d\u043e\u0433\u043e \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044f.<\/p>\n

    \u042d\u0442\u0430 \u043e\u0446\u0435\u043d\u043a\u0430 \u043e\u043a\u0430\u0437\u0430\u043b\u0430\u0441\u044c \u0432\u0435\u0440\u043d\u043e\u0439 \u0432 \u0446\u0435\u043b\u043e\u043c, \u043d\u043e \u0442\u0430\u043a\u043e\u0435 \u0440\u0430\u0437\u0434\u0435\u043b\u0435\u043d\u0438\u0435 \u0432\u0432\u0435\u043b\u043e \u0432 \u0437\u0430\u0431\u043b\u0443\u0436\u0434\u0435\u043d\u0438\u0435. Claude \u043d\u0435 \u043f\u043e\u0434\u0432\u0435\u043b \u0432 \u0432\u0438\u0434\u0438\u043c\u044b\u0445 70%, \u043d\u043e \u043f\u043e\u0434\u0432\u0435\u043b \u0432 \u043d\u0435\u0432\u0438\u0434\u0438\u043c\u043e\u0439 \u0447\u0430\u0441\u0442\u0438, \u0433\u0434\u0435 \u043d\u0430 \u0441\u0430\u043c\u043e\u043c \u0434\u0435\u043b\u0435 \u0438 \u0441\u043a\u0440\u044b\u0432\u0430\u0435\u0442\u0441\u044f \u0434\u043e\u0441\u0442\u0443\u043f\u043d\u043e\u0441\u0442\u044c.<\/strong><\/p>\n

    AI \u043d\u0430 \u0441\u0442\u0430\u0440\u0442\u0435: \u00abClaude, \u043d\u0430\u043f\u0438\u0448\u0438 \u043c\u043d\u0435 DatePicker!\u00bb<\/h2>\n

    \u041d\u0430\u0447\u0430\u043b\u0438 \u0441 \u043c\u0430\u043b\u043e\u0433\u043e: \u0434\u0430\u043b\u0438 Claude \u0434\u0435\u0442\u0430\u043b\u044c\u043d\u044b\u0439 promt \u0441 \u0442\u0440\u0435\u0431\u043e\u0432\u0430\u043d\u0438\u044f\u043c\u0438 WAI-ARIA APG \u00abDate Picker Dialog\u00bb<\/a> \u0438 \u043f\u043e\u043f\u0440\u043e\u0441\u0438\u043b\u0438 \u0441\u0433\u0435\u043d\u0435\u0440\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0444\u0443\u043d\u0434\u0430\u043c\u0435\u043d\u0442 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430: React, TypeScript, WCAG<\/abbr>-\u0434\u043e\u0441\u0442\u0443\u043f\u043d\u043e\u0441\u0442\u044c, \u0431\u0430\u0437\u043e\u0432\u0430\u044f \u0441\u0442\u0440\u0443\u043a\u0442\u0443\u0440\u0430.<\/p>\n

    Promt \u043a Claude<\/h3>\n
    \u0421\u043e\u0437\u0434\u0430\u0439 React- \u0438 TypeScript-\u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 DatePicker \u0431\u0435\u0437 \u0432\u043d\u0435\u0448\u043d\u0438\u0445 \u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e\u0441\u0442\u0435\u0439, \u0441\u043b\u0435\u0434\u0443\u044f \u0448\u0430\u0431\u043b\u043e\u043d\u0443 WAI-ARIA APG \u00abDate Picker Dialog\u00bb. WCAG 2.1\/2.2 Level AA.2. \u0421\u0442\u0440\u0443\u043a\u0442\u0443\u0440\u0430: input + aria-describedby \u0434\u043b\u044f \u0444\u043e\u0440\u043c\u0430\u0442\u0430+ \u043a\u043d\u043e\u043f\u043a\u0430-\u0442\u0440\u0438\u0433\u0433\u0435\u0440 \u0441 \u0434\u0438\u043d\u0430\u043c\u0438\u0447\u0435\u0441\u043a\u0438\u043c aria-label+ popover (role=\"dialog\", aria-modal=\"true\")+ calendar grid (table role=\"grid\")3. Roving tabindex \u043d\u0430 \u2014 \u0431\u0435\u0437 \u0432\u043b\u043e\u0436\u0435\u043d\u043d\u044b\u04454. aria-live=\"polite\" \u043d\u0430 \u0437\u0430\u0433\u043e\u043b\u043e\u0432\u043a\u0435 \u043c\u0435\u0441\u044f\u0446\u04305. aria-selected \u0442\u043e\u043b\u044c\u043a\u043e \u043d\u0430 \u0432\u044b\u0431\u0440\u0430\u043d\u043d\u043e\u0439 \u0434\u0430\u0442\u04356. aria-disabled=\"true\" \u043d\u0430 \u043d\u0435\u0434\u043e\u0441\u0442\u0443\u043f\u043d\u044b\u0445 \u0434\u0430\u0442\u0430\u04457. \u041f\u043e\u043b\u043d\u0430\u044f keyboard navigation: \u0441\u0442\u0440\u0435\u043b\u043a\u0438, Home\/End,PageUp\/PageDown, Shift+PageUp\/Down, Enter\/Space, Escape8. Focus trap \u0432\u043d\u0443\u0442\u0440\u0438 dialog9. \u041f\u0440\u0438 \u0437\u0430\u043a\u0440\u044b\u0442\u0438\u0438 \u2014 \u0444\u043e\u043a\u0443\u0441 \u043d\u0430 \u0442\u0440\u0438\u0433\u0433\u0435\u0440, aria-label \u043e\u0431\u043d\u043e\u0432\u043b\u044f\u0435\u0442\u0441\u044f10. Props: value, onChange, minDate?, maxDate?, disabledDates?, locale?11. CSS Modules, \u043a\u043e\u043d\u0442\u0440\u0430\u0441\u0442\u043d\u043e\u0441\u0442\u044c \u2265 4.5:112. \u0411\u0435\u0437 \u0432\u043d\u0435\u0448\u043d\u0438\u0445 \u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e\u0441\u0442\u0435\u0439 \u043a\u0440\u043e\u043c\u0435 React<\/code>
    <\/a><\/div><\/pre>\n
    \u0412\u0430\u0436\u043d\u043e\u0439 \u0434\u0435\u0442\u0430\u043b\u044c\u044e \u0437\u0434\u0435\u0441\u044c \u044f\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u0441\u0441\u044b\u043b\u043a\u0430 \u043d\u0430 \u043a\u043e\u043d\u043a\u0440\u0435\u0442\u043d\u044b\u0439 \u0448\u0430\u0431\u043b\u043e\u043d APG<\/abbr>. \u0411\u0435\u0437 \u043d\u0435\u0435 Claude, \u043a\u0430\u043a \u043f\u0440\u0430\u0432\u0438\u043b\u043e, \u0433\u0435\u043d\u0435\u0440\u0438\u0440\u0443\u0435\u0442 \u0441\u044b\u0440\u043e\u0439 DataPicker \u0431\u0435\u0437 \u0443\u0447\u0435\u0442\u0430 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c\u0441\u043a\u043e\u0433\u043e \u043e\u043f\u044b\u0442\u0430. \u0421 \u043d\u0435\u0439 \u0436\u0435 Claude \u043f\u043e \u043a\u0440\u0430\u0439\u043d\u0435\u0439 \u043c\u0435\u0440\u0435 \u043f\u044b\u0442\u0430\u0435\u0442\u0441\u044f \u0441\u043b\u0435\u0434\u043e\u0432\u0430\u0442\u044c \u0438\u0437\u0432\u0435\u0441\u0442\u043d\u043e\u0439 \u043c\u043e\u0434\u0435\u043b\u0438 \u0432\u0437\u0430\u0438\u043c\u043e\u0434\u0435\u0439\u0441\u0442\u0432\u0438\u044f.<\/p>\n
    \u041f\u0435\u0440\u0432\u044b\u0439 \u043e\u0442\u0432\u0435\u0442 \u0431\u044b\u043b \u043e\u0431\u043d\u0430\u0434\u0435\u0436\u0438\u0432\u0430\u044e\u0449\u0438\u043c (\u043f\u043e\u043b\u043d\u044b\u0439 \u043e\u0442\u0432\u0435\u0442 \u043f\u043e\u00a0\u0441\u0441\u044b\u043b\u043a\u0435<\/a>). Claude \u0432\u044b\u0434\u0430\u043b \u0432\u043f\u043e\u043b\u043d\u0435 \u0440\u0430\u0431\u043e\u0447\u0443\u044e \u0441\u0442\u0440\u0443\u043a\u0442\u0443\u0440\u0443: input \u0441 aria-describedby<\/code> \u0434\u043b\u044f \u0444\u043e\u0440\u043c\u0430\u0442\u0430, \u043a\u043d\u043e\u043f\u043a\u0430-\u0442\u0440\u0438\u0433\u0433\u0435\u0440 \u0441 \u0434\u0438\u043d\u0430\u043c\u0438\u0447\u0435\u0441\u043a\u0438\u043c aria-label<\/code>, popover \u0441 role=\"dialog\"<\/code> \u0438 aria-modal=\"true\"<\/code>, \u043a\u0430\u043b\u0435\u043d\u0434\u0430\u0440\u043d\u0430\u044f \u0441\u0435\u0442\u043a\u0430 (table \u0441 role=\"grid\"<\/code>). \u0420\u0435\u0430\u043a\u0446\u0438\u044f \u043a\u043e\u043c\u0430\u043d\u0434\u044b: \u00ab\u043f\u043e\u0447\u0442\u0438 \u0433\u043e\u0442\u043e\u0432\u043e\u00bb \u2014 \u0435\u0441\u0442\u044c \u0434\u0430\u0436\u0435 keyboard navigation, \u043d\u043e \u0433\u043b\u0430\u0432\u043d\u044b\u0435 \u0438\u0441\u043f\u044b\u0442\u0430\u043d\u0438\u044f \u0436\u0434\u0430\u043b\u0438 \u043d\u0430\u0441 \u0432\u043f\u0435\u0440\u0435\u0434\u0438.<\/p>\n
    \u0417\u0430\u043f\u0443\u0441\u043a\u0430\u0435\u043c:<\/strong><\/p>\n
    \"\u041f\u0435\u0440\u0432\u044b\u0439<\/p>\n
    \u041f\u0435\u0440\u0432\u044b\u0439 \u0437\u0430\u043f\u0443\u0441\u043a DatePicker’\u0430 \u0441 \u043e\u0448\u0438\u0431\u043a\u0430\u043c\u0438<\/figcaption><\/div>\n<\/figure>\n
    \u0424\u0430\u0439\u043b \/public\/index.html \u043f\u0440\u0438\u0448\u043b\u043e\u0441\u044c \u0434\u043e\u0431\u0430\u0432\u043b\u044f\u0442\u044c \u0441\u0430\u043c\u043e\u0441\u0442\u043e\u044f\u0442\u0435\u043b\u044c\u043d\u043e \u2014 Claude \u043f\u0440\u043e \u043d\u0435\u0433\u043e \u0437\u0430\u0431\u044b\u043b.<\/p>\n
    \"\u0421\u0442\u0440\u0443\u043a\u0442\u0443\u0440\u0430<\/p>\n
    \u0421\u0442\u0440\u0443\u043a\u0442\u0443\u0440\u0430 \u043f\u0440\u043e\u0435\u043a\u0442\u0430<\/figcaption><\/div>\n<\/figure>\n
    \u0427\u0442\u043e \u0443 Claude \u043f\u043e\u043b\u0443\u0447\u0438\u043b\u043e\u0441\u044c \u0445\u043e\u0440\u043e\u0448\u043e?<\/h3>\n
    \u041e\u043d \u043e\u0431\u0435\u0441\u043f\u0435\u0447\u0438\u043b \u0440\u0430\u0437\u0443\u043c\u043d\u043e\u0435 \u0440\u0430\u0437\u0434\u0435\u043b\u0435\u043d\u0438\u0435 \u043c\u0435\u0436\u0434\u0443 DatePicker, CalendarGrid \u0438 DayCell, \u043d\u0435 \u0441\u043e\u0437\u0434\u0430\u043b \u043e\u0434\u0438\u043d \u043e\u0433\u0440\u043e\u043c\u043d\u044b\u0439 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442, \u0432 \u043a\u043e\u0442\u043e\u0440\u043e\u043c \u0432\u0441\u0435 \u0430\u0441\u043f\u0435\u043a\u0442\u044b \u0431\u044b\u043b\u0438 \u0431\u044b \u0441\u043e\u0431\u0440\u0430\u043d\u044b \u0432 \u043e\u0434\u043d\u043e\u043c \u0444\u0430\u0439\u043b\u0435.<\/p>\n
    \u0421\u043a\u0435\u043b\u0435\u0442 ARIA<\/abbr> \u0442\u0430\u043a\u0436\u0435 \u0431\u044b\u043b \u0447\u0430\u0441\u0442\u0438\u0447\u043d\u043e \u043f\u0440\u0430\u0432\u0438\u043b\u044c\u043d\u044b\u043c. \u0421\u0435\u0442\u043a\u0430, \u0441\u0442\u0440\u043e\u043a\u0438 \u0438 \u044f\u0447\u0435\u0439\u043a\u0438 \u0431\u044b\u043b\u0438 \u043d\u0430 \u043c\u0435\u0441\u0442\u0435. \u041c\u0435\u0442\u043a\u0438 \u0434\u0430\u0442 \u043d\u0435 \u0431\u044b\u043b\u0438 \u043f\u0440\u043e\u0441\u0442\u043e \u0446\u0438\u0444\u0440\u0430\u043c\u0438. Claude \u0441\u0433\u0435\u043d\u0435\u0440\u0438\u0440\u043e\u0432\u0430\u043b \u043c\u0435\u0442\u043a\u0438, \u0431\u043b\u0438\u0436\u0435 \u043a \u043f\u043e\u043b\u043d\u044b\u043c \u0434\u0430\u0442\u0430\u043c, \u0447\u0442\u043e \u0438 \u0431\u044b\u043b\u043e \u043d\u0443\u0436\u043d\u043e screen reader’\u0443.<\/p>\n
    \u0414\u043b\u044f \u043f\u0435\u0440\u0432\u043e\u0433\u043e \u043f\u0440\u043e\u0445\u043e\u0434\u0430 \u043f\u0440\u043e\u043f\u0441\u044b TypeScript \u0431\u044b\u043b\u0438 \u0432\u043f\u043e\u043b\u043d\u0435 \u043f\u0440\u0438\u0435\u043c\u043b\u0435\u043c\u044b: value<\/code>, onChange<\/code>, minDate<\/code>, maxDate<\/code>, disabledDates<\/code> \u0438 locale<\/code>.<\/p>\n
    \u041b\u043e\u0433\u0438\u043a\u0430 \u043a\u0430\u043b\u0435\u043d\u0434\u0430\u0440\u044f \u0442\u0430\u043a\u0436\u0435 \u0440\u0430\u0431\u043e\u0442\u0430\u043b\u0430 \u0432 \u043e\u0431\u044b\u0447\u043d\u044b\u0445 \u0441\u0446\u0435\u043d\u0430\u0440\u0438\u044f\u0445 \u0432\u0437\u0430\u0438\u043c\u043e\u0434\u0435\u0439\u0441\u0442\u0432\u0438\u044f \u0441 \u043c\u044b\u0448\u044c\u044e. \u0420\u0430\u0441\u0447\u0435\u0442 \u043c\u0435\u0441\u044f\u0446\u0430, \u0437\u0430\u043f\u043e\u043b\u043d\u0435\u043d\u0438\u0435 \u044f\u0447\u0435\u0435\u043a, \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435 \u0432\u044b\u0431\u0440\u0430\u043d\u043d\u043e\u0439 \u0434\u0430\u0442\u044b \u0438 \u0431\u0430\u0437\u043e\u0432\u043e\u0435 \u043f\u0435\u0440\u0435\u043a\u043b\u044e\u0447\u0435\u043d\u0438\u0435 \u2014 \u0432\u0441\u0435 \u044d\u0442\u043e \u0431\u044b\u043b\u043e \u0440\u0430\u0431\u043e\u0442\u043e\u0441\u043f\u043e\u0441\u043e\u0431\u043d\u043e.<\/p>\n
    \u041c\u044b \u0441\u043e\u0445\u0440\u0430\u043d\u0438\u043b\u0438 \u043f\u0440\u0438\u043c\u0435\u0440\u043d\u043e 60% \u044d\u0442\u043e\u0439 \u0431\u0430\u0437\u044b. \u0417\u0430\u0442\u0435\u043c \u044f \u0437\u0430\u043f\u0443\u0441\u0442\u0438\u043b NVDA<\/abbr>.<\/p>\n
    \u0427\u0442\u043e \u0443 Claude \u043d\u0435 \u043f\u043e\u043b\u0443\u0447\u0438\u043b\u043e\u0441\u044c?<\/h3>\n
    \u041f\u0435\u0440\u0432\u043e\u0439 \u0441\u0435\u0440\u044c\u0435\u0437\u043d\u043e\u0439 \u043f\u0440\u043e\u0431\u043b\u0435\u043c\u043e\u0439 \u043e\u043a\u0430\u0437\u0430\u043b\u0441\u044f \u0444\u043e\u043a\u0443\u0441. \u042f \u043e\u0442\u043a\u0440\u044b\u043b \u0434\u0438\u0430\u043b\u043e\u0433\u043e\u0432\u043e\u0435 \u043e\u043a\u043d\u043e, \u043d\u0430\u0436\u0430\u043b Tab, \u0438 \u0444\u043e\u043a\u0443\u0441 \u043f\u043e\u043a\u0438\u043d\u0443\u043b \u043a\u0430\u043b\u0435\u043d\u0434\u0430\u0440\u044c \u2014 \u044d\u0442\u043e\u0433\u043e \u043d\u0435 \u0434\u043e\u043b\u0436\u043d\u043e \u0431\u044b\u043b\u043e \u043f\u0440\u043e\u0438\u0437\u043e\u0439\u0442\u0438. \u041c\u043e\u0434\u0430\u043b\u044c\u043d\u043e\u0435 \u0434\u0438\u0430\u043b\u043e\u0433\u043e\u0432\u043e\u0435 \u043e\u043a\u043d\u043e \u0434\u043e\u043b\u0436\u043d\u043e \u0443\u0434\u0435\u0440\u0436\u0438\u0432\u0430\u0442\u044c \u0444\u043e\u043a\u0443\u0441 \u0432\u043d\u0443\u0442\u0440\u0438, \u043f\u043e\u043a\u0430 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c \u0435\u0433\u043e \u043d\u0435 \u0437\u0430\u043a\u0440\u043e\u0435\u0442.<\/p>\n
    \n
    \n\n\n\n\n\n\n\n\n\n
    \n
    \u041a\u043b\u0430\u0432\u0438\u0448\u0430<\/strong><\/p>\n<\/td>\n
    		\n
    \u0421\u0442\u0430\u0442\u0443\u0441<\/strong><\/p>\n<\/td>\n<\/tr>\n
    \n
    \u2190 \u2192 \u2191 \u2193<\/p>\n<\/td>\n
    		\n
    \u0420\u0430\u0431\u043e\u0442\u0430\u043b\u043e<\/p>\n<\/td>\n<\/tr>\n
    \n
    Home<\/p>\n<\/td>\n
    		\n
    \u041d\u0435 \u0440\u0430\u0431\u043e\u0442\u0430\u043b\u043e<\/p>\n<\/td>\n<\/tr>\n
    \n
    End<\/p>\n<\/td>\n
    		\n
    \u041d\u0435 \u0440\u0430\u0431\u043e\u0442\u0430\u043b\u043e<\/p>\n<\/td>\n<\/tr>\n
    \n
    PageUp \u0438 PageDown<\/p>\n<\/td>\n
    		\n
    \u041d\u0435 \u0440\u0430\u0431\u043e\u0442\u0430\u043b\u043e<\/p>\n<\/td>\n<\/tr>\n
    \n
    Shift + PageUp<\/p>\n<\/td>\n
    		\n
    \u041d\u0435 \u0440\u0430\u0431\u043e\u0442\u0430\u043b\u043e<\/p>\n<\/td>\n<\/tr>\n
    \n
    Shift + PageDown<\/p>\n<\/td>\n
    		\n
    \u041d\u0435 \u0440\u0430\u0431\u043e\u0442\u0430\u043b\u043e<\/p>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n<\/div>\n
    \u041a\u043b\u0430\u0432\u0438\u0448\u0430 \u00abEsc\u00bb \u0437\u0430\u043a\u0440\u044b\u0432\u0430\u043b\u0430 \u0434\u0438\u0430\u043b\u043e\u0433\u043e\u0432\u043e\u0435 \u043e\u043a\u043d\u043e, \u043d\u043e \u0444\u043e\u043a\u0443\u0441 \u043d\u0435 \u0432\u0441\u0435\u0433\u0434\u0430 \u043d\u0430\u0434\u0435\u0436\u043d\u043e \u0432\u043e\u0437\u0432\u0440\u0430\u0449\u0430\u043b\u0441\u044f \u043a \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0443-\u0442\u0440\u0438\u0433\u0433\u0435\u0440\u0443. \u0412 \u043e\u0434\u043d\u043e\u043c \u0441\u043b\u0443\u0447\u0430\u0435 \u043e\u043d \u043e\u043a\u0430\u0437\u0430\u043b\u0441\u044f \u043d\u0430 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0435 body, \u0447\u0442\u043e \u044f\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u0432\u0435\u0436\u043b\u0438\u0432\u044b\u043c \u0441\u043f\u043e\u0441\u043e\u0431\u043e\u043c \u0441\u043a\u0430\u0437\u0430\u0442\u044c, \u0447\u0442\u043e \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c \u043e\u043a\u0430\u0437\u0430\u043b\u0441\u044f \u0432 \u0442\u0443\u043f\u0438\u043a\u0435.<\/p>\n
    \u041f\u0440\u043e\u0431\u043b\u0435\u043c\u044b \u0441\u043e screen reader’\u043e\u043c \u0431\u044b\u043b\u0438 \u0435\u0449\u0435 \u0445\u0443\u0436\u0435.<\/p>\n
      \n
    1. \n
      \u0417\u0430\u0433\u043e\u043b\u043e\u0432\u043e\u043a \u043c\u0435\u0441\u044f\u0446\u0430 \u043d\u0435 \u0438\u043c\u0435\u043b \u0430\u0442\u0440\u0438\u0431\u0443\u0442\u0430 aria-live=\"polite\"<\/code>, \u043f\u043e\u044d\u0442\u043e\u043c\u0443 NVDA<\/abbr> \u043d\u0435 \u043e\u0431\u044a\u044f\u0432\u043b\u044f\u043b\u0430 \u043e\u0431 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u0438 \u043c\u0435\u0441\u044f\u0446\u0430. \u0417\u0440\u044f\u0447\u0438\u0439 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c \u0432\u0438\u0434\u0438\u0442, \u043a\u0430\u043a \u043c\u0435\u043d\u044f\u0435\u0442\u0441\u044f \u043c\u0435\u0441\u044f\u0446. \u041f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c screen reader’\u0430 \u0441\u043b\u044b\u0448\u0438\u0442 \u0442\u043e\u043b\u044c\u043a\u043e \u0442\u0438\u0448\u0438\u043d\u0443.<\/p>\n<\/li>\n
    2. \n
      Claude \u0442\u0430\u043a\u0436\u0435 \u0434\u043e\u0431\u0430\u0432\u0438\u043b \u0430\u0442\u0440\u0438\u0431\u0443\u0442 aria-selected=\"false\"<\/code> \u043a\u043e \u0432\u0441\u0435\u043c \u043d\u0435\u0432\u044b\u0431\u0440\u0430\u043d\u043d\u044b\u043c \u0434\u043d\u044f\u043c. \u042d\u0442\u043e \u0432\u044b\u0433\u043b\u044f\u0434\u0438\u0442 \u0431\u0435\u0437\u043e\u0431\u0438\u0434\u043d\u043e, \u0435\u0441\u043b\u0438 \u043f\u0440\u043e\u0441\u0442\u043e \u043f\u0440\u043e\u0441\u043c\u0430\u0442\u0440\u0438\u0432\u0430\u0442\u044c DOM<\/abbr>, \u043d\u043e \u044d\u0442\u043e \u043d\u0435 \u0442\u0430\u043a, \u0432\u0435\u0434\u044c \u0432\u044b\u0431\u0440\u0430\u043d\u043d\u0430\u044f \u0434\u0430\u0442\u0430 \u0434\u043e\u043b\u0436\u043d\u0430 \u0438\u043c\u0435\u0442\u044c \u0430\u0442\u0440\u0438\u0431\u0443\u0442 aria-selected<\/code>, \u0430 \u0434\u0440\u0443\u0433\u0438\u0435 \u0434\u0430\u0442\u044b \u043d\u0435 \u0434\u043e\u043b\u0436\u043d\u044b \u0441\u043d\u043e\u0432\u0430 \u0438 \u0441\u043d\u043e\u0432\u0430 \u043f\u043e\u0432\u0442\u043e\u0440\u044f\u0442\u044c, \u0447\u0442\u043e \u043e\u043d\u0438 \u043d\u0435 \u0432\u044b\u0431\u0440\u0430\u043d\u044b. \u0412 \u0441\u0433\u0435\u043d\u0435\u0440\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u043e\u0439 \u0432\u0435\u0440\u0441\u0438\u0438 \u043d\u0430\u0432\u0438\u0433\u0430\u0446\u0438\u044f \u0431\u044b\u0441\u0442\u0440\u043e \u0441\u0442\u0430\u043b\u0430 \u00ab\u0448\u0443\u043c\u043d\u043e\u0439\u00bb.<\/p>\n<\/li>\n
    3. \n
      \u0412 \u043f\u043e\u043b\u0435 \u0432\u0432\u043e\u0434\u0430 \u0442\u0430\u043a\u0436\u0435 \u043e\u0442\u0441\u0443\u0442\u0441\u0442\u0432\u043e\u0432\u0430\u043b \u0430\u0442\u0440\u0438\u0431\u0443\u0442 aria-describedby<\/code>, \u043f\u043e\u044d\u0442\u043e\u043c\u0443 \u044d\u043a\u0440\u0430\u043d\u043d\u044b\u0439 \u0441\u0447\u0438\u0442\u044b\u0432\u0430\u0442\u0435\u043b\u044c \u043d\u0435 \u043e\u0437\u0432\u0443\u0447\u0438\u0432\u0430\u043b \u043e\u0436\u0438\u0434\u0430\u0435\u043c\u044b\u0439 \u0444\u043e\u0440\u043c\u0430\u0442 \u0434\u0430\u0442\u044b.<\/p>\n<\/li>\n<\/ol>\n
      \u0411\u044b\u043b\u0430 \u0442\u0430\u043a\u0436\u0435 \u043e\u0434\u043d\u0430 \u043e\u0448\u0438\u0431\u043a\u0430, \u043d\u0435 \u0441\u0432\u044f\u0437\u0430\u043d\u043d\u0430\u044f \u0441 \u0434\u043e\u0441\u0442\u0443\u043f\u043d\u043e\u0441\u0442\u044c\u044e: \u043f\u0440\u0438 keyboard navigation \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043b\u0438\u0441\u044c \u0438\u043d\u0434\u0435\u043a\u0441\u0430\u0446\u0438\u0438 \u0447\u0438\u0441\u043b\u043e\u0432\u043e\u0433\u043e \u043c\u0430\u0441\u0441\u0438\u0432\u0430 \u2014 \u044d\u0442\u043e \u0440\u0430\u0431\u043e\u0442\u0430\u043b\u043e \u0434\u043e \u0442\u0435\u0445 \u043f\u043e\u0440, \u043f\u043e\u043a\u0430 \u0444\u043e\u043a\u0443\u0441 \u043d\u0435 \u043f\u0435\u0440\u0435\u0441\u0435\u043a\u0430\u043b \u0433\u0440\u0430\u043d\u0438\u0446\u044b \u043c\u0435\u0441\u044f\u0446\u0435\u0432 \u0438\u043b\u0438 \u043d\u0435 \u043a\u0430\u0441\u0430\u043b\u0441\u044f \u044f\u0447\u0435\u0435\u043a \u043e\u0442\u0441\u0442\u0443\u043f\u0430. 31 \u044f\u043d\u0432\u0430\u0440\u044f \u043f\u043b\u044e\u0441 \u043e\u0434\u0438\u043d \u0434\u0435\u043d\u044c \u0434\u043e\u043b\u0436\u0435\u043d \u043f\u0440\u0435\u0432\u0440\u0430\u0442\u0438\u0442\u044c\u0441\u044f \u0432 1 \u0444\u0435\u0432\u0440\u0430\u043b\u044f. \u0418\u043d\u0434\u0435\u043a\u0441 \u043c\u0430\u0441\u0441\u0438\u0432\u0430 \u044d\u0442\u043e\u0433\u043e \u043d\u0435 \u043f\u043e\u043d\u0438\u043c\u0430\u0435\u0442, \u0430 \u043e\u0431\u044a\u0435\u043a\u0442 Date \u2014 \u043f\u043e\u043d\u0438\u043c\u0430\u0435\u0442.<\/p>\n
      \u0412\u043e\u0442 \u0432 \u0447\u0435\u043c \u0437\u0430\u043a\u043b\u044e\u0447\u0430\u043b\u0430\u0441\u044c \u0441\u0443\u0442\u044c \u043f\u0440\u043e\u0431\u043b\u0435\u043c\u044b: \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 \u0440\u0430\u0431\u043e\u0442\u0430\u043b \u0434\u043b\u044f \u0434\u0435\u043c\u043e\u043d\u0441\u0442\u0440\u0430\u0446\u0438\u0438, \u043d\u043e \u043d\u0435 \u0441\u043e\u043e\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u043e\u0432\u0430\u043b \u043c\u043e\u0434\u0435\u043b\u0438 \u0432\u0437\u0430\u0438\u043c\u043e\u0434\u0435\u0439\u0441\u0442\u0432\u0438\u044f. \u0414\u0430\u043b\u044c\u0448\u0435 \u0442\u0440\u0438 \u044d\u0442\u0430\u043f\u0430: \u043a\u0430\u043a \u043c\u044b \u044d\u0442\u043e \u0447\u0438\u043d\u0438\u043b\u0438.<\/strong><\/p>\n
      \u042d\u0442\u0430\u043f 1. \u041f\u0435\u0440\u0435\u0440\u0430\u0431\u043e\u0442\u0430\u0442\u044c \u00ab\u043b\u043e\u0432\u0443\u0448\u043a\u0438 \u0444\u043e\u043a\u0443\u0441\u0430\u00bb \u0432\u043e\u043a\u0440\u0443\u0433 \u0442\u0435\u043a\u0443\u0449\u0435\u0433\u043e DOM<\/h2>\n
      \u00ab\u041b\u043e\u0432\u0443\u0448\u043a\u0430 \u0444\u043e\u043a\u0443\u0441\u0430\u00bb Claude \u0441\u043e\u0431\u0438\u0440\u0430\u043b\u0430 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u044b, \u043d\u0430 \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043c\u043e\u0436\u043d\u043e \u043f\u0435\u0440\u0435\u0432\u0435\u0441\u0442\u0438 \u0444\u043e\u043a\u0443\u0441, \u0442\u043e\u043b\u044c\u043a\u043e \u043e\u0434\u0438\u043d \u0440\u0430\u0437 \u2014 \u043f\u0440\u0438 \u043e\u0442\u043a\u0440\u044b\u0442\u0438\u0438 \u0434\u0438\u0430\u043b\u043e\u0433\u043e\u0432\u043e\u0433\u043e \u043e\u043a\u043d\u0430. \u0412 \u043a\u0430\u043b\u0435\u043d\u0434\u0430\u0440\u0435 \u0442\u0430\u043a\u043e\u0439 \u043f\u043e\u0434\u0445\u043e\u0434 \u043d\u0435\u043d\u0430\u0434\u0435\u0436\u0435\u043d, \u043f\u0440\u0438 \u0441\u043c\u0435\u043d\u0435 \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0430\u0435\u043c\u043e\u0433\u043e \u043c\u0435\u0441\u044f\u0446\u0430 DOM<\/abbr> \u0438\u0437\u043c\u0435\u043d\u044f\u0435\u0442\u0441\u044f, \u044f\u0447\u0435\u0439\u043a\u0438 \u0434\u043d\u0435\u0439 \u0441\u043e\u0437\u0434\u0430\u044e\u0442\u0441\u044f \u0437\u0430\u043d\u043e\u0432\u043e, \u0430 \u00ab\u043b\u043e\u0432\u0443\u0448\u043a\u0430\u00bb, \u043e\u0441\u043d\u043e\u0432\u0430\u043d\u043d\u0430\u044f \u043d\u0430 \u0441\u0442\u0430\u0440\u044b\u0445 \u0443\u0437\u043b\u0430\u0445, \u043d\u0430\u0447\u0438\u043d\u0430\u0435\u0442 \u0443\u0434\u0435\u0440\u0436\u0438\u0432\u0430\u0442\u044c \u00ab\u043f\u0440\u0438\u0437\u0440\u0430\u043a\u0438\u00bb.<\/p>\n
      \u041c\u044b \u0438\u0437\u043c\u0435\u043d\u0438\u043b\u0438 \u043b\u043e\u0433\u0438\u043a\u0443 \u0442\u0430\u043a, \u0447\u0442\u043e\u0431\u044b \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u044b, \u043d\u0430 \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043c\u043e\u0436\u043d\u043e \u043f\u0435\u0440\u0435\u0432\u0435\u0441\u0442\u0438 \u0444\u043e\u043a\u0443\u0441, \u043f\u0435\u0440\u0435\u0441\u0447\u0438\u0442\u044b\u0432\u0430\u043b\u0438\u0441\u044c \u043f\u0440\u0438 \u043a\u0430\u0436\u0434\u043e\u043c \u0441\u043e\u0431\u044b\u0442\u0438\u0438 Tab.<\/p>\n
      function useFocusTrap(  containerRef: React.RefObject<HTMLDivElement>,  isOpen: boolean) {  const triggerRef = useRef<HTMLElement | null>(null);   useEffect(() => {if (!isOpen) return; const container = containerRef.current;if (!container) return; triggerRef.current = document.activeElement as HTMLElement; function getFocusable() {  return container!.querySelectorAll<HTMLElement>(    'td[tabindex=\"0\"], button:not([disabled])'  );} function handleKeyDown(e: KeyboardEvent) {  if (e.key !== 'Tab') return;   const focusable = getFocusable();  if (!focusable.length) return;   const first = focusable[0];  const last = focusable[focusable.length - 1];   if (e.shiftKey && document.activeElement === first) {    e.preventDefault();    last.focus();  } else if (!e.shiftKey && document.activeElement === last) {    e.preventDefault();    first.focus();  }} container.addEventListener('keydown', handleKeyDown);    container.querySelector<HTMLElement>('td[tabindex=\"0\"]')?.focus(); return () => {  container.removeEventListener('keydown', handleKeyDown);  triggerRef.current?.focus();};  }, [isOpen, containerRef]);}<\/code>
      <\/a><\/div><\/pre>\n
      \u041c\u0435\u0445\u0430\u043d\u0438\u0437\u043c \u0432\u0430\u0436\u043d\u0435\u0435 \u0441\u0430\u043c\u043e\u0433\u043e \u0444\u0440\u0430\u0433\u043c\u0435\u043d\u0442\u0430 \u043a\u043e\u0434\u0430. \u041b\u043e\u0432\u0443\u0448\u043a\u0430 \u0444\u043e\u043a\u0443\u0441\u0430 \u0432 \u0434\u0438\u043d\u0430\u043c\u0438\u0447\u0435\u0441\u043a\u043e\u043c \u043a\u0430\u043b\u0435\u043d\u0434\u0430\u0440\u0435 \u043d\u0435 \u043c\u043e\u0436\u0435\u0442 \u0438\u0441\u0445\u043e\u0434\u0438\u0442\u044c \u0438\u0437 \u0442\u043e\u0433\u043e, \u0447\u0442\u043e \u0441\u043f\u0438\u0441\u043e\u043a \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432, \u043d\u0430 \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043c\u043e\u0436\u043d\u043e \u0443\u0441\u0442\u0430\u043d\u043e\u0432\u0438\u0442\u044c \u0444\u043e\u043a\u0443\u0441, \u043e\u0441\u0442\u0430\u0435\u0442\u0441\u044f \u043d\u0435\u0438\u0437\u043c\u0435\u043d\u043d\u044b\u043c. \u041c\u0435\u0441\u044f\u0446 \u043c\u0435\u043d\u044f\u0435\u0442\u0441\u044f, DOM<\/abbr> \u043c\u0435\u043d\u044f\u0435\u0442\u0441\u044f, \u0438 \u043b\u043e\u0432\u0443\u0448\u043a\u0430 \u0434\u043e\u043b\u0436\u043d\u0430 \u0440\u0430\u0431\u043e\u0442\u0430\u0442\u044c \u0441 \u0442\u0435\u043c, \u0447\u0442\u043e \u0438\u043c\u0435\u0435\u0442\u0441\u044f \u0432 \u0434\u0430\u043d\u043d\u044b\u0439 \u043c\u043e\u043c\u0435\u043d\u0442.<\/p>\n
      \u042d\u0442\u0430\u043f 2. \u041f\u0435\u0440\u0435\u043d\u0435\u0441\u0442\u0438 keyboard navigation \u0438\u0437 \u0438\u043d\u0434\u0435\u043a\u0441\u043e\u0432 \u0432 \u043e\u0431\u044a\u0435\u043a\u0442\u044b Date<\/h2>\n
      \u0412 \u043f\u0435\u0440\u0432\u043e\u043d\u0430\u0447\u0430\u043b\u044c\u043d\u043e\u0439 \u0440\u0435\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u0438 \u0434\u043d\u0438 \u0440\u0430\u0441\u0441\u043c\u0430\u0442\u0440\u0438\u0432\u0430\u043b\u0438\u0441\u044c \u043a\u0430\u043a \u044f\u0447\u0435\u0439\u043a\u0438 \u043c\u0430\u0441\u0441\u0438\u0432\u0430.<\/p>\n
      \u042d\u0442\u043e \u043f\u0440\u0438\u0432\u043e\u0434\u0438\u0442 \u043a \u0441\u0431\u043e\u044f\u043c \u043f\u0440\u0438 \u0440\u0430\u0431\u043e\u0442\u0435 \u0441 \u0437\u0430\u043f\u043e\u043b\u043d\u044f\u044e\u0449\u0438\u043c\u0438 \u044f\u0447\u0435\u0439\u043a\u0430\u043c\u0438 \u0438 \u043d\u0430 \u0433\u0440\u0430\u043d\u0438\u0446\u0430\u0445 \u043c\u0435\u0441\u044f\u0446\u0435\u0432. \u0412\u044b\u0431\u043e\u0440 \u0434\u0430\u0442\u044b \u2014 \u044d\u0442\u043e \u043d\u0435 \u044d\u043b\u0435\u043a\u0442\u0440\u043e\u043d\u043d\u0430\u044f \u0442\u0430\u0431\u043b\u0438\u0446\u0430, \u0430 \u043a\u0430\u043b\u0435\u043d\u0434\u0430\u0440\u044c. \u0412 \u043a\u0430\u043b\u0435\u043d\u0434\u0430\u0440\u0435 \u0443\u0436\u0435 \u0435\u0441\u0442\u044c \u043f\u043e\u0434\u0445\u043e\u0434\u044f\u0449\u0438\u0439 \u043c\u0435\u0445\u0430\u043d\u0438\u0437\u043c \u0434\u043b\u044f \u043f\u0435\u0440\u0435\u043c\u0435\u0449\u0435\u043d\u0438\u044f \u043f\u043e \u043c\u0435\u0441\u044f\u0446\u0430\u043c \u0438 \u0433\u043e\u0434\u0430\u043c.<\/p>\n
      function useCalendarNavigation(  focusedDate: Date,  setFocusedDate: (date: Date) => void,  minDate?: Date,  maxDate?: Date) {  return useCallback((e: React.KeyboardEvent) => {const next = new Date(focusedDate); switch (e.key) {  case 'ArrowRight':    next.setDate(next.getDate() + 1);    break;  case 'ArrowLeft':    next.setDate(next.getDate() - 1);    break;  case 'ArrowDown':    next.setDate(next.getDate() + 7);    break;  case 'ArrowUp':    next.setDate(next.getDate() - 7);    break;  case 'Home':    next.setDate(next.getDate() - ((next.getDay() + 6) % 7));    break;  case 'End':    next.setDate(next.getDate() + ((7 - next.getDay()) % 7));    break;  case 'PageDown':    e.shiftKey      ? next.setFullYear(next.getFullYear() + 1)      : next.setMonth(next.getMonth() + 1);    break;  case 'PageUp':    e.shiftKey      ? next.setFullYear(next.getFullYear() - 1)      : next.setMonth(next.getMonth() - 1);    break;  default:    return;} e.preventDefault(); if (minDate && next < minDate) return;if (maxDate && next > maxDate) return; setFocusedDate(next);  }, [focusedDate, setFocusedDate, minDate, maxDate]);}<\/code>
      <\/a><\/div><\/pre>\n
      \u0411\u043b\u0430\u0433\u043e\u0434\u0430\u0440\u044f \u044d\u0442\u043e\u043c\u0443 \u043f\u043e\u0432\u0435\u0434\u0435\u043d\u0438\u0435 \u0432 \u043a\u0440\u0430\u0439\u043d\u0438\u0445 \u0441\u043b\u0443\u0447\u0430\u044f\u0445 \u0441\u0442\u0430\u043b\u043e \u043f\u0440\u0435\u0434\u0441\u043a\u0430\u0437\u0443\u0435\u043c\u044b\u043c, \u0430 \u044d\u0442\u043e \u0438\u043c\u0435\u043d\u043d\u043e \u0442\u043e, \u0447\u0435\u0433\u043e \u044f \u0438 \u0445\u043e\u0447\u0443 \u043e\u0442 \u043b\u043e\u0433\u0438\u043a\u0438 \u0440\u0430\u0431\u043e\u0442\u044b \u0441 \u0434\u0430\u0442\u0430\u043c\u0438.<\/p>\n
      31 \u044f\u043d\u0432\u0430\u0440\u044f \u043f\u043b\u044e\u0441 \u043e\u0434\u0438\u043d \u0434\u0435\u043d\u044c \u2014 \u044d\u0442\u043e 1 \u0444\u0435\u0432\u0440\u0430\u043b\u044f. 1 \u0444\u0435\u0432\u0440\u0430\u043b\u044f \u043c\u0438\u043d\u0443\u0441 \u043e\u0434\u0438\u043d \u0434\u0435\u043d\u044c \u2014 \u044d\u0442\u043e 31 \u044f\u043d\u0432\u0430\u0440\u044f. \u041a\u043d\u043e\u043f\u043a\u0438 \u00abPageUp\u00bb \u0438 \u00abPageDown\u00bb \u0440\u0430\u0431\u043e\u0442\u0430\u044e\u0442 \u043f\u043e \u0442\u043e\u0439 \u0436\u0435 \u0441\u0445\u0435\u043c\u0435. \u041a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0443 \u0431\u043e\u043b\u044c\u0448\u0435 \u043d\u0435 \u043d\u0443\u0436\u043d\u043e \u0443\u0433\u0430\u0434\u044b\u0432\u0430\u0442\u044c, \u0433\u0434\u0435 \u0438\u043c\u0435\u043d\u043d\u043e \u043d\u0430\u0445\u043e\u0434\u0438\u0442\u0441\u044f \u044f\u0447\u0435\u0439\u043a\u0430 \u0432 \u0441\u0433\u0435\u043d\u0435\u0440\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u043e\u0439 \u0441\u0435\u0442\u043a\u0435.<\/p>\n
      \u0414\u0438\u043d\u0430\u043c\u0438\u0447\u0435\u0441\u043a\u0438\u0439 tabindex \u043e\u0441\u0442\u0430\u043b\u0441\u044f \u043f\u0440\u043e\u0441\u0442\u044b\u043c: \u043e\u0434\u043d\u0430 \u0430\u043a\u0442\u0438\u0432\u043d\u0430\u044f \u044f\u0447\u0435\u0439\u043a\u0430 td \u043f\u043e\u043b\u0443\u0447\u0430\u0435\u0442 tabIndex={0}<\/code>, \u0432\u0441\u0435 \u043e\u0441\u0442\u0430\u043b\u044c\u043d\u044b\u0435 \u0434\u043d\u0438 \u2014 -1<\/code>.<\/p>\n
      \u042d\u0442\u0430\u043f 3. \u0420\u0430\u0441\u0441\u043c\u0430\u0442\u0440\u0438\u0432\u0430\u0442\u044c ARIA \u043a\u0430\u043a \u0444\u0443\u043d\u043a\u0446\u0438\u043e\u043d\u0430\u043b\u044c\u043d\u043e\u0441\u0442\u044c, \u0430 \u043d\u0435 \u043a\u0430\u043a \u0434\u0435\u043a\u043e\u0440\u0430\u0442\u0438\u0432\u043d\u044b\u0439 \u044d\u043b\u0435\u043c\u0435\u043d\u0442<\/h2>\n
      \u0422\u0440\u0435\u0442\u044c\u044f \u0433\u0440\u0443\u043f\u043f\u0430 \u0438\u0441\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u0438\u0439 \u043a\u0430\u0437\u0430\u043b\u0430\u0441\u044c \u043d\u0435\u0431\u043e\u043b\u044c\u0448\u043e\u0439 \u043f\u043e \u043e\u0431\u044a\u0435\u043c\u0443 \u043a\u043e\u0434\u0430, \u043d\u043e \u0438\u043c\u0435\u043b\u0430 \u0437\u043d\u0430\u0447\u0438\u0442\u0435\u043b\u044c\u043d\u044b\u0439 \u044d\u0444\u0444\u0435\u043a\u0442.<\/p>\n
      <h2 aria-live=\"polite\">  {new Intl.DateTimeFormat(locale, {month: 'long',year: 'numeric'  }).format(displayedMonth)}<\/h2><\/code>
      <\/a><\/div><\/pre>\n
      \u0411\u043b\u0430\u0433\u043e\u0434\u0430\u0440\u044f \u044d\u0442\u043e\u043c\u0443 \u044d\u043a\u0440\u0430\u043d\u043d\u044b\u0439 \u0434\u0438\u043a\u0442\u043e\u0440 \u043e\u0437\u0432\u0443\u0447\u0438\u0432\u0430\u0435\u0442 \u0441\u043c\u0435\u043d\u0443 \u043c\u0435\u0441\u044f\u0446\u0430. \u0411\u0435\u0437 \u044d\u0442\u043e\u0433\u043e \u043f\u0440\u0438 keyboard navigation \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435 \u0438\u0437\u043c\u0435\u043d\u044f\u0435\u0442\u0441\u044f \u0432\u0438\u0437\u0443\u0430\u043b\u044c\u043d\u043e, \u043d\u043e \u0441\u043a\u0440\u044b\u0432\u0430\u0435\u0442\u0441\u044f \u043e\u0442 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044f.<\/p>\n
      <td  role=\"gridcell\"  tabIndex={isFocused ? 0 : -1}  aria-selected={isSelected || undefined}  aria-disabled={isDisabled || undefined}  aria-label={new Intl.DateTimeFormat(locale, {weekday: 'long',day: 'numeric',month: 'long',year: 'numeric'  }).format(day)}>   {day.getDate()}<\/td><\/code>
      <\/a><\/div><\/pre>\n
      \u0412\u0430\u0436\u043d\u043e \u0442\u043e, \u0447\u0442\u043e \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 \u043d\u0435 \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0435\u043d\u043e, \u0430 \u043d\u0435 \u0442\u043e, \u0447\u0442\u043e \u043e\u043d\u043e \u0440\u0430\u0432\u043d\u043e false.<\/p>\n
      \u0410\u0442\u0440\u0438\u0431\u0443\u0442 aria-selected<\/code> \u043f\u0440\u0438\u0441\u0432\u0430\u0438\u0432\u0430\u0435\u0442\u0441\u044f \u0442\u043e\u043b\u044c\u043a\u043e \u0432\u044b\u0431\u0440\u0430\u043d\u043d\u043e\u0439 \u0434\u0430\u0442\u0435. \u0414\u0430\u0442\u044b, \u0434\u043e\u0441\u0442\u0443\u043f \u043a \u043a\u043e\u0442\u043e\u0440\u044b\u043c \u0437\u0430\u0431\u043b\u043e\u043a\u0438\u0440\u043e\u0432\u0430\u043d, \u043f\u043e\u043b\u0443\u0447\u0430\u044e\u0442 \u0430\u0442\u0440\u0438\u0431\u0443\u0442 aria-disabled<\/code> \u0442\u043e\u043b\u044c\u043a\u043e \u0432 \u0442\u043e\u043c \u0441\u043b\u0443\u0447\u0430\u0435, \u0435\u0441\u043b\u0438 \u043e\u043d\u0438 \u0434\u0435\u0439\u0441\u0442\u0432\u0438\u0442\u0435\u043b\u044c\u043d\u043e \u0437\u0430\u0431\u043b\u043e\u043a\u0438\u0440\u043e\u0432\u0430\u043d\u044b. DOM<\/abbr> \u0441\u0442\u0430\u043d\u043e\u0432\u0438\u0442\u0441\u044f \u00ab\u0447\u0438\u0449\u0435\u00bb, \u0430 \u044d\u043a\u0440\u0430\u043d\u043d\u044b\u0439 \u0441\u0447\u0438\u0442\u044b\u0432\u0430\u0442\u0435\u043b\u044c \u043f\u0435\u0440\u0435\u0441\u0442\u0430\u0435\u0442 \u043e\u0437\u0432\u0443\u0447\u0438\u0432\u0430\u0442\u044c \u043d\u0435\u043d\u0443\u0436\u043d\u044b\u0435 \u043e\u0442\u0440\u0438\u0446\u0430\u0442\u0435\u043b\u044c\u043d\u044b\u0435 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u044f.<\/p>\n
      <button  aria-label={selectedDate  ? `Change date, ${formatDate(selectedDate, locale)}`  : 'Choose date'  }  aria-expanded={isOpen}>   \ud83d\udcc5<\/button><\/code>
      <\/a><\/div><\/pre>\n
      \u041f\u043e\u0441\u043b\u0435 \u0432\u044b\u0431\u043e\u0440\u0430 \u0434\u0430\u0442\u044b \u043d\u0430\u0434\u043f\u0438\u0441\u044c \u043d\u0430 \u043a\u043d\u043e\u043f\u043a\u0435 \u0442\u0430\u043a\u0436\u0435 \u0434\u043e\u043b\u0436\u043d\u0430 \u0438\u0437\u043c\u0435\u043d\u0438\u0442\u044c\u0441\u044f. \u041f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c \u0434\u043e\u043b\u0436\u0435\u043d \u043f\u043e\u043d\u0438\u043c\u0430\u0442\u044c \u043d\u0435 \u0442\u043e\u043b\u044c\u043a\u043e \u0442\u043e, \u0447\u0442\u043e \u044d\u0442\u0430 \u043a\u043d\u043e\u043f\u043a\u0430 \u043e\u0442\u043a\u0440\u044b\u0432\u0430\u0435\u0442 \u043a\u0430\u043b\u0435\u043d\u0434\u0430\u0440\u044c, \u043d\u043e \u0438 \u043a\u0430\u043a\u0430\u044f \u0434\u0430\u0442\u0430 \u0432\u044b\u0431\u0440\u0430\u043d\u0430 \u0432 \u0434\u0430\u043d\u043d\u044b\u0439 \u043c\u043e\u043c\u0435\u043d\u0442.<\/p>\n
      <span id=\"date-format-hint\" className={styles.srOnly}>  Format: DD.MM.YYYY<\/span><input type=\"text\" aria-describedby=\"date-format-hint\" \/><\/code>
      <\/a><\/div><\/pre>\n
      \u042d\u0442\u043e \u043d\u0435\u0431\u043e\u043b\u044c\u0448\u0430\u044f \u0441\u0442\u0440\u043e\u0447\u043a\u0430, \u043a\u043e\u0442\u043e\u0440\u0443\u044e \u043b\u044e\u0434\u0438 \u0447\u0430\u0441\u0442\u043e \u043f\u0440\u043e\u043f\u0443\u0441\u043a\u0430\u044e\u0442. \u041e\u043d\u0430 \u0432\u0430\u0436\u043d\u0430, \u043f\u043e\u0441\u043a\u043e\u043b\u044c\u043a\u0443 \u0444\u043e\u0440\u043c\u0430\u0442\u044b \u0434\u0430\u0442\u044b \u043d\u0435 \u044f\u0432\u043b\u044f\u044e\u0442\u0441\u044f \u0443\u043d\u0438\u0432\u0435\u0440\u0441\u0430\u043b\u044c\u043d\u044b\u043c\u0438. \u041f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c \u043d\u0435 \u0434\u043e\u043b\u0436\u0435\u043d \u0433\u0430\u0434\u0430\u0442\u044c, \u0432 \u043a\u0430\u043a\u043e\u043c \u043f\u043e\u0440\u044f\u0434\u043a\u0435 \u0441\u043b\u0435\u0434\u0443\u0435\u0442 \u0432\u0432\u043e\u0434\u0438\u0442\u044c \u0434\u0430\u043d\u043d\u044b\u0435 \u0432 \u043f\u043e\u043b\u0435: \u0441\u043d\u0430\u0447\u0430\u043b\u0430 \u0434\u0435\u043d\u044c, \u0441\u043d\u0430\u0447\u0430\u043b\u0430 \u043c\u0435\u0441\u044f\u0446 \u0438\u043b\u0438 \u043a\u0430\u043a-\u0442\u043e \u0438\u043d\u0430\u0447\u0435.<\/p>\n
      \u0427\u0442\u043e \u043d\u0430 \u0441\u0430\u043c\u043e\u043c \u0434\u0435\u043b\u0435 \u0432\u044b\u044f\u0432\u0438\u043b\u0438 \u0442\u0435\u0441\u0442\u044b?<\/h2>\n
      \u0412 \u0441\u0438\u0441\u0442\u0435\u043c\u0435 \u043d\u0435\u043f\u0440\u0435\u0440\u044b\u0432\u043d\u043e\u0439 \u0438\u043d\u0442\u0435\u0433\u0440\u0430\u0446\u0438\u0438 \u043c\u044b \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043b\u0438 jest-axe<\/code>.<\/p>\n
      import { render, fireEvent } from '@testing-library\/react';import { axe, toHaveNoViolations } from 'jest-axe'; expect.extend(toHaveNoViolations); test('closed state has no axe violations', async () => {  const { container } = render(<DatePicker value={null} onChange={() => {}} locale=\"en-US\" \/>  );   expect(await axe(container)).toHaveNoViolations();}); test('open state has no axe violations', async () => {  const { container, getByRole } = render(<DatePicker value={new Date()} onChange={() => {}} locale=\"en-US\" \/>  );   fireEvent.click(getByRole('button', { name: \/choose date\/i }));   expect(await axe(container)).toHaveNoViolations();});<\/code>
      <\/a><\/div><\/pre>\n
      Axe-Core \u043d\u0430 \u0440\u0430\u043d\u043d\u0435\u043c \u044d\u0442\u0430\u043f\u0435 \u0432\u044b\u044f\u0432\u0438\u043b \u0447\u0435\u0442\u044b\u0440\u0435 \u043f\u0440\u043e\u0431\u043b\u0435\u043c\u044b. \u042d\u0442\u043e \u043f\u043e\u043c\u043e\u0433\u043b\u043e, \u043d\u043e \u043e\u043d \u043d\u0435 \u0432\u044b\u044f\u0432\u0438\u043b \u0441\u0430\u043c\u044b\u0445 \u0441\u0435\u0440\u044c\u0435\u0437\u043d\u044b\u0445 \u043f\u0440\u043e\u0431\u043b\u0435\u043c, \u0430 \u0432\u043e\u0442 NVDA<\/abbr> \u0438 VoiceOver \u2014 \u0434\u0430.<\/p>\n
      NVDA<\/abbr> \u043e\u043a\u0430\u0437\u0430\u043b\u0441\u044f \u0441\u0430\u043c\u044b\u043c \u043f\u043e\u043b\u0435\u0437\u043d\u044b\u043c \u0438\u043d\u0441\u0442\u0440\u0443\u043c\u0435\u043d\u0442\u043e\u043c \u0432 \u0434\u0430\u043d\u043d\u043e\u043c \u0441\u043b\u0443\u0447\u0430\u0435, \u043e\u043d \u043f\u0440\u044f\u043c\u043e\u0439, \u0441\u0442\u0440\u043e\u0433\u0438\u0439 \u0438 \u043f\u043e\u0440\u043e\u0439 \u0434\u043e \u0431\u043e\u043b\u0438 \u0447\u0435\u0441\u0442\u0435\u043d. NVDA<\/abbr> \u0431\u044b\u0441\u0442\u0440\u043e \u043f\u043e\u043a\u0430\u0437\u0430\u043b \u043d\u0430\u043c, \u0447\u0442\u043e \u0440\u0435\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u044f keyboard navigation \u0431\u044b\u043b\u0430 \u043d\u0435\u043f\u043e\u043b\u043d\u043e\u0439 \u0438 \u0447\u0442\u043e \u043d\u0435\u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u044b ARIA<\/abbr> \u0432\u044b\u0433\u043b\u044f\u0434\u0435\u043b\u0438 \u043a\u043e\u0440\u0440\u0435\u043a\u0442\u043d\u043e \u043b\u0438\u0448\u044c \u0441 \u0442\u043e\u0447\u043a\u0438 \u0437\u0440\u0435\u043d\u0438\u044f \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u0430.<\/p>\n
      VoiceOver \u0432 Safari \u043e\u0431\u043d\u0430\u0440\u0443\u0436\u0438\u043b \u0431\u043e\u043b\u0435\u0435 \u0441\u043a\u0440\u044b\u0442\u0443\u044e \u043f\u0440\u043e\u0431\u043b\u0435\u043c\u0443. \u041e\u043d \u043e\u0437\u0432\u0443\u0447\u0438\u0432\u0430\u043b \u043a\u0430\u0436\u0434\u044b\u0439 \u0434\u0435\u043d\u044c \u0434\u0432\u0430\u0436\u0434\u044b: \u0441\u043d\u0430\u0447\u0430\u043b\u0430 \u0432\u0438\u0434\u0438\u043c\u043e\u0435 \u0447\u0438\u0441\u043b\u043e, \u0437\u0430\u0442\u0435\u043c \u043f\u043e\u043b\u043d\u044b\u0439 \u0430\u0442\u0440\u0438\u0431\u0443\u0442 aria-label<\/code>. \u041f\u043e\u0441\u043a\u043e\u043b\u044c\u043a\u0443 \u0432 \u0448\u0430\u0431\u043b\u043e\u043d\u0435 APG<\/abbr> \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442\u0441\u044f \u044d\u043b\u0435\u043c\u0435\u043d\u0442 td \u0432\u043c\u0435\u0441\u0442\u043e \u0432\u043b\u043e\u0436\u0435\u043d\u043d\u043e\u0439 \u043a\u043d\u043e\u043f\u043a\u0438, VoiceOver \u043e\u0431\u044a\u0435\u0434\u0438\u043d\u044f\u043b textContent<\/code> \u0438 aria-label<\/code>.<\/p>\n
      \u041c\u044b \u043f\u043e\u0442\u0440\u0430\u0442\u0438\u043b\u0438 \u043e\u043a\u043e\u043b\u043e 40 \u043c\u0438\u043d\u0443\u0442 \u043d\u0430 \u0442\u0435\u0441\u0442\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0435 \u0440\u0430\u0437\u043b\u0438\u0447\u043d\u044b\u0445 \u0432\u0430\u0440\u0438\u0430\u043d\u0442\u043e\u0432 \u0438 \u0432 \u0438\u0442\u043e\u0433\u0435 \u0434\u043e\u0431\u0430\u0432\u0438\u043b\u0438 \u043f\u0443\u0441\u0442\u043e\u0439 \u0430\u0442\u0440\u0438\u0431\u0443\u0442 aria-roledescription<\/code> \u0438\u043c\u0435\u043d\u043d\u043e \u0432 \u044d\u0442\u043e\u043c \u043c\u0435\u0441\u0442\u0435. \u042d\u0442\u043e \u0443\u0441\u0442\u0440\u0430\u043d\u0438\u043b\u043e \u0434\u0443\u0431\u043b\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0435 \u0432 VoiceOver, \u043d\u0435 \u043d\u0430\u0440\u0443\u0448\u0438\u0432 \u0440\u0430\u0431\u043e\u0442\u0443 NVDA<\/abbr> \u0438 JAWS<\/abbr>.<\/p>\n
      \u042f \u043d\u0435 \u043e\u0436\u0438\u0434\u0430\u043b, \u0447\u0442\u043e Claude \u043f\u0440\u0438\u0434\u0443\u043c\u0430\u0435\u0442 \u0442\u0430\u043a\u043e\u0435 \u0440\u0435\u0448\u0435\u043d\u0438\u0435, \u0435\u0433\u043e \u0434\u0430\u0436\u0435 \u0431\u044b\u043b\u043e \u043d\u0435 \u0442\u0430\u043a \u043f\u0440\u043e\u0441\u0442\u043e \u043d\u0430\u0439\u0442\u0438 \u0432 Google. \u041e\u043d\u043e \u043f\u043e\u044f\u0432\u0438\u043b\u043e\u0441\u044c \u0431\u043b\u0430\u0433\u043e\u0434\u0430\u0440\u044f \u0442\u043e\u043c\u0443, \u0447\u0442\u043e \u043c\u044b \u043f\u0440\u0438\u0441\u043b\u0443\u0448\u0430\u043b\u0438\u0441\u044c \u043a \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0443 \u0442\u0430\u043a, \u043a\u0430\u043a \u044d\u0442\u043e \u0441\u0434\u0435\u043b\u0430\u043b \u0431\u044b \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c.<\/p>\n
      \u041f\u0440\u043e\u0431\u043b\u0435\u043c\u0430 \u0441 CSS, \u043a\u043e\u0442\u043e\u0440\u0430\u044f \u043e\u0431\u044b\u0447\u043d\u043e \u043e\u0431\u043d\u0430\u0440\u0443\u0436\u0438\u0432\u0430\u0435\u0442\u0441\u044f \u0441\u043b\u0438\u0448\u043a\u043e\u043c \u043f\u043e\u0437\u0434\u043d\u043e<\/h2>\n
      \u0420\u0435\u0436\u0438\u043c \u0432\u044b\u0441\u043e\u043a\u043e\u0439 \u043a\u043e\u043d\u0442\u0440\u0430\u0441\u0442\u043d\u043e\u0441\u0442\u0438 Windows \u0442\u0430\u043a\u0436\u0435 \u043f\u043e\u0442\u0440\u0435\u0431\u043e\u0432\u0430\u043b \u0435\u0449\u0435 \u043e\u0434\u043d\u043e\u0433\u043e \u0438\u0441\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u0438\u044f. \u0411\u0435\u0437 forced-colors: active<\/code> \u0432\u044b\u0431\u0440\u0430\u043d\u043d\u044b\u0439 \u0434\u0435\u043d\u044c \u043c\u043e\u0433 \u0441\u0442\u0430\u0442\u044c \u043d\u0435\u0432\u0438\u0434\u0438\u043c\u044b\u043c, \u043f\u043e\u0441\u043a\u043e\u043b\u044c\u043a\u0443 \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u043e background-color<\/code> \u0438\u0433\u043d\u043e\u0440\u0438\u0440\u043e\u0432\u0430\u043b\u043e\u0441\u044c.<\/p>\n
      @media (forced-colors: active) {  .daySelected {forced-color-adjust: none;border: 2px solid ButtonText;  }   .dayFocused {outline-color: Highlight;  }}<\/code>
      <\/a><\/div><\/pre>\n
      \u042d\u0442\u043e \u043e\u0434\u043d\u0430 \u0438\u0437 \u0442\u0435\u0445 \u0432\u0435\u0449\u0435\u0439, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043d\u0435 \u0432\u044b\u044f\u0432\u043b\u044f\u044e\u0442\u0441\u044f \u0432 \u0445\u043e\u0434\u0435 \u043e\u0431\u044b\u0447\u043d\u043e\u0439 \u043f\u0440\u043e\u0432\u0435\u0440\u043a\u0438. \u041a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 \u0432\u044b\u0433\u043b\u044f\u0434\u0438\u0442 \u043d\u043e\u0440\u043c\u0430\u043b\u044c\u043d\u043e, \u0441\u043b\u0443\u0436\u0431\u0430 \u043a\u043e\u043d\u0442\u0440\u043e\u043b\u044f \u043a\u0430\u0447\u0435\u0441\u0442\u0432\u0430 \u043f\u0440\u043e\u0432\u0435\u0440\u044f\u0435\u0442 \u00ab\u0438\u0434\u0435\u0430\u043b\u044c\u043d\u044b\u0439 \u0441\u0446\u0435\u043d\u0430\u0440\u0438\u0439\u00bb, \u0430 \u0437\u0430\u0442\u0435\u043c \u0443 \u0440\u0435\u0430\u043b\u044c\u043d\u043e\u0433\u043e \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044f \u0432\u043e\u0437\u043d\u0438\u043a\u0430\u0435\u0442 \u0441\u0431\u043e\u0439 \u0432 \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0438.<\/p>\n
      \u0420\u0430\u0431\u043e\u0442\u0430 \u043d\u0430\u0434 \u0434\u043e\u0441\u0442\u0443\u043f\u043d\u043e\u0441\u0442\u044c\u044e \u043f\u043e\u043b\u043d\u0430 \u0442\u0430\u043a\u0438\u0445 \u043c\u0435\u043b\u043a\u0438\u0445 \u043b\u043e\u0432\u0443\u0448\u0435\u043a.<\/p>\n
      \u0417\u0430\u043a\u043b\u044e\u0447\u0435\u043d\u0438\u0435<\/h2>\n
      DatePicker<\/h3>\n
      \u041f\u043e\u0441\u043b\u0435 \u0432\u0441\u0435\u0445 \u0434\u043e\u0440\u0430\u0431\u043e\u0442\u043e\u043a \u0438 \u0442\u0440\u0435\u0445 \u043d\u043e\u0447\u0435\u0439, \u0443 \u043d\u0430\u0441 \u0435\u0441\u0442\u044c \u0444\u0438\u043d\u0430\u043b\u044c\u043d\u044b\u0439 \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442: \u0434\u043e\u0441\u0442\u0443\u043f\u043d\u044b\u0439, \u043a\u0440\u0430\u0441\u0438\u0432\u044b\u0439 \u0438 \u0444\u0443\u043d\u043a\u0446\u0438\u043e\u043d\u0430\u043b\u044c\u043d\u044b\u0439 DatePicker.<\/p>\n
      \"\u0424\u0438\u043d\u0430\u043b\u044c\u043d\u0430\u044f<\/p>\n
      \u0424\u0438\u043d\u0430\u043b\u044c\u043d\u0430\u044f \u0432\u0435\u0440\u0441\u0438\u044f DatePicker’\u0430<\/figcaption><\/div>\n<\/figure>\n
      \u041f\u043e\u043f\u0440\u043e\u0431\u043e\u0432\u0430\u0442\u044c \u0444\u0438\u043d\u0430\u043b\u044c\u043d\u0443\u044e \u0432\u0435\u0440\u0441\u0438\u044e \u043c\u043e\u0436\u043d\u043e \u043f\u043e \u0441\u0441\u044b\u043b\u043a\u0435<\/a>. \u041f\u0435\u0440\u0435\u0439\u0442\u0438 \u043a \u0440\u0435\u043f\u043e\u0437\u0438\u0442\u043e\u0440\u0438\u044e Github \u043c\u043e\u0436\u043d\u043e \u043f\u043e \u044d\u0442\u043e\u0439 \u0441\u0441\u044b\u043b\u043a\u0435<\/a>.<\/p>\n
      \u041e\u043f\u044b\u0442 \u0432\u0437\u0430\u0438\u043c\u043e\u0434\u0435\u0439\u0441\u0442\u0432\u0438\u044f \u0441 Claude<\/h3>\n
      Claude \u0441\u0442\u0430\u043b \u00ab\u0441\u043f\u0430\u0440\u0440\u0438\u043d\u0433-\u043f\u0430\u0440\u0442\u043d\u0435\u0440\u043e\u043c\u00bb \u043f\u043e \u0430\u0440\u0445\u0438\u0442\u0435\u043a\u0442\u0443\u0440\u0435. \u042f \u043f\u0440\u043e\u0441\u043c\u0430\u0442\u0440\u0438\u0432\u0430\u043b \u0441\u0433\u0435\u043d\u0435\u0440\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u044b\u0439 \u043a\u043e\u0434 \u0438 \u0432\u044b\u043d\u0443\u0436\u0434\u0435\u043d \u0431\u044b\u043b \u0437\u0430\u0434\u0430\u0432\u0430\u0442\u044c \u0432\u043e\u043f\u0440\u043e\u0441\u044b: \u043f\u043e\u0447\u0435\u043c\u0443 \u0431\u044b\u043b\u0430 \u0432\u044b\u0431\u0440\u0430\u043d\u0430 \u0438\u043c\u0435\u043d\u043d\u043e \u0442\u0430\u043a\u0430\u044f \u0441\u0442\u0440\u0443\u043a\u0442\u0443\u0440\u0430, \u0433\u0434\u0435 \u0441\u043a\u0440\u044b\u0442\u044b \u0434\u043e\u043f\u0443\u0449\u0435\u043d\u0438\u044f \u0438 \u043a\u0430\u043a\u0438\u0435 \u0447\u0430\u0441\u0442\u0438 \u043c\u043e\u0436\u043d\u043e \u0441\u043c\u0435\u043b\u043e \u043e\u0441\u0442\u0430\u0432\u0438\u0442\u044c \u0431\u0435\u0437 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u0439.<\/p>\n
      \u042d\u0442\u043e\u0442 \u0430\u043d\u0430\u043b\u0438\u0437 \u0441\u0434\u0435\u043b\u0430\u043b \u043a\u043e\u043c\u0430\u043d\u0434\u0443 \u0431\u043e\u043b\u0435\u0435 \u0432\u043d\u0438\u043c\u0430\u0442\u0435\u043b\u044c\u043d\u043e\u0439. \u041c\u044b \u043e\u0431\u043d\u0430\u0440\u0443\u0436\u0438\u043b\u0438 \u0442\u0430\u043a\u0438\u0435 \u043e\u0448\u0438\u0431\u043a\u0438, \u043a\u0430\u043a \u0430\u0442\u0440\u0438\u0431\u0443\u0442 aria-selected=\"false\"<\/code> \u0432 \u043a\u0430\u0436\u0434\u043e\u0439 \u044f\u0447\u0435\u0439\u043a\u0435. \u0415\u0441\u043b\u0438 \u0431\u044b \u043c\u044b \u043f\u0438\u0441\u0430\u043b\u0438 \u0432\u0441\u0435 \u0441 \u043d\u0443\u043b\u044f, \u043c\u044b \u043c\u043e\u0433\u043b\u0438 \u0431\u044b \u0434\u043e\u043f\u0443\u0441\u0442\u0438\u0442\u044c \u0442\u0443 \u0436\u0435 \u043e\u0448\u0438\u0431\u043a\u0443 \u0438 \u0434\u043e\u043b\u044c\u0448\u0435 \u043d\u0435 \u0437\u0430\u043c\u0435\u0447\u0430\u0442\u044c \u0435\u0435.<\/p>\n
      AI \u043d\u0435 \u043b\u0438\u0448\u0438\u043b \u043f\u0440\u043e\u0446\u0435\u0441\u0441 \u044d\u043a\u0441\u043f\u0435\u0440\u0442\u043d\u044b\u0445 \u0437\u043d\u0430\u043d\u0438\u0439. \u041e\u043d \u0441\u0434\u0435\u043b\u0430\u043b \u0438\u0445 \u0435\u0449\u0435 \u0431\u043e\u043b\u0435\u0435 \u0432\u0430\u0436\u043d\u044b\u043c\u0438, \u043f\u043e\u0442\u043e\u043c\u0443 \u0447\u0442\u043e \u0442\u0435\u043f\u0435\u0440\u044c \u043e\u043f\u0430\u0441\u043d\u044b\u0435 \u043e\u0448\u0438\u0431\u043a\u0438 \u043c\u043e\u0433\u0443\u0442 \u0431\u044b\u0442\u044c \u0441\u043f\u0440\u044f\u0442\u0430\u043d\u044b \u0432 \u043a\u043e\u0434\u0435, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0432\u044b\u0433\u043b\u044f\u0434\u0438\u0442 \u0447\u0438\u0441\u0442\u044b\u043c.<\/p>\n
      \u042d\u0442\u043e \u0432\u0441\u0435 \u0435\u0449\u0435 \u043a\u043e\u043d\u0446\u0435\u043f\u0442, \u043f\u043e\u044d\u0442\u043e\u043c\u0443 \u043a\u043e\u0435-\u0447\u0435\u0433\u043e \u043d\u0435 \u0445\u0432\u0430\u0442\u0430\u0435\u0442: \u043f\u043e\u043a\u0430 \u043d\u0435\u043b\u044c\u0437\u044f \u043b\u0438\u0441\u0442\u0430\u0442\u044c \u0433\u043e\u0434\u044b \u0441\u0440\u0430\u0437\u0443 \u0438 \u0432\u044b\u0431\u0438\u0440\u0430\u0442\u044c \u0438\u043d\u0442\u0435\u0440\u0432\u0430\u043b \u2014 \u0442\u043e\u043b\u044c\u043a\u043e \u043e\u0434\u043d\u0443 \u0434\u0430\u0442\u0443. \u041d\u043e \u0440\u0430\u0431\u043e\u0447\u0430\u044f \u0431\u0430\u0437\u0430 \u0435\u0441\u0442\u044c, \u0438 \u043e\u043d\u0430 \u0443\u0436\u0435 \u043f\u0440\u0438\u0433\u043e\u0434\u043d\u0430 \u0434\u043b\u044f \u0440\u0435\u0430\u043b\u044c\u043d\u044b\u0445 \u043f\u0440\u043e\u0435\u043a\u0442\u043e\u0432.<\/p>\n
      \u0427\u0442\u043e \u043c\u044b \u0438\u0437 \u044d\u0442\u043e\u0433\u043e \u0432\u044b\u043d\u0435\u0441\u043b\u0438:<\/p>\n
        \n
      1. \n
        Claude \u0434\u0430\u043b \u043d\u0430\u043c \u043f\u0440\u043e\u0447\u043d\u0443\u044e \u043e\u0442\u043f\u0440\u0430\u0432\u043d\u0443\u044e \u0442\u043e\u0447\u043a\u0443: ARIA<\/abbr>-\u0430\u0442\u0440\u0438\u0431\u0443\u0442\u044b, \u0431\u0430\u0437\u043e\u0432\u0443\u044e keyboard navigation, \u0440\u0430\u0441\u043f\u043e\u043b\u043e\u0436\u0435\u043d\u0438\u0435 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432 \u0438 \u043b\u043e\u0433\u0438\u043a\u0443 \u0440\u0430\u0431\u043e\u0442\u044b \u043a\u0430\u043b\u0435\u043d\u0434\u0430\u0440\u044f. \u042d\u0442\u043e \u0441\u044d\u043a\u043e\u043d\u043e\u043c\u0438\u043b\u043e \u043d\u0430\u043c \u0432\u0440\u0435\u043c\u044f, \u043d\u043e \u043d\u0435 \u0437\u0430\u043c\u0435\u043d\u0438\u043b\u043e \u044d\u043a\u0441\u043f\u0435\u0440\u0442\u043d\u044b\u0445 \u0437\u043d\u0430\u043d\u0438\u0439 \u0432 \u043e\u0431\u043b\u0430\u0441\u0442\u0438 \u0434\u043e\u0441\u0442\u0443\u043f\u043d\u043e\u0441\u0442\u0438.<\/p>\n<\/li>\n
      2. \n
        \u0412\u0438\u0434 \u0432\u044b\u0431\u043e\u0440\u0430 \u0434\u0430\u0442\u044b \u043c\u043e\u0436\u0435\u0442 \u0432\u044b\u0433\u043b\u044f\u0434\u0435\u0442\u044c \u043a\u043e\u0440\u0440\u0435\u043a\u0442\u043d\u043e \u0432 \u043a\u043e\u0434\u0435, \u043d\u043e \u043f\u0440\u0438 \u044d\u0442\u043e\u043c \u043d\u0435 \u0440\u0430\u0431\u043e\u0442\u0430\u0442\u044c \u0434\u043b\u044f \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044f screen reader’\u0430. \u041f\u043e\u0440\u044f\u0434\u043e\u043a \u0444\u043e\u043a\u0443\u0441\u0438\u0440\u043e\u0432\u043a\u0438, \u043e\u0437\u0432\u0443\u0447\u0438\u0432\u0430\u043d\u0438\u0435 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432, \u0430\u043a\u0442\u0438\u0432\u043d\u044b\u0435 \u043e\u0431\u043b\u0430\u0441\u0442\u0438 \u0438 \u043f\u043e\u0432\u0435\u0434\u0435\u043d\u0438\u0435 \u043a\u043b\u0430\u0432\u0438\u0430\u0442\u0443\u0440\u044b \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e \u0442\u0435\u0441\u0442\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0432\u0440\u0443\u0447\u043d\u0443\u044e.<\/p>\n<\/li>\n
      3. \n
        WAI-ARIA APG \u043f\u043e\u0441\u043b\u0443\u0436\u0438\u043b\u0430 \u043f\u043e\u043b\u0435\u0437\u043d\u044b\u043c \u043e\u0440\u0438\u0435\u043d\u0442\u0438\u0440\u043e\u043c, \u043d\u043e \u043d\u0435 \u0433\u043e\u0442\u043e\u0432\u044b\u043c \u0440\u0435\u0448\u0435\u043d\u0438\u0435\u043c. \u041c\u044b \u0441\u043b\u0435\u0434\u043e\u0432\u0430\u043b\u0438 \u0448\u0430\u0431\u043b\u043e\u043d\u0443, \u0442\u0435\u0441\u0442\u0438\u0440\u043e\u0432\u0430\u043b\u0438 \u0435\u0433\u043e \u043d\u0430 \u0440\u0435\u0430\u043b\u044c\u043d\u044b\u0445 \u0443\u0441\u0442\u0440\u043e\u0439\u0441\u0442\u0432\u0430\u0445 \u0438 \u0432\u043d\u043e\u0441\u0438\u043b\u0438 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u044f \u0432 \u0440\u0435\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u044e \u0442\u0430\u043c, \u0433\u0434\u0435 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c\u0441\u043a\u0438\u0439 \u043e\u043f\u044b\u0442 \u043e\u043a\u0430\u0437\u044b\u0432\u0430\u043b\u0441\u044f \u043b\u0443\u0447\u0448\u0435, \u0447\u0435\u043c \u0432 \u0444\u043e\u0440\u043c\u0430\u043b\u044c\u043d\u043e\u0439 \u0432\u0435\u0440\u0441\u0438\u0438.<\/p>\n<\/li>\n<\/ol>\n
        AI \u043f\u043e\u043c\u043e\u0433\u0430\u0435\u0442 \u0431\u044b\u0441\u0442\u0440\u0435\u0435 \u0434\u043e\u0431\u0440\u0430\u0442\u044c\u0441\u044f \u0434\u043e \u0441\u043b\u043e\u0436\u043d\u043e\u0439 \u0447\u0430\u0441\u0442\u0438 \u0440\u0430\u0431\u043e\u0442\u044b. \u041a\u043e\u043d\u0435\u0447\u043d\u043e\u0435 \u043a\u0430\u0447\u0435\u0441\u0442\u0432\u043e \u043f\u043e-\u043f\u0440\u0435\u0436\u043d\u0435\u043c\u0443 \u0437\u0430\u0432\u0438\u0441\u0438\u0442 \u043e\u0442 \u043c\u0435\u043b\u043a\u0438\u0445 \u0434\u0435\u0442\u0430\u043b\u0435\u0439, \u0440\u0443\u0447\u043d\u043e\u0433\u043e \u0442\u0435\u0441\u0442\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044f \u0438 \u043e\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u0435\u043d\u043d\u043e\u0441\u0442\u0438 \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u0430 \u043f\u0435\u0440\u0435\u0434 \u043b\u044e\u0434\u044c\u043c\u0438, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0431\u0443\u0434\u0443\u0442 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u044d\u0442\u043e\u0442 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442.<\/p>\n<\/div>\n
        \u0441\u0441\u044b\u043b\u043a\u0430 \u043d\u0430 \u043e\u0440\u0438\u0433\u0438\u043d\u0430\u043b \u0441\u0442\u0430\u0442\u044c\u0438 https:\/\/habr.com\/ru\/articles\/1052878\/<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"
        \u0412\u0432\u0435\u0434\u0435\u043d\u0438\u0435\u041a\u0430\u0437\u0430\u043b\u043e\u0441\u044c, \u0447\u0442\u043e Datapicker \u043e\u0442 Cloude \u0441\u0440\u0430\u0437\u0443 \u0431\u044b\u043b \u0433\u043e\u0442\u043e\u0432 \u0432 prod, \u043d\u043e:\u042f \u0437\u0430\u043f\u0443\u0441\u0442\u0438\u043b NVDA, \u043f\u0435\u0440\u0435\u043a\u043b\u044e\u0447\u0438\u043b\u0441\u044f \u043a\u043b\u0430\u0432\u0438\u0448\u0435\u0439 Tab \u043f\u043e \u043d\u0430\u0448\u0435\u043c\u0443 \u043d\u043e\u0432\u043e\u043c\u0443 DataPicker’\u0443, \u0438 \u0444\u043e\u043a\u0443\u0441 \u0432\u044b\u0441\u043a\u043e\u0447\u0438\u043b \u0437\u0430 \u043f\u0440\u0435\u0434\u0435\u043b\u044b \u0434\u0438\u0430\u043b\u043e\u0433\u043e\u0432\u043e\u0433\u043e \u043e\u043a\u043d\u0430. \u0412 Storybook \u0432\u0441\u0435 \u0440\u0430\u0431\u043e\u0442\u0430\u043b\u043e \u043d\u043e\u0440\u043c\u0430\u043b\u044c\u043d\u043e. \u041a\u0430\u043b\u0435\u043d\u0434\u0430\u0440\u044c \u043e\u0442\u043a\u0440\u044b\u0432\u0430\u043b\u0441\u044f, \u0434\u0430\u0442\u044b \u043c\u0435\u043d\u044f\u043b\u0438\u0441\u044c, \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435 \u0432\u044b\u0431\u043e\u0440\u0430 \u0441\u0440\u0430\u0431\u0430\u0442\u044b\u0432\u0430\u043b\u043e, \u0438 Claude \u043d\u0430\u043f\u0438\u0441\u0430\u043b \u043f\u0440\u0438\u043b\u0438\u0447\u043d\u0443\u044e \u0441\u0442\u0440\u0443\u043a\u0442\u0443\u0440\u0443 \u043d\u0430 React, \u043d\u043e \u043a\u0430\u043a \u0442\u043e\u043b\u044c\u043a\u043e \u0432 \u0434\u0435\u043b\u043e \u0432\u043c\u0435\u0448\u0430\u043b\u0441\u044f \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c \u0441\u043e screen reader’\u043e\u043c, \u0432\u0441\u0435 \u044d\u0442\u043e \u043f\u0435\u0440\u0435\u0441\u0442\u0430\u043b\u043e \u043a\u0430\u0437\u0430\u0442\u044c\u0441\u044f \u0433\u043e\u0442\u043e\u0432\u044b\u043c \u0432 prod.\u041f\u0440\u0438\u0432\u0435\u0442, \u043a\u043e\u043b\u043b\u0435\u0433\u0438!\u041c\u0435\u043d\u044f \u0437\u043e\u0432\u0443\u0442 \u0418\u043b\u044c\u044f, \u044f \u0442\u0435\u0445\u043d\u0438\u0447\u0435\u0441\u043a\u0438\u0439 \u0434\u0438\u0440\u0435\u043a\u0442\u043e\u0440 \u0432 \u00ab\u0418\u0441\u0445\u043e\u0434\u043d\u043e\u043c \u043a\u043e\u0434\u0435\u00bb. \u041d\u0430\u0448\u0430 frontend-\u043a\u043e\u043c\u0430\u043d\u0434\u0430 \u043f\u043e\u0441\u043b\u0435\u0434\u043d\u0438\u0435 \u0448\u0435\u0441\u0442\u044c \u043c\u0435\u0441\u044f\u0446\u0435\u0432 \u0437\u0430\u043d\u0438\u043c\u0430\u043b\u0430\u0441\u044c \u0443\u043b\u0443\u0447\u0448\u0435\u043d\u0438\u0435\u043c \u0434\u043e\u0441\u0442\u0443\u043f\u043d\u043e\u0441\u0442\u0438 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432 React (a11y). \u042d\u0442\u043e\u0442 DataPicker \u0441\u0442\u0430\u043b \u043e\u0434\u043d\u0438\u043c \u0438\u0437 \u043b\u0443\u0447\u0448\u0438\u0445 \u043d\u0430\u043f\u043e\u043c\u0438\u043d\u0430\u043d\u0438\u0439 \u043e \u0442\u043e\u043c, \u0447\u0442\u043e AI \u043c\u043e\u0436\u0435\u0442 \u0441\u044d\u043a\u043e\u043d\u043e\u043c\u0438\u0442\u044c \u0432\u0440\u0435\u043c\u044f \u043d\u0430 \u0448\u0430\u0431\u043b\u043e\u043d\u043d\u043e\u043c \u043a\u043e\u0434\u0435, \u043d\u043e \u043e\u043d \u043f\u043e-\u043f\u0440\u0435\u0436\u043d\u0435\u043c\u0443 \u043d\u0435 \u043f\u043e\u043d\u0438\u043c\u0430\u0435\u0442 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c\u0441\u043a\u043e\u0433\u043e \u043e\u043f\u044b\u0442\u0430, \u0441\u043a\u0440\u044b\u0442\u043e\u0433\u043e \u0437\u0430 aria\u2011label, \u043f\u043e\u0432\u0435\u0434\u0435\u043d\u0438\u0435\u043c \u043a\u043b\u0430\u0432\u0438\u0430\u0442\u0443\u0440\u044b \u0438 \u0444\u043e\u043a\u0443\u0441\u043e\u043c.\u041f\u0440\u0438\u0433\u043e\u0442\u043e\u0432\u044c\u0442\u0435\u0441\u044c \u043a \u0438\u043d\u0441\u0430\u0439\u0442\u0430\u043c, \u0431\u0430\u0433\u0430\u043c \u0438 \u043f\u043e\u0431\u0435\u0434\u0430\u043c. \u041d\u0443 \u0438, \u043a\u043e\u043d\u0435\u0447\u043d\u043e, \u043d\u0435 \u0431\u0435\u0437 \u044d\u043a\u0441\u043f\u0435\u0440\u0438\u043c\u0435\u043d\u0442\u0430: \u00ab\u0410 \u0447\u0442\u043e, \u0435\u0441\u043b\u0438 Claude \u043d\u0430\u043f\u0438\u0448\u0435\u0442 \u043e\u0441\u043d\u043e\u0432\u0443?\u00bb. Claude \u0434\u0430\u043b \u043d\u0430\u043c \u0445\u043e\u0440\u043e\u0448\u0438\u0439 \u043a\u0430\u0440\u043a\u0430\u0441, \u043c\u044b \u0441\u043e\u0445\u0440\u0430\u043d\u0438\u043b\u0438 \u0431\u043e\u043b\u044c\u0448\u0443\u044e \u0435\u0433\u043e \u0447\u0430\u0441\u0442\u044c, \u043d\u043e \u043f\u043e\u0442\u043e\u043c \u043c\u044b \u043f\u043e\u0442\u0440\u0430\u0442\u0438\u043b\u0438 \u0442\u0440\u0438 \u0434\u043d\u044f \u043d\u0430 \u0442\u043e, \u0447\u0442\u043e\u0431\u044b \u043f\u0440\u0435\u0432\u0440\u0430\u0442\u0438\u0442\u044c \u0440\u0430\u0431\u043e\u0442\u0430\u044e\u0449\u0438\u0439 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 \u0432 WCAG-\u0434\u043e\u0441\u0442\u0443\u043f\u043d\u044b\u0439.\u041f\u043e\u0447\u0435\u043c\u0443 \u043c\u044b \u043d\u0435 \u0432\u043e\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043b\u0438\u0441\u044c \u0433\u043e\u0442\u043e\u0432\u043e\u0439 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u043e\u0439\u041a\u043e\u043d\u0442\u0435\u043a\u0441\u0442\u041d\u0435\u0434\u0430\u0432\u043d\u043e \u043d\u0430\u043c \u0434\u043b\u044f \u043e\u0434\u043d\u043e\u0433\u043e \u0438\u0437 \u043f\u0440\u043e\u0435\u043a\u0442\u043e\u0432 (\u0432 \u043e\u0431\u043b\u0430\u0441\u0442\u0438 \u043c\u0435\u0434\u0438\u0446\u0438\u043d\u044b) \u043f\u043e\u043d\u0430\u0434\u043e\u0431\u0438\u043b\u0441\u044f DatePicker, \u043f\u0430\u0446\u0438\u0435\u043d\u0442\u0430\u043c \u043d\u0443\u0436\u043d\u043e \u0431\u044b\u043b\u043e \u0432\u044b\u0431\u0440\u0430\u0442\u044c \u0434\u0430\u0442\u0443 \u0438 \u0437\u0430\u043f\u0438\u0441\u0430\u0442\u044c\u0441\u044f \u043d\u0430 \u043f\u0440\u0438\u0435\u043c. \u0421\u0430\u043c \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 \u043f\u043e\u0434 NDA, \u043d\u043e \u0441\u043f\u0435\u0446\u0438\u0430\u043b\u044c\u043d\u043e \u0434\u043b\u044f \u044d\u0442\u043e\u0439 \u0441\u0442\u0430\u0442\u044c\u0438 \u043c\u044b \u0441\u043e\u0431\u0440\u0430\u043b\u0438 \u043f\u043e\u0445\u043e\u0436\u0438\u0439 open-source \u043a\u043e\u043d\u0446\u0435\u043f\u0442 \u0441 \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u044c\u044e \u043f\u043e\u0442\u044b\u043a\u0430\u0442\u044c \u0432\u0436\u0438\u0432\u0443\u044e (\u0441\u0441\u044b\u043b\u043a\u0430 \u0436\u0434\u0435\u0442 \u0432 \u043a\u043e\u043d\u0446\u0435), \u0447\u0442\u043e\u0431\u044b \u0447\u0435\u0441\u0442\u043d\u043e \u043f\u043e\u0434\u0435\u043b\u0438\u0442\u044c\u0441\u044f \u0441 \u0432\u0430\u043c\u0438 \u043f\u0440\u043e\u0446\u0435\u0441\u0441\u043e\u043c.\u0420\u0435\u0430\u043b\u044c\u043d\u0430\u044f \u043f\u0440\u043e\u0431\u043b\u0435\u043c\u0430\u041f\u0430\u0446\u0438\u0435\u043d\u0442\u044b \u0441 \u043d\u0430\u0440\u0443\u0448\u0435\u043d\u0438\u044f\u043c\u0438 \u0437\u0440\u0435\u043d\u0438\u044f \u0434\u043e\u043b\u0436\u043d\u044b \u0431\u044b\u043b\u0438 \u0437\u0430\u043f\u0438\u0441\u044b\u0432\u0430\u0442\u044c\u0441\u044f \u043d\u0430 \u043f\u0440\u0438\u0435\u043c \u0441 \u0442\u0430\u043a\u043e\u0439 \u0436\u0435 \u0443\u0432\u0435\u0440\u0435\u043d\u043d\u043e\u0441\u0442\u044c\u044e, \u043a\u0430\u043a \u0438 \u0432\u0441\u0435 \u043e\u0441\u0442\u0430\u043b\u044c\u043d\u044b\u0435.\u041f\u043b\u0430\u043d\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0435 \u0440\u0435\u0448\u0435\u043d\u0438\u044f\u041e\u0447\u0435\u0432\u0438\u0434\u043d\u044b\u043c \u0440\u0435\u0448\u0435\u043d\u0438\u0435\u043c \u0431\u044b\u043b\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0433\u043e\u0442\u043e\u0432\u044b\u0439 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 \u0432\u044b\u0431\u043e\u0440\u0430 \u0434\u0430\u0442\u044b.\u041c\u044b \u0432\u043d\u0438\u043c\u0430\u0442\u0435\u043b\u044c\u043d\u043e \u0438\u0437\u0443\u0447\u0438\u043b\u0438 @react-aria\/datepicker \u043e\u0442 Adobe \u2014 \u044d\u0442\u043e \u043e\u0442\u043b\u0438\u0447\u043d\u044b\u0439 \u0432\u0430\u0440\u0438\u0430\u043d\u0442, \u043e\u0440\u0438\u0435\u043d\u0442\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u044b\u0439 \u0432 \u043f\u0435\u0440\u0432\u0443\u044e \u043e\u0447\u0435\u0440\u0435\u0434\u044c \u043d\u0430 \u0434\u043e\u0441\u0442\u0443\u043f\u043d\u043e\u0441\u0442\u044c, \u0438 \u0432\u043e \u043c\u043d\u043e\u0433\u0438\u0445 \u043f\u0440\u043e\u0435\u043a\u0442\u0430\u0445 \u044f \u0431\u044b \u043f\u0440\u0435\u0434\u043f\u043e\u0447\u0435\u043b \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0438\u043c\u0435\u043d\u043d\u043e \u0435\u0433\u043e, \u0430 \u043d\u0435 \u0441\u043e\u0437\u0434\u0430\u0432\u0430\u0442\u044c \u0441\u043e\u0431\u0441\u0442\u0432\u0435\u043d\u043d\u044b\u0439 \u043a\u0430\u043b\u0435\u043d\u0434\u0430\u0440\u044c, \u043d\u043e \u0432 \u0434\u0430\u043d\u043d\u043e\u043c \u0441\u043b\u0443\u0447\u0430\u0435 \u043e\u0433\u0440\u0430\u043d\u0438\u0447\u0435\u043d\u0438\u044f \u043d\u0435 \u043f\u043e\u0437\u0432\u043e\u043b\u0438\u043b\u0438 \u043d\u0430\u043c \u043f\u043e\u0439\u0442\u0438 \u043f\u043e \u044d\u0442\u043e\u043c\u0443 \u043f\u0443\u0442\u0438.\u041e\u0433\u0440\u0430\u043d\u0438\u0447\u0435\u043d\u0438\u044f:\u0423 \u043d\u0430\u0441 \u0431\u044b\u043b \u0441\u043e\u0431\u0441\u0442\u0432\u0435\u043d\u043d\u044b\u0439 \u043c\u0430\u043a\u0435\u0442 \u0441 \u0433\u043e\u0440\u0438\u0437\u043e\u043d\u0442\u0430\u043b\u044c\u043d\u043e\u0439 \u043f\u0440\u043e\u043a\u0440\u0443\u0442\u043a\u043e\u0439 \u043c\u0435\u0441\u044f\u0446\u0435\u0432.\u0421\u0438\u0441\u0442\u0435\u043c\u0430 \u0434\u0438\u0437\u0430\u0439\u043d\u0430 \u043a\u043b\u0438\u0435\u043d\u0442\u0430 \u043f\u0440\u0435\u0434\u044a\u044f\u0432\u043b\u044f\u043b\u0430 \u0441\u0442\u0440\u043e\u0433\u0438\u0435 \u0442\u0440\u0435\u0431\u043e\u0432\u0430\u043d\u0438\u044f \u043a \u043c\u0430\u043a\u0435\u0442\u0443 \u0438 \u0432\u0438\u0437\u0443\u0430\u043b\u044c\u043d\u043e\u043c\u0443 \u043f\u043e\u0432\u0435\u0434\u0435\u043d\u0438\u044e.\u041a\u0440\u043e\u043c\u0435 \u0442\u043e\u0433\u043e, \u043c\u044b \u043d\u0435 \u0445\u043e\u0442\u0435\u043b\u0438 \u0442\u044f\u043d\u0443\u0442\u044c 25KB react-aria \u0441 \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u0438\u043c\u0438 \u0430\u0431\u0441\u0442\u0440\u0430\u043a\u0446\u0438\u044f\u043c\u0438 \u0440\u0430\u0434\u0438 \u043e\u0434\u043d\u043e\u0433\u043e \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430, \u0435\u0441\u043b\u0438 \u043c\u043e\u0436\u043d\u043e \u0431\u044b\u043b\u043e \u0441\u043e\u0445\u0440\u0430\u043d\u0438\u0442\u044c \u0440\u0435\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u044e \u043a\u043e\u043c\u043f\u0430\u043a\u0442\u043d\u043e\u0439 \u0438 \u043a\u043e\u043d\u0442\u0440\u043e\u043b\u0438\u0440\u0443\u0435\u043c\u043e\u0439.\u041f\u0440\u0438\u043d\u044f\u043b\u0438 \u0440\u0435\u0448\u0435\u043d\u0438\u0435 \u043d\u0430\u043f\u0438\u0441\u0430\u0442\u044c \u0441\u043e\u0431\u0441\u0442\u0432\u0435\u043d\u043d\u044b\u0439 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442, \u043d\u043e \u0432 \u043a\u0430\u0447\u0435\u0441\u0442\u0432\u0435 \u043e\u0441\u043d\u043e\u0432\u043d\u043e\u0433\u043e \u043e\u0440\u0438\u0435\u043d\u0442\u0438\u0440\u0430 \u0441\u043b\u0435\u0434\u043e\u0432\u0430\u0442\u044c \u0441\u0442\u0440\u043e\u0433\u043e\u043c\u0443 \u043f\u0430\u0442\u0442\u0435\u0440\u043d\u0443 WAI-ARIA APG \u00abDate Picker Dialog\u00bb.\u0423\u0436\u0435 \u0437\u0434\u0435\u0441\u044c \u043a \u0438\u0433\u0440\u0435 \u043f\u0440\u0438\u0441\u043e\u0435\u0434\u0438\u043d\u0438\u043b\u0441\u044f Claude.\u0413\u0438\u043f\u043e\u0442\u0435\u0437\u0430\u041d\u0430\u0448\u0430 \u0433\u0438\u043f\u043e\u0442\u0435\u0437\u0430 \u043d\u043e\u0441\u0438\u043b\u0430 \u043f\u0440\u0430\u043a\u0442\u0438\u0447\u0435\u0441\u043a\u0438\u0439 \u0445\u0430\u0440\u0430\u043a\u0442\u0435\u0440.Claude \u0434\u043e\u043b\u0436\u0435\u043d \u0431\u044b\u043b \u043e\u0431\u0435\u0441\u043f\u0435\u0447\u0438\u0442\u044c \u043f\u0435\u0440\u0432\u044b\u0435 70%: \u0441\u0442\u0440\u0443\u043a\u0442\u0443\u0440\u0443 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430, \u043b\u043e\u0433\u0438\u043a\u0443 \u043a\u0430\u043b\u0435\u043d\u0434\u0430\u0440\u044f, \u0442\u0438\u043f\u044b TypeScript, \u0431\u0430\u0437\u043e\u0432\u043e\u0435 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435 \u0438 \u0432\u0441\u0435 \u0442\u0435 \u0441\u043a\u0443\u0447\u043d\u044b\u0435 \u043c\u043e\u043c\u0435\u043d\u0442\u044b, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043e\u0431\u044b\u0447\u043d\u043e \u043e\u0442\u043d\u0438\u043c\u0430\u044e\u0442 \u0432\u0440\u0435\u043c\u044f, \u043d\u043e \u043d\u0435 \u0442\u0440\u0435\u0431\u0443\u044e\u0442 \u043e\u0441\u043e\u0431\u044b\u0445 \u0440\u0435\u0448\u0435\u043d\u0438\u0439, \u0441\u0432\u044f\u0437\u0430\u043d\u043d\u044b\u0445 \u0441 \u043f\u0440\u043e\u0434\u0443\u043a\u0442\u043e\u043c.\u041e\u0441\u0442\u0430\u043b\u044c\u043d\u044b\u0435 30% \u043e\u0441\u0442\u0430\u0432\u0430\u043b\u0438\u0441\u044c \u0437\u0430 \u043d\u0430\u043c\u0438: ARIA-\u0430\u0442\u0440\u0438\u0431\u0443\u0442\u044b, keyboard navigation, focus management, \u0442\u0435\u0441\u0442\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0435 \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e screen reader’\u043e\u0432 \u0438 \u0432\u0441\u0435 \u0442\u0435 \u043c\u043e\u043c\u0435\u043d\u0442\u044b, \u0432 \u043a\u043e\u0442\u043e\u0440\u044b\u0445 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 \u0434\u043e\u043b\u0436\u0435\u043d \u043a\u043e\u0440\u0440\u0435\u043a\u0442\u043d\u043e \u0440\u0430\u0431\u043e\u0442\u0430\u0442\u044c \u0434\u043b\u044f \u0440\u0435\u0430\u043b\u044c\u043d\u043e\u0433\u043e \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044f.\u042d\u0442\u0430 \u043e\u0446\u0435\u043d\u043a\u0430 \u043e\u043a\u0430\u0437\u0430\u043b\u0430\u0441\u044c \u0432\u0435\u0440\u043d\u043e\u0439 \u0432 \u0446\u0435\u043b\u043e\u043c, \u043d\u043e \u0442\u0430\u043a\u043e\u0435 \u0440\u0430\u0437\u0434\u0435\u043b\u0435\u043d\u0438\u0435 \u0432\u0432\u0435\u043b\u043e \u0432 \u0437\u0430\u0431\u043b\u0443\u0436\u0434\u0435\u043d\u0438\u0435. Claude \u043d\u0435 \u043f\u043e\u0434\u0432\u0435\u043b \u0432 \u0432\u0438\u0434\u0438\u043c\u044b\u0445 70%, \u043d\u043e \u043f\u043e\u0434\u0432\u0435\u043b \u0432 \u043d\u0435\u0432\u0438\u0434\u0438\u043c\u043e\u0439 \u0447\u0430\u0441\u0442\u0438, \u0433\u0434\u0435 \u043d\u0430 \u0441\u0430\u043c\u043e\u043c \u0434\u0435\u043b\u0435 \u0438 \u0441\u043a\u0440\u044b\u0432\u0430\u0435\u0442\u0441\u044f \u0434\u043e\u0441\u0442\u0443\u043f\u043d\u043e\u0441\u0442\u044c.AI \u043d\u0430 \u0441\u0442\u0430\u0440\u0442\u0435: \u00abClaude, \u043d\u0430\u043f\u0438\u0448\u0438 \u043c\u043d\u0435 DatePicker!\u00bb\u041d\u0430\u0447\u0430\u043b\u0438 \u0441 \u043c\u0430\u043b\u043e\u0433\u043e: \u0434\u0430\u043b\u0438 Claude \u0434\u0435\u0442\u0430\u043b\u044c\u043d\u044b\u0439 promt \u0441 \u0442\u0440\u0435\u0431\u043e\u0432\u0430\u043d\u0438\u044f\u043c\u0438 WAI-ARIA APG \u00abDate Picker Dialog\u00bb \u0438 \u043f\u043e\u043f\u0440\u043e\u0441\u0438\u043b\u0438 \u0441\u0433\u0435\u043d\u0435\u0440\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0444\u0443\u043d\u0434\u0430\u043c\u0435\u043d\u0442 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430: React, TypeScript, WCAG-\u0434\u043e\u0441\u0442\u0443\u043f\u043d\u043e\u0441\u0442\u044c, \u0431\u0430\u0437\u043e\u0432\u0430\u044f \u0441\u0442\u0440\u0443\u043a\u0442\u0443\u0440\u0430.Promt \u043a Claude\u0421\u043e\u0437\u0434\u0430\u0439 React- \u0438 TypeScript-\u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 DatePicker \u0431\u0435\u0437 \u0432\u043d\u0435\u0448\u043d\u0438\u0445 \u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e\u0441\u0442\u0435\u0439, \u0441\u043b\u0435\u0434\u0443\u044f \u0448\u0430\u0431\u043b\u043e\u043d\u0443 WAI-ARIA APG \u00abDate Picker Dialog\u00bb. WCAG 2.1\/2.2 Level AA.2. \u0421\u0442\u0440\u0443\u043a\u0442\u0443\u0440\u0430: input + aria-describedby \u0434\u043b\u044f \u0444\u043e\u0440\u043c\u0430\u0442\u0430+ \u043a\u043d\u043e\u043f\u043a\u0430-\u0442\u0440\u0438\u0433\u0433\u0435\u0440 \u0441 \u0434\u0438\u043d\u0430\u043c\u0438\u0447\u0435\u0441\u043a\u0438\u043c aria-label+ popover (role=»dialog», aria-modal=»true»)+ calendar grid (table role=»grid»)3. Roving tabindex \u043d\u0430 \u2014 \u0431\u0435\u0437 \u0432\u043b\u043e\u0436\u0435\u043d\u043d\u044b\u04454. aria-live=»polite» \u043d\u0430 \u0437\u0430\u0433\u043e\u043b\u043e\u0432\u043a\u0435 \u043c\u0435\u0441\u044f\u0446\u04305. aria-selected \u0442\u043e\u043b\u044c\u043a\u043e \u043d\u0430 \u0432\u044b\u0431\u0440\u0430\u043d\u043d\u043e\u0439 \u0434\u0430\u0442\u04356. aria-disabled=»true» \u043d\u0430 \u043d\u0435\u0434\u043e\u0441\u0442\u0443\u043f\u043d\u044b\u0445 \u0434\u0430\u0442\u0430\u04457. \u041f\u043e\u043b\u043d\u0430\u044f keyboard navigation: \u0441\u0442\u0440\u0435\u043b\u043a\u0438, Home\/End,PageUp\/PageDown, Shift+PageUp\/Down, Enter\/Space, Escape8. Focus trap \u0432\u043d\u0443\u0442\u0440\u0438 dialog9. \u041f\u0440\u0438 \u0437\u0430\u043a\u0440\u044b\u0442\u0438\u0438 \u2014 \u0444\u043e\u043a\u0443\u0441 \u043d\u0430 \u0442\u0440\u0438\u0433\u0433\u0435\u0440, aria-label \u043e\u0431\u043d\u043e\u0432\u043b\u044f\u0435\u0442\u0441\u044f10. Props: value, onChange, minDate?, maxDate?, disabledDates?, locale?11. CSS Modules, \u043a\u043e\u043d\u0442\u0440\u0430\u0441\u0442\u043d\u043e\u0441\u0442\u044c \u2265 4.5:112. \u0411\u0435\u0437 \u0432\u043d\u0435\u0448\u043d\u0438\u0445 \u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e\u0441\u0442\u0435\u0439 \u043a\u0440\u043e\u043c\u0435 React\u0412\u0430\u0436\u043d\u043e\u0439 \u0434\u0435\u0442\u0430\u043b\u044c\u044e \u0437\u0434\u0435\u0441\u044c \u044f\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u0441\u0441\u044b\u043b\u043a\u0430 \u043d\u0430 \u043a\u043e\u043d\u043a\u0440\u0435\u0442\u043d\u044b\u0439 \u0448\u0430\u0431\u043b\u043e\u043d APG. \u0411\u0435\u0437 \u043d\u0435\u0435 Claude, \u043a\u0430\u043a \u043f\u0440\u0430\u0432\u0438\u043b\u043e, \u0433\u0435\u043d\u0435\u0440\u0438\u0440\u0443\u0435\u0442 \u0441\u044b\u0440\u043e\u0439 DataPicker \u0431\u0435\u0437 \u0443\u0447\u0435\u0442\u0430 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c\u0441\u043a\u043e\u0433\u043e \u043e\u043f\u044b\u0442\u0430. \u0421 \u043d\u0435\u0439 \u0436\u0435 Claude \u043f\u043e \u043a\u0440\u0430\u0439\u043d\u0435\u0439 \u043c\u0435\u0440\u0435 \u043f\u044b\u0442\u0430\u0435\u0442\u0441\u044f \u0441\u043b\u0435\u0434\u043e\u0432\u0430\u0442\u044c \u0438\u0437\u0432\u0435\u0441\u0442\u043d\u043e\u0439 \u043c\u043e\u0434\u0435\u043b\u0438 \u0432\u0437\u0430\u0438\u043c\u043e\u0434\u0435\u0439\u0441\u0442\u0432\u0438\u044f.\u041f\u0435\u0440\u0432\u044b\u0439 \u043e\u0442\u0432\u0435\u0442 \u0431\u044b\u043b \u043e\u0431\u043d\u0430\u0434\u0435\u0436\u0438\u0432\u0430\u044e\u0449\u0438\u043c (\u043f\u043e\u043b\u043d\u044b\u0439 \u043e\u0442\u0432\u0435\u0442 \u043f\u043e\u00a0\u0441\u0441\u044b\u043b\u043a\u0435). Claude \u0432\u044b\u0434\u0430\u043b \u0432\u043f\u043e\u043b\u043d\u0435 \u0440\u0430\u0431\u043e\u0447\u0443\u044e \u0441\u0442\u0440\u0443\u043a\u0442\u0443\u0440\u0443: input \u0441 aria-describedby \u0434\u043b\u044f \u0444\u043e\u0440\u043c\u0430\u0442\u0430, \u043a\u043d\u043e\u043f\u043a\u0430-\u0442\u0440\u0438\u0433\u0433\u0435\u0440 \u0441 \u0434\u0438\u043d\u0430\u043c\u0438\u0447\u0435\u0441\u043a\u0438\u043c aria-label, popover \u0441 role=»dialog» \u0438 aria-modal=»true», \u043a\u0430\u043b\u0435\u043d\u0434\u0430\u0440\u043d\u0430\u044f \u0441\u0435\u0442\u043a\u0430 (table \u0441 role=»grid»). \u0420\u0435\u0430\u043a\u0446\u0438\u044f \u043a\u043e\u043c\u0430\u043d\u0434\u044b: \u00ab\u043f\u043e\u0447\u0442\u0438 \u0433\u043e\u0442\u043e\u0432\u043e\u00bb \u2014 \u0435\u0441\u0442\u044c \u0434\u0430\u0436\u0435 keyboard navigation, \u043d\u043e \u0433\u043b\u0430\u0432\u043d\u044b\u0435 \u0438\u0441\u043f\u044b\u0442\u0430\u043d\u0438\u044f \u0436\u0434\u0430\u043b\u0438 \u043d\u0430\u0441 \u0432\u043f\u0435\u0440\u0435\u0434\u0438.\u0417\u0430\u043f\u0443\u0441\u043a\u0430\u0435\u043c:\u041f\u0435\u0440\u0432\u044b\u0439 \u0437\u0430\u043f\u0443\u0441\u043a DatePicker’\u0430 \u0441 \u043e\u0448\u0438\u0431\u043a\u0430\u043c\u0438\u0424\u0430\u0439\u043b \/public\/index.html \u043f\u0440\u0438\u0448\u043b\u043e\u0441\u044c \u0434\u043e\u0431\u0430\u0432\u043b\u044f\u0442\u044c \u0441\u0430\u043c\u043e\u0441\u0442\u043e\u044f\u0442\u0435\u043b\u044c\u043d\u043e \u2014 Claude \u043f\u0440\u043e \u043d\u0435\u0433\u043e \u0437\u0430\u0431\u044b\u043b.\u0421\u0442\u0440\u0443\u043a\u0442\u0443\u0440\u0430 \u043f\u0440\u043e\u0435\u043a\u0442\u0430\u0427\u0442\u043e \u0443 Claude \u043f\u043e\u043b\u0443\u0447\u0438\u043b\u043e\u0441\u044c \u0445\u043e\u0440\u043e\u0448\u043e?\u041e\u043d \u043e\u0431\u0435\u0441\u043f\u0435\u0447\u0438\u043b \u0440\u0430\u0437\u0443\u043c\u043d\u043e\u0435 \u0440\u0430\u0437\u0434\u0435\u043b\u0435\u043d\u0438\u0435 \u043c\u0435\u0436\u0434\u0443 DatePicker, CalendarGrid \u0438 DayCell, \u043d\u0435 \u0441\u043e\u0437\u0434\u0430\u043b \u043e\u0434\u0438\u043d \u043e\u0433\u0440\u043e\u043c\u043d\u044b\u0439 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442, \u0432 \u043a\u043e\u0442\u043e\u0440\u043e\u043c \u0432\u0441\u0435 \u0430\u0441\u043f\u0435\u043a\u0442\u044b \u0431\u044b\u043b\u0438 \u0431\u044b \u0441\u043e\u0431\u0440\u0430\u043d\u044b \u0432 \u043e\u0434\u043d\u043e\u043c \u0444\u0430\u0439\u043b\u0435.\u0421\u043a\u0435\u043b\u0435\u0442 ARIA \u0442\u0430\u043a\u0436\u0435 \u0431\u044b\u043b \u0447\u0430\u0441\u0442\u0438\u0447\u043d\u043e \u043f\u0440\u0430\u0432\u0438\u043b\u044c\u043d\u044b\u043c. \u0421\u0435\u0442\u043a\u0430, \u0441\u0442\u0440\u043e\u043a\u0438 \u0438 \u044f\u0447\u0435\u0439\u043a\u0438 \u0431\u044b\u043b\u0438 \u043d\u0430 \u043c\u0435\u0441\u0442\u0435. \u041c\u0435\u0442\u043a\u0438 \u0434\u0430\u0442 \u043d\u0435 \u0431\u044b\u043b\u0438 \u043f\u0440\u043e\u0441\u0442\u043e \u0446\u0438\u0444\u0440\u0430\u043c\u0438. Claude \u0441\u0433\u0435\u043d\u0435\u0440\u0438\u0440\u043e\u0432\u0430\u043b \u043c\u0435\u0442\u043a\u0438, \u0431\u043b\u0438\u0436\u0435 \u043a \u043f\u043e\u043b\u043d\u044b\u043c \u0434\u0430\u0442\u0430\u043c, \u0447\u0442\u043e \u0438 \u0431\u044b\u043b\u043e \u043d\u0443\u0436\u043d\u043e screen reader’\u0443.\u0414\u043b\u044f \u043f\u0435\u0440\u0432\u043e\u0433\u043e \u043f\u0440\u043e\u0445\u043e\u0434\u0430 \u043f\u0440\u043e\u043f\u0441\u044b TypeScript \u0431\u044b\u043b\u0438 \u0432\u043f\u043e\u043b\u043d\u0435 \u043f\u0440\u0438\u0435\u043c\u043b\u0435\u043c\u044b: value, onChange, minDate, maxDate, disabledDates \u0438 locale.\u041b\u043e\u0433\u0438\u043a\u0430 \u043a\u0430\u043b\u0435\u043d\u0434\u0430\u0440\u044f \u0442\u0430\u043a\u0436\u0435 \u0440\u0430\u0431\u043e\u0442\u0430\u043b\u0430 \u0432 \u043e\u0431\u044b\u0447\u043d\u044b\u0445 \u0441\u0446\u0435\u043d\u0430\u0440\u0438\u044f\u0445 \u0432\u0437\u0430\u0438\u043c\u043e\u0434\u0435\u0439\u0441\u0442\u0432\u0438\u044f \u0441 \u043c\u044b\u0448\u044c\u044e. \u0420\u0430\u0441\u0447\u0435\u0442 \u043c\u0435\u0441\u044f\u0446\u0430, \u0437\u0430\u043f\u043e\u043b\u043d\u0435\u043d\u0438\u0435 \u044f\u0447\u0435\u0435\u043a, \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435 \u0432\u044b\u0431\u0440\u0430\u043d\u043d\u043e\u0439 \u0434\u0430\u0442\u044b \u0438 \u0431\u0430\u0437\u043e\u0432\u043e\u0435 \u043f\u0435\u0440\u0435\u043a\u043b\u044e\u0447\u0435\u043d\u0438\u0435 \u2014 \u0432\u0441\u0435 \u044d\u0442\u043e \u0431\u044b\u043b\u043e \u0440\u0430\u0431\u043e\u0442\u043e\u0441\u043f\u043e\u0441\u043e\u0431\u043d\u043e.\u041c\u044b \u0441\u043e\u0445\u0440\u0430\u043d\u0438\u043b\u0438 \u043f\u0440\u0438\u043c\u0435\u0440\u043d\u043e 60% \u044d\u0442\u043e\u0439 \u0431\u0430\u0437\u044b. \u0417\u0430\u0442\u0435\u043c \u044f \u0437\u0430\u043f\u0443\u0441\u0442\u0438\u043b NVDA.\u0427\u0442\u043e \u0443 Claude \u043d\u0435 \u043f\u043e\u043b\u0443\u0447\u0438\u043b\u043e\u0441\u044c?\u041f\u0435\u0440\u0432\u043e\u0439 \u0441\u0435\u0440\u044c\u0435\u0437\u043d\u043e\u0439 \u043f\u0440\u043e\u0431\u043b\u0435\u043c\u043e\u0439 \u043e\u043a\u0430\u0437\u0430\u043b\u0441\u044f \u0444\u043e\u043a\u0443\u0441. \u042f \u043e\u0442\u043a\u0440\u044b\u043b \u0434\u0438\u0430\u043b\u043e\u0433\u043e\u0432\u043e\u0435 \u043e\u043a\u043d\u043e, \u043d\u0430\u0436\u0430\u043b Tab, \u0438 \u0444\u043e\u043a\u0443\u0441 \u043f\u043e\u043a\u0438\u043d\u0443\u043b \u043a\u0430\u043b\u0435\u043d\u0434\u0430\u0440\u044c \u2014 \u044d\u0442\u043e\u0433\u043e \u043d\u0435 \u0434\u043e\u043b\u0436\u043d\u043e \u0431\u044b\u043b\u043e \u043f\u0440\u043e\u0438\u0437\u043e\u0439\u0442\u0438. \u041c\u043e\u0434\u0430\u043b\u044c\u043d\u043e\u0435 \u0434\u0438\u0430\u043b\u043e\u0433\u043e\u0432\u043e\u0435 \u043e\u043a\u043d\u043e \u0434\u043e\u043b\u0436\u043d\u043e \u0443\u0434\u0435\u0440\u0436\u0438\u0432\u0430\u0442\u044c \u0444\u043e\u043a\u0443\u0441 \u0432\u043d\u0443\u0442\u0440\u0438, \u043f\u043e\u043a\u0430 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c \u0435\u0433\u043e \u043d\u0435 \u0437\u0430\u043a\u0440\u043e\u0435\u0442.\u041a\u043b\u0430\u0432\u0438\u0448\u0430\u0421\u0442\u0430\u0442\u0443\u0441\u2190 \u2192 \u2191 \u2193\u0420\u0430\u0431\u043e\u0442\u0430\u043b\u043eHome\u041d\u0435 \u0440\u0430\u0431\u043e\u0442\u0430\u043b\u043eEnd\u041d\u0435 \u0440\u0430\u0431\u043e\u0442\u0430\u043b\u043ePageUp \u0438 PageDown\u041d\u0435 \u0440\u0430\u0431\u043e\u0442\u0430\u043b\u043eShift + PageUp\u041d\u0435 \u0440\u0430\u0431\u043e\u0442\u0430\u043b\u043eShift + PageDown\u041d\u0435 \u0440\u0430\u0431\u043e\u0442\u0430\u043b\u043e\u041a\u043b\u0430\u0432\u0438\u0448\u0430 \u00abEsc\u00bb \u0437\u0430\u043a\u0440\u044b\u0432\u0430\u043b\u0430 \u0434\u0438\u0430\u043b\u043e\u0433\u043e\u0432\u043e\u0435 \u043e\u043a\u043d\u043e, \u043d\u043e \u0444\u043e\u043a\u0443\u0441 \u043d\u0435 \u0432\u0441\u0435\u0433\u0434\u0430 \u043d\u0430\u0434\u0435\u0436\u043d\u043e \u0432\u043e\u0437\u0432\u0440\u0430\u0449\u0430\u043b\u0441\u044f \u043a \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0443-\u0442\u0440\u0438\u0433\u0433\u0435\u0440\u0443. \u0412 \u043e\u0434\u043d\u043e\u043c \u0441\u043b\u0443\u0447\u0430\u0435 \u043e\u043d \u043e\u043a\u0430\u0437\u0430\u043b\u0441\u044f \u043d\u0430 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0435 body, \u0447\u0442\u043e \u044f\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u0432\u0435\u0436\u043b\u0438\u0432\u044b\u043c \u0441\u043f\u043e\u0441\u043e\u0431\u043e\u043c \u0441\u043a\u0430\u0437\u0430\u0442\u044c, \u0447\u0442\u043e \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c \u043e\u043a\u0430\u0437\u0430\u043b\u0441\u044f \u0432 \u0442\u0443\u043f\u0438\u043a\u0435.\u041f\u0440\u043e\u0431\u043b\u0435\u043c\u044b \u0441\u043e screen reader’\u043e\u043c \u0431\u044b\u043b\u0438 \u0435\u0449\u0435 \u0445\u0443\u0436\u0435.\u0417\u0430\u0433\u043e\u043b\u043e\u0432\u043e\u043a \u043c\u0435\u0441\u044f\u0446\u0430 \u043d\u0435 \u0438\u043c\u0435\u043b \u0430\u0442\u0440\u0438\u0431\u0443\u0442\u0430 aria-live=»polite», \u043f\u043e\u044d\u0442\u043e\u043c\u0443 NVDA \u043d\u0435 \u043e\u0431\u044a\u044f\u0432\u043b\u044f\u043b\u0430 \u043e\u0431 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u0438 \u043c\u0435\u0441\u044f\u0446\u0430. \u0417\u0440\u044f\u0447\u0438\u0439 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c \u0432\u0438\u0434\u0438\u0442, \u043a\u0430\u043a \u043c\u0435\u043d\u044f\u0435\u0442\u0441\u044f \u043c\u0435\u0441\u044f\u0446. \u041f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c screen reader’\u0430 \u0441\u043b\u044b\u0448\u0438\u0442 \u0442\u043e\u043b\u044c\u043a\u043e \u0442\u0438\u0448\u0438\u043d\u0443.Claude \u0442\u0430\u043a\u0436\u0435 \u0434\u043e\u0431\u0430\u0432\u0438\u043b \u0430\u0442\u0440\u0438\u0431\u0443\u0442 aria-selected=»false» \u043a\u043e \u0432\u0441\u0435\u043c \u043d\u0435\u0432\u044b\u0431\u0440\u0430\u043d\u043d\u044b\u043c \u0434\u043d\u044f\u043c. \u042d\u0442\u043e \u0432\u044b\u0433\u043b\u044f\u0434\u0438\u0442 \u0431\u0435\u0437\u043e\u0431\u0438\u0434\u043d\u043e, \u0435\u0441\u043b\u0438 \u043f\u0440\u043e\u0441\u0442\u043e \u043f\u0440\u043e\u0441\u043c\u0430\u0442\u0440\u0438\u0432\u0430\u0442\u044c DOM, \u043d\u043e \u044d\u0442\u043e \u043d\u0435 \u0442\u0430\u043a, \u0432\u0435\u0434\u044c \u0432\u044b\u0431\u0440\u0430\u043d\u043d\u0430\u044f \u0434\u0430\u0442\u0430 \u0434\u043e\u043b\u0436\u043d\u0430 \u0438\u043c\u0435\u0442\u044c \u0430\u0442\u0440\u0438\u0431\u0443\u0442 aria-selected, \u0430 \u0434\u0440\u0443\u0433\u0438\u0435 \u0434\u0430\u0442\u044b \u043d\u0435 \u0434\u043e\u043b\u0436\u043d\u044b \u0441\u043d\u043e\u0432\u0430 \u0438 \u0441\u043d\u043e\u0432\u0430 \u043f\u043e\u0432\u0442\u043e\u0440\u044f\u0442\u044c, \u0447\u0442\u043e \u043e\u043d\u0438 \u043d\u0435 \u0432\u044b\u0431\u0440\u0430\u043d\u044b. \u0412 \u0441\u0433\u0435\u043d\u0435\u0440\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u043e\u0439 \u0432\u0435\u0440\u0441\u0438\u0438 \u043d\u0430\u0432\u0438\u0433\u0430\u0446\u0438\u044f \u0431\u044b\u0441\u0442\u0440\u043e \u0441\u0442\u0430\u043b\u0430 \u00ab\u0448\u0443\u043c\u043d\u043e\u0439\u00bb.\u0412 \u043f\u043e\u043b\u0435 \u0432\u0432\u043e\u0434\u0430 \u0442\u0430\u043a\u0436\u0435 \u043e\u0442\u0441\u0443\u0442\u0441\u0442\u0432\u043e\u0432\u0430\u043b \u0430\u0442\u0440\u0438\u0431\u0443\u0442 aria-describedby, \u043f\u043e\u044d\u0442\u043e\u043c\u0443 \u044d\u043a\u0440\u0430\u043d\u043d\u044b\u0439 \u0441\u0447\u0438\u0442\u044b\u0432\u0430\u0442\u0435\u043b\u044c \u043d\u0435 \u043e\u0437\u0432\u0443\u0447\u0438\u0432\u0430\u043b \u043e\u0436\u0438\u0434\u0430\u0435\u043c\u044b\u0439 \u0444\u043e\u0440\u043c\u0430\u0442 \u0434\u0430\u0442\u044b.\u0411\u044b\u043b\u0430 \u0442\u0430\u043a\u0436\u0435 \u043e\u0434\u043d\u0430 \u043e\u0448\u0438\u0431\u043a\u0430, \u043d\u0435 \u0441\u0432\u044f\u0437\u0430\u043d\u043d\u0430\u044f \u0441 \u0434\u043e\u0441\u0442\u0443\u043f\u043d\u043e\u0441\u0442\u044c\u044e: \u043f\u0440\u0438 keyboard navigation \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043b\u0438\u0441\u044c \u0438\u043d\u0434\u0435\u043a\u0441\u0430\u0446\u0438\u0438 \u0447\u0438\u0441\u043b\u043e\u0432\u043e\u0433\u043e \u043c\u0430\u0441\u0441\u0438\u0432\u0430 \u2014 \u044d\u0442\u043e \u0440\u0430\u0431\u043e\u0442\u0430\u043b\u043e \u0434\u043e \u0442\u0435\u0445 \u043f\u043e\u0440, \u043f\u043e\u043a\u0430 \u0444\u043e\u043a\u0443\u0441 \u043d\u0435 \u043f\u0435\u0440\u0435\u0441\u0435\u043a\u0430\u043b \u0433\u0440\u0430\u043d\u0438\u0446\u044b \u043c\u0435\u0441\u044f\u0446\u0435\u0432 \u0438\u043b\u0438 \u043d\u0435 \u043a\u0430\u0441\u0430\u043b\u0441\u044f \u044f\u0447\u0435\u0435\u043a \u043e\u0442\u0441\u0442\u0443\u043f\u0430. 31 \u044f\u043d\u0432\u0430\u0440\u044f \u043f\u043b\u044e\u0441 \u043e\u0434\u0438\u043d \u0434\u0435\u043d\u044c \u0434\u043e\u043b\u0436\u0435\u043d \u043f\u0440\u0435\u0432\u0440\u0430\u0442\u0438\u0442\u044c\u0441\u044f \u0432 1 \u0444\u0435\u0432\u0440\u0430\u043b\u044f. \u0418\u043d\u0434\u0435\u043a\u0441 \u043c\u0430\u0441\u0441\u0438\u0432\u0430 \u044d\u0442\u043e\u0433\u043e \u043d\u0435 \u043f\u043e\u043d\u0438\u043c\u0430\u0435\u0442, \u0430 \u043e\u0431\u044a\u0435\u043a\u0442 Date \u2014 \u043f\u043e\u043d\u0438\u043c\u0430\u0435\u0442.\u0412\u043e\u0442 \u0432 \u0447\u0435\u043c \u0437\u0430\u043a\u043b\u044e\u0447\u0430\u043b\u0430\u0441\u044c \u0441\u0443\u0442\u044c \u043f\u0440\u043e\u0431\u043b\u0435\u043c\u044b: \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 \u0440\u0430\u0431\u043e\u0442\u0430\u043b \u0434\u043b\u044f \u0434\u0435\u043c\u043e\u043d\u0441\u0442\u0440\u0430\u0446\u0438\u0438, \u043d\u043e \u043d\u0435 \u0441\u043e\u043e\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u043e\u0432\u0430\u043b \u043c\u043e\u0434\u0435\u043b\u0438 \u0432\u0437\u0430\u0438\u043c\u043e\u0434\u0435\u0439\u0441\u0442\u0432\u0438\u044f. \u0414\u0430\u043b\u044c\u0448\u0435 \u0442\u0440\u0438 \u044d\u0442\u0430\u043f\u0430: \u043a\u0430\u043a \u043c\u044b \u044d\u0442\u043e \u0447\u0438\u043d\u0438\u043b\u0438.\u042d\u0442\u0430\u043f 1. \u041f\u0435\u0440\u0435\u0440\u0430\u0431\u043e\u0442\u0430\u0442\u044c \u00ab\u043b\u043e\u0432\u0443\u0448\u043a\u0438 \u0444\u043e\u043a\u0443\u0441\u0430\u00bb \u0432\u043e\u043a\u0440\u0443\u0433 \u0442\u0435\u043a\u0443\u0449\u0435\u0433\u043e DOM\u00ab\u041b\u043e\u0432\u0443\u0448\u043a\u0430 \u0444\u043e\u043a\u0443\u0441\u0430\u00bb Claude \u0441\u043e\u0431\u0438\u0440\u0430\u043b\u0430 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u044b, \u043d\u0430 \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043c\u043e\u0436\u043d\u043e \u043f\u0435\u0440\u0435\u0432\u0435\u0441\u0442\u0438 \u0444\u043e\u043a\u0443\u0441, \u0442\u043e\u043b\u044c\u043a\u043e \u043e\u0434\u0438\u043d \u0440\u0430\u0437 \u2014 \u043f\u0440\u0438 \u043e\u0442\u043a\u0440\u044b\u0442\u0438\u0438 \u0434\u0438\u0430\u043b\u043e\u0433\u043e\u0432\u043e\u0433\u043e \u043e\u043a\u043d\u0430. \u0412 \u043a\u0430\u043b\u0435\u043d\u0434\u0430\u0440\u0435 \u0442\u0430\u043a\u043e\u0439 \u043f\u043e\u0434\u0445\u043e\u0434 \u043d\u0435\u043d\u0430\u0434\u0435\u0436\u0435\u043d, \u043f\u0440\u0438 \u0441\u043c\u0435\u043d\u0435 \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0430\u0435\u043c\u043e\u0433\u043e \u043c\u0435\u0441\u044f\u0446\u0430 DOM \u0438\u0437\u043c\u0435\u043d\u044f\u0435\u0442\u0441\u044f, \u044f\u0447\u0435\u0439\u043a\u0438 \u0434\u043d\u0435\u0439 \u0441\u043e\u0437\u0434\u0430\u044e\u0442\u0441\u044f \u0437\u0430\u043d\u043e\u0432\u043e, \u0430 \u00ab\u043b\u043e\u0432\u0443\u0448\u043a\u0430\u00bb, \u043e\u0441\u043d\u043e\u0432\u0430\u043d\u043d\u0430\u044f \u043d\u0430 \u0441\u0442\u0430\u0440\u044b\u0445 \u0443\u0437\u043b\u0430\u0445, \u043d\u0430\u0447\u0438\u043d\u0430\u0435\u0442 \u0443\u0434\u0435\u0440\u0436\u0438\u0432\u0430\u0442\u044c \u00ab\u043f\u0440\u0438\u0437\u0440\u0430\u043a\u0438\u00bb.\u041c\u044b \u0438\u0437\u043c\u0435\u043d\u0438\u043b\u0438 \u043b\u043e\u0433\u0438\u043a\u0443 \u0442\u0430\u043a, \u0447\u0442\u043e\u0431\u044b \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u044b, \u043d\u0430 \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043c\u043e\u0436\u043d\u043e \u043f\u0435\u0440\u0435\u0432\u0435\u0441\u0442\u0438 \u0444\u043e\u043a\u0443\u0441, \u043f\u0435\u0440\u0435\u0441\u0447\u0438\u0442\u044b\u0432\u0430\u043b\u0438\u0441\u044c \u043f\u0440\u0438 \u043a\u0430\u0436\u0434\u043e\u043c \u0441\u043e\u0431\u044b\u0442\u0438\u0438 Tab.function useFocusTrap(  containerRef: React.RefObject<HTMLDivElement>,  isOpen: boolean) {  const triggerRef = useRef<HTMLElement | null>(null);   useEffect(() => {if (!isOpen) return; const container = containerRef.current;if (!container) return; triggerRef.current = document.activeElement as HTMLElement; function getFocusable() {  return container!.querySelectorAll<HTMLElement>(    ‘td[tabindex=»0″], button:not([disabled])’  );} function handleKeyDown(e: KeyboardEvent) {  if (e.key !== ‘Tab’) return;   const focusable = getFocusable();  if (!focusable.length) return;   const first = focusable[0];  const last = focusable[focusable.length — 1];   if (e.shiftKey && document.activeElement === first) {    e.preventDefault();    last.focus();  } else if (!e.shiftKey && document.activeElement === last) {    e.preventDefault();    first.focus();  }} container.addEventListener(‘keydown’, handleKeyDown);    container.querySelector<HTMLElement>(‘td[tabindex=»0″]’)?.focus(); return () => {  container.removeEventListener(‘keydown’, handleKeyDown);  triggerRef.current?.focus();};  }, [isOpen, containerRef]);}\u041c\u0435\u0445\u0430\u043d\u0438\u0437\u043c \u0432\u0430\u0436\u043d\u0435\u0435 \u0441\u0430\u043c\u043e\u0433\u043e \u0444\u0440\u0430\u0433\u043c\u0435\u043d\u0442\u0430 \u043a\u043e\u0434\u0430. \u041b\u043e\u0432\u0443\u0448\u043a\u0430 \u0444\u043e\u043a\u0443\u0441\u0430 \u0432 \u0434\u0438\u043d\u0430\u043c\u0438\u0447\u0435\u0441\u043a\u043e\u043c \u043a\u0430\u043b\u0435\u043d\u0434\u0430\u0440\u0435 \u043d\u0435 \u043c\u043e\u0436\u0435\u0442 \u0438\u0441\u0445\u043e\u0434\u0438\u0442\u044c \u0438\u0437 \u0442\u043e\u0433\u043e, \u0447\u0442\u043e \u0441\u043f\u0438\u0441\u043e\u043a \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432, \u043d\u0430 \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043c\u043e\u0436\u043d\u043e \u0443\u0441\u0442\u0430\u043d\u043e\u0432\u0438\u0442\u044c \u0444\u043e\u043a\u0443\u0441, \u043e\u0441\u0442\u0430\u0435\u0442\u0441\u044f \u043d\u0435\u0438\u0437\u043c\u0435\u043d\u043d\u044b\u043c. \u041c\u0435\u0441\u044f\u0446 \u043c\u0435\u043d\u044f\u0435\u0442\u0441\u044f, DOM \u043c\u0435\u043d\u044f\u0435\u0442\u0441\u044f, \u0438 \u043b\u043e\u0432\u0443\u0448\u043a\u0430 \u0434\u043e\u043b\u0436\u043d\u0430 \u0440\u0430\u0431\u043e\u0442\u0430\u0442\u044c \u0441 \u0442\u0435\u043c, \u0447\u0442\u043e \u0438\u043c\u0435\u0435\u0442\u0441\u044f \u0432 \u0434\u0430\u043d\u043d\u044b\u0439 \u043c\u043e\u043c\u0435\u043d\u0442.\u042d\u0442\u0430\u043f 2. \u041f\u0435\u0440\u0435\u043d\u0435\u0441\u0442\u0438 keyboard navigation \u0438\u0437 \u0438\u043d\u0434\u0435\u043a\u0441\u043e\u0432 \u0432 \u043e\u0431\u044a\u0435\u043a\u0442\u044b Date\u0412 \u043f\u0435\u0440\u0432\u043e\u043d\u0430\u0447\u0430\u043b\u044c\u043d\u043e\u0439 \u0440\u0435\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u0438 \u0434\u043d\u0438 \u0440\u0430\u0441\u0441\u043c\u0430\u0442\u0440\u0438\u0432\u0430\u043b\u0438\u0441\u044c \u043a\u0430\u043a \u044f\u0447\u0435\u0439\u043a\u0438 \u043c\u0430\u0441\u0441\u0438\u0432\u0430.\u042d\u0442\u043e \u043f\u0440\u0438\u0432\u043e\u0434\u0438\u0442 \u043a \u0441\u0431\u043e\u044f\u043c \u043f\u0440\u0438 \u0440\u0430\u0431\u043e\u0442\u0435 \u0441 \u0437\u0430\u043f\u043e\u043b\u043d\u044f\u044e\u0449\u0438\u043c\u0438 \u044f\u0447\u0435\u0439\u043a\u0430\u043c\u0438 \u0438 \u043d\u0430 \u0433\u0440\u0430\u043d\u0438\u0446\u0430\u0445 \u043c\u0435\u0441\u044f\u0446\u0435\u0432. \u0412\u044b\u0431\u043e\u0440 \u0434\u0430\u0442\u044b \u2014 \u044d\u0442\u043e \u043d\u0435 \u044d\u043b\u0435\u043a\u0442\u0440\u043e\u043d\u043d\u0430\u044f \u0442\u0430\u0431\u043b\u0438\u0446\u0430, \u0430 \u043a\u0430\u043b\u0435\u043d\u0434\u0430\u0440\u044c. \u0412 \u043a\u0430\u043b\u0435\u043d\u0434\u0430\u0440\u0435 \u0443\u0436\u0435 \u0435\u0441\u0442\u044c \u043f\u043e\u0434\u0445\u043e\u0434\u044f\u0449\u0438\u0439 \u043c\u0435\u0445\u0430\u043d\u0438\u0437\u043c \u0434\u043b\u044f \u043f\u0435\u0440\u0435\u043c\u0435\u0449\u0435\u043d\u0438\u044f \u043f\u043e \u043c\u0435\u0441\u044f\u0446\u0430\u043c \u0438 \u0433\u043e\u0434\u0430\u043c.function useCalendarNavigation(  focusedDate: Date,  setFocusedDate: (date: Date) => void,  minDate?: Date,  maxDate?: Date) {  return useCallback((e: React.KeyboardEvent)…<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[],"tags":[],"class_list":["post-485319","post","type-post","status-publish","format-standard","hentry"],"_links":{"self":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/posts\/485319","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=485319"}],"version-history":[{"count":0,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/posts\/485319\/revisions"}],"wp:attachment":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=485319"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=485319"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=485319"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}