SDA-4443_4444: Adding A11Y to Close and Prevent enter while pod is di…

…sabled
finos · Jan 8, 2024 · e58b654 · e58b654
1 parent dee1815
commit e58b654
Show file tree

Hide file tree

Showing 3 changed files with 115 additions and 0 deletions.
diff --git a/spec/__snapshots__/aboutApp.spec.ts.snap b/spec/__snapshots__/aboutApp.spec.ts.snap
@@ -49,6 +49,7 @@ exports[`about app should render correctly 1`] = `
         className="AboutApp-close-button"
         data-testid="CLOSE_BUTTON"
         disabled={false}
+        onKeyDown={[Function]}
         onMouseDown={[Function]}
         title="Close"
       >

diff --git a/spec/aboutApp.spec.ts b/spec/aboutApp.spec.ts
@@ -184,4 +184,93 @@ describe('about app', () => {
         .hasClass('AboutApp-button-save-restart-text'),
     ).toBe(true);
   });
+
+  it('should restore to global config url on cancelling after enter pressed', () => {
+    const cloneAboutDataMock = {
+      ...aboutDataMockState,
+      finalConfig: { url: 'bcd.symphony.com' },
+    };
+
+    cloneAboutDataMock.globalConfig = { isPodUrlEditable: true };
+    cloneAboutDataMock.userConfig = { isPodUrlEditable: false };
+
+    const wrapper = shallow(React.createElement(AboutApp));
+    ipcRenderer.send('about-app-data', cloneAboutDataMock);
+    const pod = wrapper.find(`[data-testid="POD_INFO"]`);
+    pod.simulate('click', { detail: 1 });
+    pod.simulate('click', { detail: 2 });
+    pod.simulate('click', { detail: 3 });
+
+    const inputPod = wrapper.find(`[data-testid="POD_INFO_INPUT"]`);
+    inputPod.simulate('change', {
+      target: { value: 'pod.symphony.com123' },
+    });
+    inputPod.simulate('keydown', {
+      target: { value: 'pod.symphony.com123' },
+      keyCode: 13,
+    });
+    wrapper.find(`[data-testid="CANCEL_BUTTON"]`).simulate('click');
+
+    expect(pod.text()).toBe('abcxyz.symphony.com');
+  });
+
+  it('should work with A11Y Cancel button', () => {
+    const cloneAboutDataMock = {
+      ...aboutDataMockState,
+      finalConfig: { url: 'bcd.symphony.com' },
+    };
+
+    cloneAboutDataMock.globalConfig = { isPodUrlEditable: true };
+    cloneAboutDataMock.userConfig = { isPodUrlEditable: false };
+
+    const wrapper = shallow(React.createElement(AboutApp));
+    ipcRenderer.send('about-app-data', cloneAboutDataMock);
+    const pod = wrapper.find(`[data-testid="POD_INFO"]`);
+    pod.simulate('click', { detail: 1 });
+    pod.simulate('click', { detail: 2 });
+    pod.simulate('click', { detail: 3 });
+
+    wrapper.find(`[data-testid="CANCEL_BUTTON"]`).simulate('keydown', {
+      target: { value: 'pod.symphony.com123' },
+      keyCode: 13,
+    });
+
+    expect(wrapper.find(`[data-testid="CANCEL_BUTTON"]`).exists()).toBe(false);
+  });
+
+  it('should work with A11Y Close button', () => {
+    const cloneAboutDataMock = {
+      ...aboutDataMockState,
+      finalConfig: { url: 'bcd.symphony.com' },
+    };
+
+    cloneAboutDataMock.globalConfig = { isPodUrlEditable: true };
+    cloneAboutDataMock.userConfig = { isPodUrlEditable: false };
+
+    const wrapper = shallow(React.createElement(AboutApp));
+    ipcRenderer.send('about-app-data', cloneAboutDataMock);
+    const pod = wrapper.find(`[data-testid="POD_INFO"]`);
+    pod.simulate('click', { detail: 1 });
+    pod.simulate('click', { detail: 2 });
+    pod.simulate('click', { detail: 3 });
+
+    const inputPod = wrapper.find(`[data-testid="POD_INFO_INPUT"]`);
+    inputPod.simulate('change', {
+      target: { value: 'pod.symphony.com' },
+    });
+    inputPod.simulate('keydown', {
+      target: { value: 'pod.symphony.com' },
+      keyCode: 13,
+    });
+
+    wrapper.find(`[data-testid="CLOSE_BUTTON"]`).simulate('keydown', {
+      keyCode: 13,
+    });
+
+    expect(ipcRenderer.send).toHaveBeenNthCalledWith(
+      12,
+      'user-pod-updated',
+      'pod.symphony.com',
+    );
+  });
 });
diff --git a/src/renderer/components/about-app.tsx b/src/renderer/components/about-app.tsx
@@ -47,6 +47,7 @@ const SFE_CLIENT_TYPE_NAME = 'SFE-Lite';
 const KEY_CODE = {
   ENTER: 13,
   ESCAPE: 27,
+  SPACE: 32,
 };
 
 /**
@@ -202,6 +203,7 @@ export default class AboutApp extends React.Component<{}, IState> {
                 onMouseDown={this.eventHandlers.onCancel}
                 title={cancelText}
                 data-testid={'CANCEL_BUTTON'}
+                onKeyDown={this.onCancelKeyDown}
               >
                 {cancelText}
               </button>
@@ -219,6 +221,7 @@ export default class AboutApp extends React.Component<{}, IState> {
               data-testid={'CLOSE_BUTTON'}
               ref={this.closeButtonRef}
               disabled={!isValidHostname}
+              onKeyDown={this.onCloseKeyDown}
             >
               <span
                 className={classNames({
@@ -334,6 +337,9 @@ export default class AboutApp extends React.Component<{}, IState> {
    */
   public onKeyDown = (e) => {
     if (e.keyCode === KEY_CODE.ENTER) {
+      if (!this.state.isValidHostname) {
+        return;
+      }
       const { value } = e.target;
       this.setState({ updatedHostname: value });
       this.handlePodInputBlur(e);
@@ -348,6 +354,25 @@ export default class AboutApp extends React.Component<{}, IState> {
       });
     }
   };
+  /**
+   * Handles handle keydown on Close
+   * @param e
+   */
+  public onCloseKeyDown = (e: React.KeyboardEvent<HTMLButtonElement>) => {
+    if (e.keyCode === KEY_CODE.ENTER || e.keyCode === KEY_CODE.SPACE) {
+      this.close();
+    }
+  };
+
+  /**
+   * Handles key down on Cancel
+   * @param e
+   */
+  public onCancelKeyDown = (e: React.KeyboardEvent<HTMLButtonElement>) => {
+    if (e.keyCode === KEY_CODE.ENTER || e.keyCode === KEY_CODE.SPACE) {
+      this.cancel();
+    }
+  };
 
   /**
    * Validates and sets new hostname