Fixed keyboard navigation issue with service key value pair component.

* fix key par voiceover navigation

* restore header class

* Add log entry

* Update changelog entry

* Fix kvPair tests for failing build

* fix vo navigation multiple rows

* fix lint errors

CHANGELOG.md

@@ -21,6 +21,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
   - [1999](https://github.com/microsoft/BotFramework-Emulator/pull/1999)
   - [2000](https://github.com/microsoft/BotFramework-Emulator/pull/2000)
   - [2001](https://github.com/microsoft/BotFramework-Emulator/pull/2001)
+  - [2002](https://github.com/microsoft/BotFramework-Emulator/pull/2002)
   - [2009](https://github.com/microsoft/BotFramework-Emulator/pull/2009)
   - [2010](https://github.com/microsoft/BotFramework-Emulator/pull/2010)
 

packages/app/client/src/ui/shell/explorer/servicesExplorer/connectedServiceEditor/connectedServiceEditor.scss

@@ -38,49 +38,50 @@
 .header {
   display: flex;
   width: 100%;
-
-  > * {
-    font-size: 13px;
-    font-weight: 600;
-    margin-bottom: 5px;
-    padding-left: 8px;
-    width: 100%;
-  }
+  font-size: 13px;
+  font-weight: 600;
+  margin-bottom: 5px;
+  padding-left: 8px;
 }
 
-ul.kv-pair-container {
+.kv-pair-container {
   list-style: none;
   margin: 0;
   padding: 0;
   position: relative;
   max-height: 180px;
   overflow: auto;
+  display: flex;
+  width: 100%;
+}
 
-  > li {
-    width: 100%;
-    display: flex;
-
-    > * {
-      width: 100%;
-    }
-
-    // key
-    > div {
-      margin-right: 4px;
-    }
+.kv-input-row {
+  justify-content: space-between;
+  width: 100%;
+  display: flex;
 
-    // value
-    > div + div {
-      margin-right: 0;
-      margin-left: 4px;
-    }
+  >* {
+    width: 100%;
   }
 
   input[disabled] {
     border: none;
   }
 }
 
+.kv-input-key {
+  display: flex;
+  width: 100%;
+  margin-right: 4px;
+}
+
+.kv-input-value {
+  display:flex;
+  width: 100%;
+  margin-right: 0;
+  margin-left: 4px;
+}
+
 .no-border {
   border: none;
 }

packages/app/client/src/ui/shell/explorer/servicesExplorer/connectedServiceEditor/connectedServiceEditor.scss.d.ts

@@ -2,6 +2,9 @@
 export const connectedServiceEditor: string;
 export const header: string;
 export const kvPairContainer: string;
+export const kvInputRow: string;
+export const kvInputKey: string;
+export const kvInputValue: string;
 export const noBorder: string;
 export const link: string;
 export const alert: string;

packages/app/client/src/ui/shell/explorer/servicesExplorer/connectedServiceEditor/kvPair.spec.tsx

@@ -53,7 +53,7 @@ describe('The KvPair component', () => {
       numRows: 2,
     });
 
-    expect(node.find('ul').children()).toHaveLength(2);
+    expect(node.find('tr')).toHaveLength(4);
   });
 
   it('should call the onChange callback with the updated kv pairs', () => {

packages/app/client/src/ui/shell/explorer/servicesExplorer/connectedServiceEditor/kvPair.tsx

@@ -31,7 +31,7 @@
 // WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
 //
 
-import { LinkButton, TextField } from '@bfemulator/ui-react';
+import { LinkButton, TextField, Row } from '@bfemulator/ui-react';
 import * as React from 'react';
 import { ChangeEvent, Component, ReactNode } from 'react';
 
@@ -62,15 +62,24 @@ export class KvPair extends Component<KvPairProps, KvPairState> {
 
     return (
       <div>
-        <span className={styles.header}>
-          <label>Key</label>
-          <label>Value</label>
-        </span>
-        <ul className={styles.kvPairContainer}>
-          {kvPairs.map((pair, index) => (
-            <li key={index}>{this.getTextFieldPair(pair.key, pair.value, index)}</li>
-          ))}
-        </ul>
+        <Row className={styles.kvInputRow}>
+          <div>
+            <th className={styles.header}>Key</th>
+            {kvPairs.map((pair, index) => (
+              <tr key={index} className={styles.kvPairContainer}>
+                {this.getTextFieldKey(pair.key, index)}
+              </tr>
+            ))}
+          </div>
+          <div>
+            <th className={styles.header}>Value</th>
+            {kvPairs.map((pair, index) => (
+              <tr key={index} className={styles.kvPairContainer}>
+                {this.getTextFieldValue(pair.key, pair.value, index)}
+              </tr>
+            ))}
+          </div>
+        </Row>
         <LinkButton
           ariaLabel="Add key value pair"
           className={`${styles.link} ${styles.kvSpacing}`}
@@ -91,7 +100,7 @@ export class KvPair extends Component<KvPairProps, KvPairState> {
     );
   }
 
-  private getTextFieldPair(key: string = '', value: string = '', index: number): ReactNode {
+  private getTextFieldKey(key: string = '', index: number): ReactNode {
     let ref;
     if (index === this.state.numRows - 1) {
       ref = ref => {
@@ -102,6 +111,7 @@ export class KvPair extends Component<KvPairProps, KvPairState> {
     return (
       <>
         <TextField
+          inputContainerClassName={styles.kvInputKey}
           aria-label={`key ${index}`}
           className={styles.noBorder}
           placeholder="Add a key (optional)"
@@ -111,7 +121,15 @@ export class KvPair extends Component<KvPairProps, KvPairState> {
           onChange={this.onChange}
           inputRef={ref}
         />
+      </>
+    );
+  }
+
+  private getTextFieldValue(key: string = '', value: string = '', index: number): ReactNode {
+    return (
+      <>
         <TextField
+          inputContainerClassName={styles.kvInputValue}
           aria-label={`value ${index}`}
           className={styles.noBorder}
           placeholder="Add a value (optional)"