doc(DateInput/FormLayoutGroup): Segmented example without visible labels #8271
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Описание
Пока изучал проблематику задачи #7867 вспомнил, что возможноcть передачи
placeholder
вDateInput
мы уже реализовали с помощью свойстваrederCustomValue
в #8168Собственно проблема задачи #7867 в том, что вот такой дизайн, где лейблы над полями отстутсвуют, и текст лэйблов на самом деле лежит как
![Screenshot 2025-02-14 at 13 15 07](https://private-user-images.githubusercontent.com/178798297/413325616-fd157738-1bc3-4a6d-809a-7fe209968324.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3Mzk1OTkwMTcsIm5iZiI6MTczOTU5ODcxNywicGF0aCI6Ii8xNzg3OTgyOTcvNDEzMzI1NjE2LWZkMTU3NzM4LTFiYzMtNGE2ZC04MDlhLTdmZTIwOTk2ODMyNC5wbmc_WC1BbXotQWxnb3JpdGhtPUFXUzQtSE1BQy1TSEEyNTYmWC1BbXotQ3JlZGVudGlhbD1BS0lBVkNPRFlMU0E1M1BRSzRaQSUyRjIwMjUwMjE1JTJGdXMtZWFzdC0xJTJGczMlMkZhd3M0X3JlcXVlc3QmWC1BbXotRGF0ZT0yMDI1MDIxNVQwNTUxNTdaJlgtQW16LUV4cGlyZXM9MzAwJlgtQW16LVNpZ25hdHVyZT1kZWVhMzQ1MWM3MmZiYzIxZjYxNmEwZmFjZjM0MTc2MmM1MjU4ZDU3MjE1YjYxYmMyZDExMmE1MDY1ZTg1OWIxJlgtQW16LVNpZ25lZEhlYWRlcnM9aG9zdCJ9.SdO1PSwPo2eMD7wXUcC9K3F-NrGT230KYhBJvj4GQ2Q)
placeholder
у инпутов, было сложно реализовать без #8168Оставался лишь вопрос как это реализовать доступно, чтобы скринридер зачитал названия полей, например, даже когда в них введен текст.
Как решение можно воспользоваться нашим сервисным компонентом
VisuallyHidden
, в котором можно задать тегlabel
через свойствоComponent="label"
, продублировать текст из плейсхолдера и связать черезid
иhtmlFor
с инпутом.Добавли пример в сторибук и в доку, чтобы ссылаться на него.
В
VoiceOver
иNVDA
текст зачитывается очень даже не плохо. Надо ещё проконсультироваться со специалистом по доступности.Release notes
Документация
FormLayoutGroup
в режимеsegmented
, для дизайна, когда лейблы визуально находятся в инпутах на месте плейсхолдера