Skip to content

[Feature Request] Add a way to disable the on-click event of the date input prepend icon (or make it not focusable) #22333

@Daenara

Description

@Daenara

Problem to solve

With the date field specifically, clicking the icon will do the exact same thing as clicking into the field itself. This means that people navigating a form via keyboard will get the same field focused twice, once the icon, and once the field. The ability to disable the onClick action completely, or just force it to not be focused would allow for easier tab navigation, and it would allow for a clear difference between "user-set" on click actions that actually do something unique, and the date field

Proposed solution

Add a prop along the way of "disable-prepend-icon-action" or "disable-prepend-icon-focus" so that it is possible to ensure the icon will not receive focus when it does not do anything other than what clicking into the field does. This also allows to keep the focus (or click action) for the use-cases when the user actually changes what the icon does on click.

The only way I found to do this right now is to set the prepend icon to an empty slot and add it back via #prepend template slot (so it is not clickable) and this seems a bit convulsed, especially when there are many date fields.

Metadata

Metadata

Assignees

No one assigned

    Labels

    C: VDateInputT: enhancementFunctionality that enhances existing featuresa11yAccessibility issuelabsMust be completed for this component to leave labs

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions