Fixed input grouping semantics in app settings editor.

microsoft · Aug 22, 2019 · 55f9db9 · 55f9db9
1 parent 997df8e
commit 55f9db9
Show file tree

Hide file tree

Showing 3 changed files with 154 additions and 140 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -15,6 +15,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 ## Fixed
 - [main] Fixed bug where opening a chat via URL was sending two conversation updates in PR [1735](https://github.com/microsoft/BotFramework-Emulator/pull/1735)
 - [main] Fixed an issue where the Emulator was incorrectly sending the conversation id instead of an emulated OAuth token in PR [1738](https://github.com/microsoft/BotFramework-Emulator/pull/1738)
+- [client] Fixed various accessibility issues in PR [1775](https://github.com/microsoft/BotFramework-Emulator/pull/1775), [1776](https://github.com/microsoft/BotFramework-Emulator/pull/1776)
 
 ## v4.5.2 - 2019 - 07 - 17
 ## Fixed

diff --git a/packages/app/client/src/ui/editor/appSettingsEditor/appSettingsEditor.scss b/packages/app/client/src/ui/editor/appSettingsEditor/appSettingsEditor.scss
@@ -24,6 +24,20 @@
     }
   }
 
+  fieldset {
+    position: relative;
+    margin: 0;
+    padding: 0;
+    border: none;
+  }
+
+  legend {
+    font-family: var(--default-font-family);
+    font-size: 19px;
+    font-weight: 200;
+    margin: 0 4px 16px 4px;
+    padding: 0;
+  }
 }
 
 .margin-bottom-row {

diff --git a/packages/app/client/src/ui/editor/appSettingsEditor/appSettingsEditor.tsx b/packages/app/client/src/ui/editor/appSettingsEditor/appSettingsEditor.tsx
@@ -32,16 +32,7 @@
 //
 
 import { FrameworkSettings, frameworkDefault } from '@bfemulator/app-shared';
-import {
-  Checkbox,
-  Column,
-  PrimaryButton,
-  Row,
-  RowAlignment,
-  RowJustification,
-  SmallHeader,
-  TextField,
-} from '@bfemulator/ui-react';
+import { Checkbox, Column, PrimaryButton, Row, RowAlignment, RowJustification, TextField } from '@bfemulator/ui-react';
 import * as React from 'react';
 import { ChangeEvent } from 'react';
 
@@ -112,142 +103,150 @@ export class AppSettingsEditor extends React.Component<AppSettingsEditorProps, A
       <GenericDocument className={styles.appSettingsEditor}>
         <Row>
           <Column className={styles.spacing}>
-            <SmallHeader>Service</SmallHeader>
-            <p>
-              <a href="https://ngrok.com/" target="_blank" rel="noopener noreferrer">
-                ngrok
-              </a>{' '}
-              is network tunneling software. The Bot Framework Emulator works with ngrok to communicate with bots hosted
-              remotely. Read the{' '}
-              <a
-                href="https://github.com/Microsoft/BotFramework-Emulator/wiki/Tunneling-(ngrok)"
-                target="_blank"
-                rel="noopener noreferrer"
-              >
-                wiki page
-              </a>{' '}
-              to learn more about using ngrok and how to download it.
-            </p>
-            <Row align={RowAlignment.Center} className={styles.marginBottomRow}>
-              <TextField
-                className={styles.appSettingsInput}
-                inputContainerClassName={styles.inputContainer}
-                readOnly={false}
-                value={ngrokPath}
-                onChange={this.onInputChange}
-                name="ngrokPath"
-                label={'Path to ngrok'}
+            <fieldset>
+              <legend>Service</legend>
+              <p>
+                <a href="https://ngrok.com/" target="_blank" rel="noopener noreferrer">
+                  ngrok
+                </a>{' '}
+                is network tunneling software. The Bot Framework Emulator works with ngrok to communicate with bots
+                hosted remotely. Read the{' '}
+                <a
+                  href="https://github.com/Microsoft/BotFramework-Emulator/wiki/Tunneling-(ngrok)"
+                  target="_blank"
+                  rel="noopener noreferrer"
+                >
+                  wiki page
+                </a>{' '}
+                to learn more about using ngrok and how to download it.
+              </p>
+              <Row align={RowAlignment.Center} className={styles.marginBottomRow}>
+                <TextField
+                  className={styles.appSettingsInput}
+                  inputContainerClassName={styles.inputContainer}
+                  readOnly={false}
+                  value={ngrokPath}
+                  onChange={this.onInputChange}
+                  name="ngrokPath"
+                  label={'Path to ngrok'}
+                />
+                <PrimaryButton onClick={this.onClickBrowse} text="Browse" className={styles.browseButton} />
+              </Row>
+              <Checkbox
+                className={styles.checkboxOverrides}
+                checked={bypassNgrokLocalhost}
+                onChange={this.onChangeCheckBox}
+                id="ngrok-bypass"
+                label="Bypass ngrok for local addresses"
+                name="bypassNgrokLocalhost"
               />
-              <PrimaryButton onClick={this.onClickBrowse} text="Browse" className={styles.browseButton} />
-            </Row>
-            <Checkbox
-              className={styles.checkboxOverrides}
-              checked={bypassNgrokLocalhost}
-              onChange={this.onChangeCheckBox}
-              id="ngrok-bypass"
-              label="Bypass ngrok for local addresses"
-              name="bypassNgrokLocalhost"
-            />
-            <Checkbox
-              className={styles.checkboxOverrides}
-              checked={runNgrokAtStartup}
-              onChange={this.onChangeCheckBox}
-              id="ngrok-startup"
-              label="Run ngrok when the Emulator starts up"
-              name="runNgrokAtStartup"
-            />
-            <Row align={RowAlignment.Center} className={styles.marginBottomRow}>
-              <TextField
-                className={styles.appSettingsInput}
-                inputContainerClassName={styles.inputContainer}
-                readOnly={false}
-                value={localhost}
-                onChange={this.onInputChange}
-                name="localhost"
-                label="localhost override"
+              <Checkbox
+                className={styles.checkboxOverrides}
+                checked={runNgrokAtStartup}
+                onChange={this.onChangeCheckBox}
+                id="ngrok-startup"
+                label="Run ngrok when the Emulator starts up"
+                name="runNgrokAtStartup"
               />
-            </Row>
-            <Row align={RowAlignment.Center}>
-              <TextField
-                className={styles.appSettingsInput}
-                inputContainerClassName={styles.inputContainer}
-                readOnly={false}
-                value={locale}
-                name="locale"
-                onChange={this.onInputChange}
-                label="Locale"
-              />
-            </Row>
+              <Row align={RowAlignment.Center} className={styles.marginBottomRow}>
+                <TextField
+                  className={styles.appSettingsInput}
+                  inputContainerClassName={styles.inputContainer}
+                  readOnly={false}
+                  value={localhost}
+                  onChange={this.onInputChange}
+                  name="localhost"
+                  label="localhost override"
+                />
+              </Row>
+              <Row align={RowAlignment.Center}>
+                <TextField
+                  className={styles.appSettingsInput}
+                  inputContainerClassName={styles.inputContainer}
+                  readOnly={false}
+                  value={locale}
+                  name="locale"
+                  onChange={this.onInputChange}
+                  label="Locale"
+                />
+              </Row>
+            </fieldset>
           </Column>
           <Column className={[styles.rightColumn, styles.spacing].join(' ')}>
-            <SmallHeader>User settings</SmallHeader>
-            <Checkbox
-              className={styles.checkboxOverrides}
-              checked={use10Tokens}
-              onChange={this.onChangeCheckBox}
-              id="auth-token-version"
-              label="Use version 1.0 authentication tokens"
-              name="use10Tokens"
-            />
-            <Checkbox
-              className={styles.checkboxOverrides}
-              checked={useCodeValidation}
-              onChange={this.onChangeCheckBox}
-              id="use-validation-code"
-              label="Use a sign-in verification code for OAuthCards"
-              name="useCodeValidation"
-            />
-            <Checkbox
-              className={styles.checkboxOverrides}
-              checked={useCustomId}
-              onChange={this.onChangeCheckBox}
-              id="use-custom-id"
-              label="Use your own user ID to communicate with the bot"
-              name="useCustomId"
-            />
-
-            <Row align={RowAlignment.Top}>
-              <TextField
-                {...inputProps}
-                label="User ID"
-                placeholder={useCustomId ? '' : 'There is no ID configured'}
-                className={styles.appSettingsInput}
-                inputContainerClassName={styles.inputContainer}
-                readOnly={false}
-                value={userGUID}
-                name="userGUID"
-                onChange={this.onInputChange}
-                required={useCustomId}
-                errorMessage={userGUID ? '' : 'Enter a User ID'}
+            <fieldset>
+              <legend>User settings</legend>
+              <Checkbox
+                className={styles.checkboxOverrides}
+                checked={use10Tokens}
+                onChange={this.onChangeCheckBox}
+                id="auth-token-version"
+                label="Use version 1.0 authentication tokens"
+                name="use10Tokens"
+              />
+              <Checkbox
+                className={styles.checkboxOverrides}
+                checked={useCodeValidation}
+                onChange={this.onChangeCheckBox}
+                id="use-validation-code"
+                label="Use a sign-in verification code for OAuthCards"
+                name="useCodeValidation"
+              />
+              <Checkbox
+                className={styles.checkboxOverrides}
+                checked={useCustomId}
+                onChange={this.onChangeCheckBox}
+                id="use-custom-id"
+                label="Use your own user ID to communicate with the bot"
+                name="useCustomId"
               />
-            </Row>
 
-            <SmallHeader>Application Updates</SmallHeader>
-            <Checkbox
-              className={styles.checkboxOverrides}
-              checked={autoUpdate}
-              onChange={this.onChangeCheckBox}
-              label="Automatically download and install updates"
-              name="autoUpdate"
-            />
-            <Checkbox
-              className={styles.checkboxOverrides}
-              checked={usePrereleases}
-              onChange={this.onChangeCheckBox}
-              label="Use pre-release versions"
-              name="usePrereleases"
-            />
-            <SmallHeader>Data Collection</SmallHeader>
-            <Checkbox
-              className={styles.checkboxOverrides}
-              checked={collectUsageData}
-              onChange={this.onChangeCheckBox}
-              label="Help improve the Emulator by allowing us to collect usage data."
-              name="collectUsageData"
-            />
-            <a target="_blank" href="https://privacy.microsoft.com/privacystatement" rel="noopener noreferrer">
-              Privacy statement
-            </a>
+              <Row className={styles.marginBottomRow} align={RowAlignment.Top}>
+                <TextField
+                  {...inputProps}
+                  label="User ID"
+                  placeholder={useCustomId ? '' : 'There is no ID configured'}
+                  className={styles.appSettingsInput}
+                  inputContainerClassName={styles.inputContainer}
+                  readOnly={false}
+                  value={userGUID}
+                  name="userGUID"
+                  onChange={this.onInputChange}
+                  required={useCustomId}
+                  errorMessage={userGUID ? '' : 'Enter a User ID'}
+                />
+              </Row>
+            </fieldset>
+
+            <fieldset>
+              <legend>Application Updates</legend>
+              <Checkbox
+                className={styles.checkboxOverrides}
+                checked={autoUpdate}
+                onChange={this.onChangeCheckBox}
+                label="Automatically download and install updates"
+                name="autoUpdate"
+              />
+              <Checkbox
+                className={styles.checkboxOverrides}
+                checked={usePrereleases}
+                onChange={this.onChangeCheckBox}
+                label="Use pre-release versions"
+                name="usePrereleases"
+              />
+            </fieldset>
+            <fieldset>
+              <legend>Data Collection</legend>
+              <Checkbox
+                className={styles.checkboxOverrides}
+                checked={collectUsageData}
+                onChange={this.onChangeCheckBox}
+                label="Help improve the Emulator by allowing us to collect usage data."
+                name="collectUsageData"
+              />
+              <a target="_blank" href="https://privacy.microsoft.com/privacystatement" rel="noopener noreferrer">
+                Privacy statement
+              </a>
+            </fieldset>
           </Column>
         </Row>
         <Row className={styles.buttonRow} justify={RowJustification.Right}>