Don't add tab index to empty drop zones

[danny-andrews]

Currently, tabindex = 0 is being added to the drop zone even when no element is being dragged:

svelte-dnd-action/src/keyboardAction.js

Lines 292 to 299 in da059e6

	node.tabIndex =
	isDragging &&
	(node === focusedDz ||
	focusedItem.contains(node) ||
	config.dropFromOthersDisabled ||
	(focusedDz && config.type !== dzToConfig.get(focusedDz).type))
	? -1
	: 0;

Then, in the focus handler, we do nothing if dragging is not in progress:

svelte-dnd-action/src/keyboardAction.js

Lines 85 to 87 in da059e6

	function handleZoneFocus(e) {
	printDebug(() => "zone focus");
	if (!isDragging) return;

I don't think it makes sense to make an element focusable if we do nothing when it takes focus. Plus, it leads to weird styling on empty lists. (See screenshot below.)

[danny-andrews]

Okay, never-mind, this breaks accessibility. Do you have any thoughts on how to handle the empty-list problem, though?

[danny-andrews]

I updated the PR to set tabindex to -1 when there are no items in the drag zone.

[isaacHagoel]

Hi @danny-andrews ,
Thanks for this and sorry for the delay. i was swamped this week.
the question is: what if there are some instructions on the list that are meaningful even when it's empty.
for example:
maybe you have a component with 4 lists, the first one is an items bank that has all of the items initially and the others are categories that the user needs to sort the items into (imagine it is a question in a quiz).
in this case it is important for the user to know about the existence of the empty lists and their titles which can be done by tabbing around.
Thoughts?

I've been thinking for awhile that we probably need to allow to override the tabindex that is set by the library but it's not fully formed in my mind.

[danny-andrews]

Not a problem.

Yeah, that's a fair point. I wonder if we could do away with adding a tabindex to the dragzone altogether and add aria-describedby to each of the list items, along with using live regions to update them when the state changes: https://medium.com/salesforce-ux/4-major-patterns-for-accessible-drag-and-drop-1d43f64ebf09#0303.

[isaacHagoel]

Maybe... Can experiment with it when i have some time or you are super welcome to try

…

On Sat, Feb 13, 2021, 09:48 Danny Andrews ***@***.***> wrote: Not a problem. Yeah, that's a fair point. I wonder if we could do away with adding a tabindex to the dragzone altogether and add aria-describedby to each of the list items, along with using live regions to update them when the state changes: https://medium.com/salesforce-ux/4-major-patterns-for-accessible-drag-and-drop-1d43f64ebf09#0303 . — You are receiving this because you commented. Reply to this email directly, view it on GitHub <#245 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AE4OZC6AP45ABETFNLX6AFTS6WV5HANCNFSM4XHA4EFA> .