-
Notifications
You must be signed in to change notification settings - Fork 186
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
base: master
Are you sure you want to change the base?
doc(DateInput/FormLayoutGroup): Segmented example without visible labels #8271
Conversation
In segmented FormLayoutGroup
In the source tab
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 ReportAll modified and coverable lines are covered by tests ✅
Additional details and impacted files@@ Coverage Diff @@
## master #8271 +/- ##
==========================================
- Coverage 95.58% 95.46% -0.13%
==========================================
Files 404 403 -1
Lines 11612 11591 -21
Branches 3857 3841 -16
==========================================
- Hits 11099 11065 -34
- Misses 513 526 +13
Flags with carried forward coverage won't be shown. Click here to find out more. ☔ View full report in Codecov by Sentry. |
👀 Docs deployed
Commit 1c9bcc7 |
Тем не менее у DateInput ещё остаются серьёзные проблемы с доступностью. |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
👍
Описание
Пока изучал проблематику задачи #7867 вспомнил, что возможноcть передачи
placeholder
вDateInput
мы уже реализовали с помощью свойстваrederCustomValue
в #8168Собственно проблема задачи #7867 в том, что вот такой дизайн, где лейблы над полями отстутсвуют, и текст лэйблов на самом деле лежит как

placeholder
у инпутов, было сложно реализовать без #8168Оставался лишь вопрос как это реализовать доступно, чтобы скринридер зачитал названия полей, например, даже когда в них введен текст.
Как решение можно воспользоваться нашим сервисным компонентом
VisuallyHidden
, в котором можно задать тегlabel
через свойствоComponent="label"
, продублировать текст из плейсхолдера и связать черезid
иhtmlFor
с инпутом.Добавли пример в сторибук и в доку, чтобы ссылаться на него.
В
VoiceOver
иNVDA
текст зачитывается очень даже не плохо. Надо ещё проконсультироваться со специалистом по доступности.Release notes
Документация
FormLayoutGroup
в режимеsegmented
, для дизайна, когда лейблы визуально находятся в инпутах на месте плейсхолдера