Outline when pushing keys like shift, or 1, 2, 3, space

[gigitalz]

The draggable elements are outlines when pushing keyboards buttons, is it possible to disable this? In order to make the outline appear, first left click on draggable item, then push shift once. This also happens int he examples, how to disable it?

[isaacHagoel]

The lib adds tabindex 0 to draggable items because it supports keyboard dnd interactions (essential for accessibility). The behaviour you are describing (focusing on click and then shift) seems to be the browser's behaviour for elements with tabindex 0 and has nothing to do with the lib. See demo here, pasting the content below for easy reference in the future.

<style>
	div {
		padding: 1em;
		border: 1px solid orange;
	}
</style>

<div tabindex="0">Click inside and hit shift to focus me (in Chrome, in Safari shift and then arrow-down will do the same)</div>

[gigitalz]

It seems to be related to the drag areas and/or drag elements. This example has the same behaviour: https://svelte.dev/repl/bbd709b1a00b453e94658392c97a018a?version=3.59.2

Just click on a draggable element once and hit any keyboard button, a focus ring appears? Setting zoneTabIndex: -1 but it didn't help.

[isaacHagoel]

I showed u an example with just a div (no dnd lib or anything) above

[gigitalz]

I have this problem only with dndzones, i cannot remove tabindex behaviour like I do from other elements zoneTabIndex: -1 doesn't help. The example you show is easy to fix, just remove tab index, problem doesn't happen anymore, guess, I cannot do that with dndzones.

Modified demo example: https://svelte.dev/repl/8185b88d566d44d2b9acb631c99cbc5c?version=3.59.2

Still putting the rings when pushing keyboard buttons. Question is how to disable those rings.

[isaacHagoel]

I was trying say that this behaviour seems "normal" for anything with tabindex zero (i thought you are saying that this behaviour is induced by the lib, didn't realise it is the tabindex you don't want). There is a PR in progress that allows controlling the tab index on the items. With that said the tab index is there for a reason and removing it without adding drag handles or something similar would result in a non accessible app.