[Lens] (Accessibility) No way to recreate "drag to workspace" with keyboard

[myasonik]

The problem

Most everything thing that you can do by drag+drop in Lens, you can also do with a keyboard through the right-hand layers section. The one notable thing that I see missing is the "magical" dragging any single field over the workspace and seeing something happen.

The fix

Hard to say what the right solution here is. The best one is probably to implement full keyboard controls for all the drag+drop functionality available in Lens. Barring that, some other options could be: adding a button in the popover that opens when you click on a field could work, or adding a button somewhere in the workspace, or in the layer panel somewhere? Maybe an always present button where the suggestions are to add a new field? Lots of options on how to resolve this.

Relevant WCAG Criteria: 2.1.1 Keyboard - Level A

[elasticmachine]

Pinging @elastic/kibana-accessibility (Project:Accessibility)

[elasticmachine]

Pinging @elastic/kibana-app (Team:KibanaApp)

[wylieconlon]

I have considered some of the same options you mentioned here. I think the simplest option to implement is one of your ideas, "button in the popover that opens when you click on a field". We could also add this to the Records field because it's not currently interactive: this could help solve one of the other accessibility issues you recently opened.

[mbondyra]

Hi @myasonik @MichaelMarcialis,

I started working on this task following the implementing the 'button in popover when you click on a field'. The PR above is a draft of my work and at this point I need some designs. Please let me know if the solution is acceptable from accessibility standpoint @myasonik. When it comes to the design, we need to cover the following views:

1. For records field, nothing more but just the button:

2. For field of type number, two tabs panel:

3. For other types, one tab:

4. Also, there's a possibility the field cannot be dropped to workspace when the suggestions cannot be created, so we need disabled state:

CC @wylieconlon @flash1293 @dej611

[myasonik]

Yeah, I think this solution works!

Two question on it:

• Given the meeting we just had about tackling more drag-and-drop functionality, do we still want to do this or would you rather punt on this for a possible more holistic solution in the future? (I'm good with it either way.)
• We might need to play around with the disabled button tooltip text... At the end it says "Move field directly to the editor." but I don't think that's possible from the keyboard right now. (I think a keyboard user would have to go over to the editer, then select the field to use.) I'm not too sure how to reconcile the different UXes in the tooltip...

[flash1293]

@mbondyra How much work you think it will be to finish this PR? I see the point about parking this until we solve it consistently with the rest of drag and drop but it might take a while and this seems like it can be a quick win.

[mbondyra]

Hi @flash1293 it's a not a big PR, so from the tech perspective it misses tests, types declaration and maybe small refactoring. But it's not the best design so we need input from @MichaelMarcialis about it. @myasonik the solution we talked about is probably away 2-3 releases as we would first priorize editor to editor drag and drop so I'd merge it now and then replace with a holistic approach. You are right with the tooltip text, but that's just something I've written there as a possible disabled state, so we can definitely work on it.

[myasonik]

Just to recap then, sounds like we ship this as a quick win then and then we're not rushed to implement the holistic approach. Is that right? If so, I like it. 👍

[flash1293]

That would be my preference too @myasonik Probably needs some design touches, but I think we can finish this approach soon.

[MichaelMarcialis]

I started working on this task following the implementing the 'button in popover when you click on a field'. The PR above is a draft of my work and at this point I need some designs.

Sure thing, @mbondyra! I can plan to provide some quick design suggestions tomorrow based on your great work here.

I did have one question regarding the disabled button (when a field cannot be added directly to the workspace). Seeing as that field cannot be added directly to the workspace, and keyboard users currently have no mechanism in which they can drag the field to the layers panel via the keyboard, would it be better to just simply omit the button altogether in those instances?

[mbondyra]

@MichaelMarcialis yes, I think that can be one option!

[MichaelMarcialis]

Hey, @mbondyra! Per your request, I've made a quick design PR for your branch. Have a look here whenever you get a moment:

mbondyra#4