Fixed app settings editor a11y focus issue.

microsoft · Oct 8, 2019 · 3cd3fcf · 3cd3fcf
1 parent 90384b8
commit 3cd3fcf
Show file tree

Hide file tree

Showing 3 changed files with 8 additions and 1 deletion.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -62,9 +62,10 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
   - [1879](https://github.com/microsoft/BotFramework-Emulator/pull/1879)
   - [1880](https://github.com/microsoft/BotFramework-Emulator/pull/1880)
   - [1883](https://github.com/microsoft/BotFramework-Emulator/pull/1883)
-  - [1902](https://github.com/microsoft/BotFramework-Emulator/pull/1902)
   - [1893](https://github.com/microsoft/BotFramework-Emulator/pull/1893)
+  - [1902](https://github.com/microsoft/BotFramework-Emulator/pull/1902)
   - [1916](https://github.com/microsoft/BotFramework-Emulator/pull/1916)
+  - [1917](https://github.com/microsoft/BotFramework-Emulator/pull/1917)
   - [1918](https://github.com/microsoft/BotFramework-Emulator/pull/1918)
 
  - [client] Fixed an issue with the transcripts path input inside of the resource settings dialog in PR [1836](https://github.com/microsoft/BotFramework-Emulator/pull/1836)

diff --git a/packages/app/client/src/ui/editor/appSettingsEditor/appSettingsEditor.spec.tsx b/packages/app/client/src/ui/editor/appSettingsEditor/appSettingsEditor.spec.tsx
@@ -167,6 +167,8 @@ describe('The AppSettingsEditorContainer', () => {
 
   it('should save the framework settings then get them again from main when the "onSaveClick" handler is called', async () => {
     const alertServiceSpy = jest.spyOn(ariaAlertService, 'alert').mockReturnValueOnce(undefined);
+    const mockPathToNgrokInputRef = { focus: jest.fn() };
+    (instance as any).pathToNgrokInputRef = mockPathToNgrokInputRef;
 
     await (instance as any).onSaveClick();
 
@@ -180,6 +182,7 @@ describe('The AppSettingsEditorContainer', () => {
 
     expect(mockDispatch).toHaveBeenLastCalledWith(saveFrameworkSettings(savedSettings));
     expect(alertServiceSpy).toHaveBeenCalledWith('App settings saved.');
+    expect(mockPathToNgrokInputRef.focus).toHaveBeenCalled();
   });
 
   it('should call the appropriate command when onAnchorClick is called', () => {

diff --git a/packages/app/client/src/ui/editor/appSettingsEditor/appSettingsEditor.tsx b/packages/app/client/src/ui/editor/appSettingsEditor/appSettingsEditor.tsx
@@ -327,6 +327,9 @@ export class AppSettingsEditor extends React.Component<AppSettingsEditorProps, A
     this.setState({ dirty: false });
     this.props.saveFrameworkSettings(newState);
     this.props.createAriaAlert('App settings saved.');
+    if (this.pathToNgrokInputRef) {
+      this.pathToNgrokInputRef.focus();
+    }
   };
 
   private updateDirtyFlag(change: { [prop: string]: any }) {