[Lens] [A11y] fix creating or removing layers in Lens looses focus

Author: mbondyra

x-pack/plugins/lens/public/editor_frame_service/editor_frame/config_panel/config_panel.test.tsx

@@ -27,7 +27,6 @@ import { generateId } from '../../../id_generator';
 import { mountWithProvider } from '../../../mocks';
 import { LayerTypes } from '@kbn/expression-xy-plugin/public';
 import { ReactWrapper } from 'enzyme';
-import { addLayer } from '../../../state_management';
 import { createIndexPatternServiceMock } from '../../../mocks/data_views_service_mock';
 import { AddLayerButton } from '../../../visualizations/xy/add_layer';
 import { LayerType } from '@kbn/visualizations-plugin/common';
@@ -190,96 +189,6 @@ describe('ConfigPanel', () => {
     );
   });
 
-  describe('focus behavior when adding or removing layers', () => {
-    it('should focus the only layer when resetting the layer', async () => {
-      const { instance } = await prepareAndMountComponent(getDefaultProps());
-      const firstLayerFocusable = instance
-        .find(LayerPanel)
-        .first()
-        .find('section')
-        .first()
-        .instance();
-      act(() => {
-        instance.find('[data-test-subj="lnsLayerRemove--0"]').first().simulate('click');
-      });
-      instance.update();
-
-      const focusedEl = document.activeElement;
-      expect(focusedEl).toEqual(firstLayerFocusable);
-    });
-
-    it('should focus the second layer when removing the first layer', async () => {
-      const datasourceMap = mockDatasourceMap();
-      const defaultProps = getDefaultProps({ datasourceMap });
-      // overwriting datasourceLayers to test two layers
-      frame.datasourceLayers = {
-        first: datasourceMap.testDatasource.publicAPIMock,
-        second: datasourceMap.testDatasource.publicAPIMock,
-      };
-
-      const { instance } = await prepareAndMountComponent(defaultProps);
-      const secondLayerFocusable = instance
-        .find(LayerPanel)
-        .at(1)
-        .find('section')
-        .first()
-        .instance();
-      act(() => {
-        instance.find('[data-test-subj="lnsLayerRemove--0"]').first().simulate('click');
-      });
-      instance.update();
-
-      const focusedEl = document.activeElement;
-      expect(focusedEl).toEqual(secondLayerFocusable);
-    });
-
-    it('should focus the first layer when removing the second layer', async () => {
-      const datasourceMap = mockDatasourceMap();
-      const defaultProps = getDefaultProps({ datasourceMap });
-      // overwriting datasourceLayers to test two layers
-      frame.datasourceLayers = {
-        first: datasourceMap.testDatasource.publicAPIMock,
-        second: datasourceMap.testDatasource.publicAPIMock,
-      };
-      const { instance } = await prepareAndMountComponent(defaultProps);
-      const firstLayerFocusable = instance
-        .find(LayerPanel)
-        .first()
-        .find('section')
-        .first()
-        .instance();
-      act(() => {
-        instance.find('[data-test-subj="lnsLayerRemove--1"]').first().simulate('click');
-      });
-      instance.update();
-
-      const focusedEl = document.activeElement;
-      expect(focusedEl).toEqual(firstLayerFocusable);
-    });
-
-    it('should focus the added layer', async () => {
-      const datasourceMap = mockDatasourceMap();
-      frame.datasourceLayers = {
-        first: datasourceMap.testDatasource.publicAPIMock,
-        newId: datasourceMap.testDatasource.publicAPIMock,
-      };
-
-      const defaultProps = getDefaultProps({ datasourceMap });
-
-      const { instance } = await prepareAndMountComponent(defaultProps, {
-        dispatch: jest.fn((x) => {
-          if (x.type === addLayer.type) {
-            frame.datasourceLayers.newId = datasourceMap.testDatasource.publicAPIMock;
-          }
-        }),
-      });
-
-      addNewLayer(instance);
-      const focusedEl = document.activeElement;
-      expect(focusedEl?.children[0].getAttribute('data-test-subj')).toEqual('lns-layerPanel-1');
-    });
-  });
-
   describe('initial default value', () => {
     function clickToAddDimension(instance: ReactWrapper) {
       act(() => {

x-pack/plugins/lens/public/editor_frame_service/editor_frame/config_panel/layer_panel.test.tsx

@@ -950,6 +950,7 @@ describe('LayerPanel', () => {
     });
 
     it('should reorder when dropping in the same group', async () => {
+      jest.useFakeTimers();
       mockVisualization.getConfiguration.mockReturnValue({
         groups: [
           {
@@ -997,6 +998,7 @@ describe('LayerPanel', () => {
         .find('[data-test-subj="lnsDragDrop-keyboardHandler"]')
         .at(1)
         .instance();
+      jest.runAllTimers();
       const focusedEl = document.activeElement;
       expect(focusedEl).toEqual(secondButton);
     });

x-pack/plugins/lens/public/editor_frame_service/editor_frame/config_panel/layer_panel.tsx

@@ -363,8 +363,13 @@ export function LayerPanel(
 
   return (
     <>
-      <section tabIndex={-1} ref={registerLayerRef} className="lnsLayerPanel">
-        <EuiPanel data-test-subj={`lns-layerPanel-${layerIndex}`} paddingSize="none">
+      <section
+        tabIndex={-1}
+        ref={registerLayerRef}
+        className="lnsLayerPanel"
+        data-test-subj={`lns-layerPanel-${layerIndex}`}
+      >
+        <EuiPanel paddingSize="none">
           <header className="lnsLayerPanel__layerHeader">
             <EuiFlexGroup gutterSize="s" responsive={false} alignItems="center">
               <EuiFlexItem grow className="lnsLayerPanel__layerSettingsWrapper">

x-pack/plugins/lens/public/editor_frame_service/editor_frame/config_panel/use_focus_update.tsx

@@ -30,7 +30,7 @@ export function useFocusUpdate(ids: string[]) {
     const element = nextFocusedId && refsById.get(nextFocusedId);
     if (element) {
       const focusable = getFirstFocusable(element);
-      focusable?.focus();
+      setTimeout(() => focusable?.focus());
       setNextFocusedId(null);
     }
   }, [ids, refsById, nextFocusedId]);

x-pack/test/accessibility/apps/group2/lens.ts

@@ -5,6 +5,7 @@
  * 2.0.
  */
 
+import expect from '@kbn/expect';
 import { FtrProviderContext } from '../../ftr_provider_context';
 
 export default function ({ getService, getPageObjects }: FtrProviderContext) {
@@ -14,6 +15,13 @@ export default function ({ getService, getPageObjects }: FtrProviderContext) {
   const esArchiver = getService('esArchiver');
   const listingTable = getService('listingTable');
   const kibanaServer = getService('kibanaServer');
+  const find = getService('find');
+
+  const hasFocus = async (testSubject: string) => {
+    const targetElement = await testSubjects.find(testSubject);
+    const activeElement = await find.activeElement();
+    return (await targetElement._webElement.getId()) === (await activeElement._webElement.getId());
+  };
 
   describe('Lens Accessibility', () => {
     const lensChartName = 'MyLensChart';
@@ -175,5 +183,25 @@ export default function ({ getService, getPageObjects }: FtrProviderContext) {
       await listingTable.clickDeleteSelected();
       await PageObjects.common.clickConfirmOnModal();
     });
+
+    describe('focus behavior when adding or removing layers', () => {
+      it('should focus the added layer', async () => {
+        await PageObjects.visualize.navigateToNewVisualization();
+        await PageObjects.visualize.clickVisType('lens');
+        await PageObjects.lens.createLayer();
+        expect(await hasFocus('lns-layerPanel-1')).to.be(true);
+      });
+      it('should focus the remaining layer when the first is removed', async () => {
+        await PageObjects.lens.removeLayer(0);
+        expect(await hasFocus('lns-layerPanel-0')).to.be(true);
+        await PageObjects.lens.createLayer();
+        await PageObjects.lens.removeLayer(1);
+        expect(await hasFocus('lns-layerPanel-0')).to.be(true);
+      });
+      it('should focus the only layer when resetting the layer', async () => {
+        await PageObjects.lens.removeLayer();
+        expect(await hasFocus('lns-layerPanel-0')).to.be(true);
+      });
+    });
   });
 }