fix(DateInput): fix DateInput and DateRangeInput a11y

[EldarMuhamethanov]

• close [Bug][DateInput]: Ошибки связанные с id #7839

---

• Документация фичи
• Release notes

Описание

При использовании компонента DateInput внутри FormItem возникает проблема с некорректной связью между label и полем ввода через атрибуты for/id. Это происходит по двум причинам:

1. ID, переданный в FormItem, привязывается к неинтерактивному элементу span внутри FormField, вместо фактического поля ввода в DateInput
2. Поле ввода внутри DateInput скрыто с помощью type="hidden", что является некорректным подходом с точки зрения доступности

Изменения

1. Заменили input type="hidden" на компонент VisuallyHidden в:

   • DateInput
   • DateRangeInput

2. Реализовали корректную передачу id в скрытое поле ввода через VisuallyHidden

Результат

Теперь label из FormItem корректно связывается с полем ввода через атрибуты for/id, что улучшает доступность компонента для пользователей, использующих вспомогательные технологии.

Release notes

Исправления

• DateInput: исправлена проблема с доступностью, а именно связь с label через id
• DateRangeInput: исправлена проблема с доступностью, а именно связь с label через id

[github-actions]

size-limit report 📦

Path	Size
JS	387.02 KB (+0.01% 🔺)
JS (gzip)	117.1 KB (+0.02% 🔺)
JS (brotli)	96.63 KB (+0.17% 🔺)
JS import Div (tree shaking)	1.56 KB (0%)
CSS	336.88 KB (0%)
CSS (gzip)	41.8 KB (0%)
CSS (brotli)	33.32 KB (0%)

[github-actions]

e2e tests

⚠️ Some screenshots were failed. See Playwright Report.

Playwright Report

[github-actions]

👀 Docs deployed

• ✅ Styleguide
• ✅ Storybook

Commit 7ddf7db

[andrey-medvedev-vk]

@EldarMuhamethanov здорово! 👏

а ты случайно не слушал как это звучит в NVDA?
Я сам, прости, ещё не проверял, но попробую как-нибудь.

Просто есть опасение, что теперь тут может быть некоторая какафония из-за подписей для каждого элемента маски + input.
Я могу ошибаться, конечно, но это возможно, и если это так, то придётся тогда совсем спрятать от скринридеров маску 🤔

[EldarMuhamethanov]

а ты случайно не слушал как это звучит в NVDA?

Не слушал, попробую послушать тогда, раз там может быть проблема

[codesandbox-ci]

This pull request is automatically built and testable in CodeSandbox.

To see build info of the built libraries, click here or the icon next to each commit SHA.

[codecov]

Codecov Report

All modified and coverable lines are covered by tests ✅

Project coverage is 95.51%. Comparing base (c370b70) to head (7ddf7db).
Report is 7 commits behind head on master.

Additional details and impacted files

@@           Coverage Diff           @@
##           master    #7953   +/-   ##
=======================================
  Coverage   95.51%   95.51%           
=======================================
  Files         396      396           
  Lines       11233    11234    +1     
  Branches     3718     3718           
=======================================
+ Hits        10729    10730    +1     
  Misses        504      504           

Flag	Coverage Δ
unittests	95.51% <100.00%> (+<0.01%)	⬆️

Flags with carried forward coverage won't be shown. Click here to find out more.

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

[EldarMuhamethanov]

а ты случайно не слушал как это звучит в NVDA?

@andrey-medvedev-vk Наконец-то дошли руки до NVDA. Попробовал, ничего плохого не заметил