Skip to content

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

Open
@andrey-medvedev-vk

Description

Описание

Поступил запрос на добавление возможности передавать в 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

Metadata

Assignees

No one assigned

    Type

    No type

    Projects

    • Status

      🗃 Backlog

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions