Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

doc(DateInput/FormLayoutGroup): Segmented example without visible labels #8271

Draft
wants to merge 3 commits into
base: master
Choose a base branch
from

Conversation

andrey-medvedev-vk
Copy link
Contributor


  • Unit-тесты
  • e2e-тесты
  • Дизайн-ревью
  • Документация фичи
  • Release notes

Описание

Пока изучал проблематику задачи #7867 вспомнил, что возможноcть передачи placeholder в DateInput мы уже реализовали с помощью свойства rederCustomValue в #8168

Собственно проблема задачи #7867 в том, что вот такой дизайн, где лейблы над полями отстутсвуют, и текст лэйблов на самом деле лежит как placeholder у инпутов, было сложно реализовать без #8168
Screenshot 2025-02-14 at 13 15 07

Оставался лишь вопрос как это реализовать доступно, чтобы скринридер зачитал названия полей, например, даже когда в них введен текст.

Как решение можно воспользоваться нашим сервисным компонентом VisuallyHidden, в котором можно задать тег label через свойство Component="label", продублировать текст из плейсхолдера и связать через id и htmlFor с инпутом.
Добавли пример в сторибук и в доку, чтобы ссылаться на него.

В VoiceOver и NVDA текст зачитывается очень даже не плохо. Надо ещё проконсультироваться со специалистом по доступности.

Release notes

Документация

  • FormLayoutGroup: добавлен пример доступного FormLayoutGroup в режиме segmented, для дизайна, когда лейблы визуально находятся в инпутах на месте плейсхолдера

Copy link

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.

Copy link

codecov bot commented Feb 14, 2025

Codecov Report

All modified and coverable lines are covered by tests ✅

Project coverage is 95.54%. Comparing base (67b998d) to head (1c9bcc7).
Report is 6 commits behind head on master.

Additional details and impacted files
@@            Coverage Diff             @@
##           master    #8271      +/-   ##
==========================================
- Coverage   95.58%   95.54%   -0.05%     
==========================================
  Files         404      404              
  Lines       11612    11641      +29     
  Branches     3857     3859       +2     
==========================================
+ Hits        11099    11122      +23     
- Misses        513      519       +6     
Flag Coverage Δ
unittests 95.54% <ø> (-0.05%) ⬇️

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.

Copy link
Contributor

👀 Docs deployed

Commit 1c9bcc7

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

[Feature]: Placeholder как label у DateInput
1 participant