a11y: Use header tag for trigger in visual editor (#2128)

* Add header tag * use header tag for trigger Co-authored-by: zeye <[email protected]> Co-authored-by: Chris Whitten <[email protected]>
microsoft · Mar 5, 2020 · 8a17c92 · 8a17c92
1 parent e51dc5a
commit 8a17c92
Show file tree

Hide file tree

Showing 2 changed files with 10 additions and 2 deletions.
diff --git a/Composer/packages/extensions/visual-designer/src/components/nodes/Trigger.tsx b/Composer/packages/extensions/visual-designer/src/components/nodes/Trigger.tsx
@@ -14,6 +14,7 @@ import {
   titleStyle,
   subtitleStyle,
   triggerIconStyle,
+  titleContentStyle,
 } from './triggerStyles';
 
 function getLabel(data: any): string {
@@ -39,9 +40,11 @@ export const Trigger = ({ data, onClick = () => {} }): JSX.Element => {
       <div css={triggerContentStyle}>
         <div css={titleStyle}>
           <Icon iconName="Flow" style={triggerIconStyle} />
-          <span>{name}</span>
+          <h4 css={titleContentStyle}>{name}</h4>
+        </div>
+        <div css={subtitleStyle} className="trigger__content-label">
+          {label}
         </div>
-        <div css={subtitleStyle}>{label}</div>
       </div>
     </div>
   );

diff --git a/Composer/packages/extensions/visual-designer/src/components/nodes/triggerStyles.ts b/Composer/packages/extensions/visual-designer/src/components/nodes/triggerStyles.ts
@@ -28,8 +28,13 @@ export const titleStyle: any = {
   fontSize: '18px',
   lineHeight: '24px',
   fontWeight: 600,
+  display: 'flex',
 };
 
+export const titleContentStyle = {
+  fontWeight: 600,
+  margin: '0px',
+};
 export const subtitleStyle: any = {
   whiteSpace: 'nowrap',
   color: ObiColors.LightGray,