Fixed a11y focus issue with key / value pairs in service editor.

microsoft · Oct 10, 2019 · fa826a7 · fa826a7
1 parent e174390
commit fa826a7
Show file tree

Hide file tree

Showing 3 changed files with 15 additions and 2 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -68,6 +68,8 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
   - [1917](https://github.com/microsoft/BotFramework-Emulator/pull/1917)
   - [1918](https://github.com/microsoft/BotFramework-Emulator/pull/1918)
   - [1921](https://github.com/microsoft/BotFramework-Emulator/pull/1921)
+  - [1923](https://github.com/microsoft/BotFramework-Emulator/pull/1923)
+  - [1924](https://github.com/microsoft/BotFramework-Emulator/pull/1924)
 
  - [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) 

diff --git a/...src/ui/shell/explorer/servicesExplorer/connectedServiceEditor/connectedServiceEditor.scss b/...src/ui/shell/explorer/servicesExplorer/connectedServiceEditor/connectedServiceEditor.scss
@@ -63,6 +63,17 @@ ul.kv-pair-container {
     > * {
       width: 100%;
     }
+
+    // key
+    > div {
+      margin-right: 4px;
+    }
+
+    // value
+    > div + div {
+      margin-right: 0;
+      margin-left: 4px;
+    }
   }
 
   input[disabled] {

diff --git a/packages/app/client/src/ui/shell/explorer/servicesExplorer/connectedServiceEditor/kvPair.tsx b/packages/app/client/src/ui/shell/explorer/servicesExplorer/connectedServiceEditor/kvPair.tsx
@@ -63,8 +63,8 @@ export class KvPair extends Component<KvPairProps, KvPairState> {
     return (
       <div>
         <span className={styles.header}>
-          <span>Key</span>
-          <span>Value</span>
+          <label>Key</label>
+          <label>Value</label>
         </span>
         <ul className={styles.kvPairContainer}>
           {kvPairs.map((pair, index) => (