[Feature Request] should have props to set tabindex on clearable icon

[mr-mad-e]

Problem to solve

You can't skip tabindex on clearable icon

Proposed solution

should have props to set tabbindex

:clearable-tabindex="-1"

[xmtoken]

I have temporarily avoided it by using directive.
https://codepen.io/xmid1001/pen/MWaEppz

[RacerDelux]

I think it should be valid to enable it to be tabbed, but the default should have it set to tabindex=-1.
Maybe another option exposed?

[dmcknight26]

Agreed, I hope this becomes optional behavior. On heavy data entry applications with advanced/power users the extra [TAB]s involved will really slow them down.

There is absolutely a use case for this though in more public facing applications where accessibility is important.

[johnleider]

I almost consider this a bug but am leaving it tagged as a Feature for now even though I'd like to get it done as part of v2 maintenance.

[Tomdanizer]

I have temporarily avoided it by using directive. https://codepen.io/xmid1001/pen/MWaEppz

This workaround is semi-broken as of 2.5.2 and on for text-fields that are not pre-populated with data. 2.5.2 changed it so the clear icon is not created until there is data in the field. See https://codepen.io/tomdanizer/pen/XWgLqdg

It still works if the fields are pre-populated with data.

[KaelWD]

https://ux.stackexchange.com/q/125755/148323
https://www.scottohara.me/blog/2022/02/19/custom-clear-buttons.html

In v3 they currently aren't focusable, but also have aria-hidden which isn't great.