[ISSUE#1908][MAS4.2.10][Focus Order - Add other service] With voiceover consolidated focus goes on "Key and Value".

CHANGELOG.md

@@ -98,6 +98,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
   - [1934](https://github.com/microsoft/BotFramework-Emulator/pull/1934)
   - [1935](https://github.com/microsoft/BotFramework-Emulator/pull/1935)
   - [1936](https://github.com/microsoft/BotFramework-Emulator/pull/1936)
+  - [2002](https://github.com/microsoft/BotFramework-Emulator/pull/2002)
 
  - [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)
  - [client] Implemented HTML app menu for Windows in PR [1893](https://github.com/microsoft/BotFramework-Emulator/pull/1893) 

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

@@ -48,37 +48,49 @@
   }
 }
 
-ul.kv-pair-container {
+.kv-pair-container {
   list-style: none;
   margin: 0;
   padding: 0;
   position: relative;
   max-height: 180px;
   overflow: auto;
+}
 
-  > li {
-    width: 100%;
-    display: flex;
+.kv-input-row {
+  justify-content: space-between;
+  width: 100%;
+  display: flex;
+  margin-bottom: 4px;
 
-    > * {
-      width: 100%;
-    }
+  > * {
+    width: 100%;
+  }
 
-    // key
-    > div {
-      margin-right: 4px;
-    }
+  // key
+  > div {
+    margin-right: 4px;
+  }
 
-    // value
-    > div + div {
-      margin-right: 0;
-      margin-left: 4px;
-    }
+  // value
+  > div + div {
+    margin-right: 0;
+    margin-left: 4px;
   }
 
   input[disabled] {
     border: none;
   }
+
+  label {
+    font-size: 13px;
+    font-weight: 600;
+    padding-left: 8px;
+
+    &[disabled], &[aria-disabled="true"] {
+      color: var(--input-label-color);
+    }
+  }
 }
 
 .no-border {

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

@@ -1,7 +1,7 @@
 // This is a generated file. Changes are likely to result in being overwritten
 export const connectedServiceEditor: string;
-export const header: string;
 export const kvPairContainer: string;
+export const kvInputRow: string;
 export const noBorder: string;
 export const link: string;
 export const alert: string;

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,9 @@ 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>
+        {kvPairs.map((pair, index) => (
+          <Row className={styles.kvInputRow}>{this.getTextFieldPair(pair.key, pair.value, index)}</Row>
+        ))}
         <LinkButton
           ariaLabel="Add key value pair"
           className={`${styles.link} ${styles.kvSpacing}`}
@@ -102,6 +96,8 @@ export class KvPair extends Component<KvPairProps, KvPairState> {
     return (
       <>
         <TextField
+          label={index === 0 ? 'Key' : undefined}
+          inputContainerClassName={styles.kvPairContainer}
           aria-label={`key ${index}`}
           className={styles.noBorder}
           placeholder="Add a key (optional)"
@@ -112,6 +108,8 @@ export class KvPair extends Component<KvPairProps, KvPairState> {
           inputRef={ref}
         />
         <TextField
+          label={index === 0 ? 'Value' : undefined}
+          inputContainerClassName={styles.kvPairContainer}
           aria-label={`value ${index}`}
           className={styles.noBorder}
           placeholder="Add a value (optional)"