Geomap: Fix layer drag drop list (#109704)

public/app/core/components/Layers/LayerDragDropList.test.tsx

@@ -1,4 +1,5 @@
-import { render, screen } from '@testing-library/react';
+import { fireEvent, render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
 
 import { DATA_TEST_ID, LayerDragDropList, LayerDragDropListProps } from './LayerDragDropList';
 
@@ -47,6 +48,69 @@ describe('LayerDragDropList', () => {
     expect(screen.queryAllByLabelText('Drag and drop to reorder').length).toEqual(0);
   });
 
+  it('calls onDelete when delete button is clicked', async () => {
+    const user = userEvent.setup();
+    const { props } = renderScenario({ showActions: () => true });
+
+    const deleteButtons = screen.getAllByLabelText('Remove');
+    await user.click(deleteButtons[0]);
+
+    expect(props.onDelete).toHaveBeenCalledTimes(1);
+    expect(props.onDelete).toHaveBeenCalledWith({ name: layerTwoName, getName: expect.any(Function) });
+  });
+
+  it('calls onDuplicate when duplicate button is clicked', async () => {
+    const user = userEvent.setup();
+    const { props } = renderScenario({ showActions: () => true });
+
+    const duplicateButtons = screen.getAllByLabelText('Duplicate');
+    await user.click(duplicateButtons[0]);
+
+    expect(props.onDuplicate).toHaveBeenCalledTimes(1);
+    expect(props.onDuplicate).toHaveBeenCalledWith({ name: layerTwoName, getName: expect.any(Function) });
+  });
+
+  it('calls onSelect when layer row is clicked', async () => {
+    const user = userEvent.setup();
+    const { props } = renderScenario({});
+
+    const layerRows = screen.getAllByRole('button');
+    await user.click(layerRows[0]);
+
+    expect(props.onSelect).toHaveBeenCalledTimes(1);
+    expect(props.onSelect).toHaveBeenCalledWith({ name: layerTwoName, getName: expect.any(Function) });
+  });
+
+  it('calls onSelect when Enter key is pressed on layer row', () => {
+    const { props } = renderScenario({});
+
+    const layerRows = screen.getAllByRole('button');
+    fireEvent.keyDown(layerRows[0], { key: 'Enter' });
+
+    expect(props.onSelect).toHaveBeenCalledTimes(1);
+    expect(props.onSelect).toHaveBeenCalledWith({ name: layerTwoName, getName: expect.any(Function) });
+  });
+
+  it('calls onSelect when Space key is pressed on layer row', () => {
+    const { props } = renderScenario({});
+
+    const layerRows = screen.getAllByRole('button');
+    fireEvent.keyDown(layerRows[0], { key: ' ' });
+
+    expect(props.onSelect).toHaveBeenCalledTimes(1);
+    expect(props.onSelect).toHaveBeenCalledWith({ name: layerTwoName, getName: expect.any(Function) });
+  });
+
+  it('does not call onSelect when other keys are pressed on layer row', () => {
+    const { props } = renderScenario({});
+
+    const layerRows = screen.getAllByRole('button');
+    fireEvent.keyDown(layerRows[0], { key: 'Tab' });
+    fireEvent.keyDown(layerRows[0], { key: 'Escape' });
+
+    expect(props.onSelect).not.toHaveBeenCalled();
+  });
+
   function renderScenario(overrides: Partial<LayerDragDropListProps<testLayer>>) {
     const testLayers = [
       { name: layerOneName, getName: () => layerOneName },

public/app/core/components/Layers/LayerDragDropList.tsx

@@ -66,7 +66,13 @@ export const LayerDragDropList = <T extends LayerElement>({
                         ref={provided.innerRef}
                         {...provided.draggableProps}
                         {...provided.dragHandleProps}
-                        onMouseDown={() => onSelect(element)}
+                        onClick={() => onSelect(element)}
+                        onKeyDown={(e) => {
+                          if (e.key === 'Enter' || e.key === ' ') {
+                            e.preventDefault();
+                            onSelect(element);
+                          }
+                        }}
                         role="button"
                         tabIndex={0}
                       >