[#1822] Improved heading accessibility on welcome page.

CHANGELOG.md

@@ -46,6 +46,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
   - [1855](https://github.com/microsoft/BotFramework-Emulator/pull/1855)
   - [1856](https://github.com/microsoft/BotFramework-Emulator/pull/1856)
   - [1858](https://github.com/microsoft/BotFramework-Emulator/pull/1858)
+  - [1860](https://github.com/microsoft/BotFramework-Emulator/pull/1860)
 
  - [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)
 

packages/app/client/src/ui/editor/welcomePage/howToBuildABot.tsx

@@ -32,14 +32,15 @@
 //
 
 import * as React from 'react';
+import { SmallHeader } from '@bfemulator/ui-react';
 
 import * as styles from './welcomePage.scss';
 
 export function HowToBuildABot() {
   return (
     <div className={styles.section}>
       <div className={styles.howToBuildSection}>
-        <h3>How to build a bot</h3>
+        <SmallHeader className={styles.howToTitle}>How to build a bot</SmallHeader>
         <div className={styles.stepContainer}>
           <div className={styles.stepIcon}>
             <div className={styles.buildPlan01} />

packages/app/client/src/ui/editor/welcomePage/welcomePage.scss

@@ -75,13 +75,8 @@
 }
 
 .how-to-build-section {
-  > h3 {
-    font-size: 13px;
-    font-weight: 600;
-    letter-spacing: 0.35px;
-    line-height: 16px;
-    margin: 0 0 24px 0;
-    text-transform: uppercase;
+  > .how-to-title {
+    margin: 18px 0 24px 0;
   }
 
   .step-container {

packages/app/client/src/ui/editor/welcomePage/welcomePage.scss.d.ts

@@ -7,6 +7,7 @@ export const well: string;
 export const openBot: string;
 export const ctaLink: string;
 export const howToBuildSection: string;
+export const howToTitle: string;
 export const stepContainer: string;
 export const stepIcon: string;
 export const buildPlan01: string;

packages/sdk/ui-react/src/widget/smallHeader/smallHeader.tsx

@@ -43,7 +43,7 @@ export interface SmallIHeaderProps {
 }
 
 export const SmallHeader = (props: SmallIHeaderProps): JSX.Element => (
-  <h3 className={`${styles.smallHeader} ${props.className || ''}`}>
+  <h2 className={`${styles.smallHeader} ${props.className || ''}`}>
     <TruncateText>{props.children}</TruncateText>
-  </h3>
+  </h2>
 );