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

[Feature]: Placeholder как label у DateInput #7867

Open
andrey-medvedev-vk opened this issue Oct 29, 2024 · 0 comments
Open

[Feature]: Placeholder как label у DateInput #7867

andrey-medvedev-vk opened this issue Oct 29, 2024 · 0 comments
Labels
a11y Доступность (цифровая) cmp:date-input type:feature

Comments

@andrey-medvedev-vk
Copy link
Contributor

Описание

Поступил запрос на добавление возможности передавать в DateInput placeholder и показывать его, если значение не задано.

Вообще, это часть паттерна, когда в дизайне явно не показывают label у инпута и пишут что это за элемент в самом инпуте в качестве placeholder. При взаимодействии с инпутом placeholder прячется.

Сейчас визуально такое можно сделать используя placeholder в компоненте Input.
Тем не менее тут есть ряд недостатков.

  • Такие инпуты не имеют label, а значит нету подписей для скринридеров. Placeholder зачитываться будет, но это не label. Для реализации доступности требуется, либо создавать скрытые label с помощью VisuallyHidden, либо добавлять aria-label. (⚠️ это ещё надо проверить и добавить в доку рекомендации по доступности для такого варианты)
  • DateInput вместо placeholder показывает маску, если значения нету.
  • DateInput имеет проблемы связывания label и DateInput по id [Bug][DateInput]: Ошибки связанные с id #7839

Такой паттерн часто используют ещё и в связке с FormLayoutGroup

Требуется:

  • проверить как сделать input без явного label, но с placeholder, доступным (возможно placeholder тогда надо скрывать от скринридера с помощью aria-hidden, чтобы избежать дублирования текста)
  • добавить отображение placeholder в DateInput, если он передан.
  • починить связывание внешнего label и DateInput [Bug][DateInput]: Ошибки связанные с id #7839. В идеале label с DateInput должен работать также как и с Input.

Скриншоты

Screenshot 2024-10-29 at 13 05 56
@andrey-medvedev-vk andrey-medvedev-vk added type:feature cmp:date-input a11y Доступность (цифровая) labels Oct 29, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
a11y Доступность (цифровая) cmp:date-input type:feature
Projects
Status: 🗃 Backlog
Development

No branches or pull requests

1 participant