a11y: change button to icon in FieldLabel.tsx (microsoft#2551)

* Update FieldLabel.tsx * Update FieldLabel.tsx Co-authored-by: Chris Whitten <christopher.whitten@microsoft.com> Co-authored-by: Andy Brown <asbrown002@gmail.com>
lei9444 · Apr 8, 2020 · 6f9adb1 · 6f9adb1
1 parent 56ac846
commit 6f9adb1
Showing 1 changed file with 29 additions and 19 deletions.
diff --git a/Composer/packages/extensions/adaptive-form/src/components/FieldLabel.tsx b/Composer/packages/extensions/adaptive-form/src/components/FieldLabel.tsx
@@ -2,7 +2,7 @@
 // Licensed under the MIT License.
 import React from 'react';
 import { DirectionalHint, TooltipHost, TooltipDelay } from 'office-ui-fabric-react/lib/Tooltip';
-import { IconButton } from 'office-ui-fabric-react/lib/Button';
+import { Icon } from 'office-ui-fabric-react/lib/Icon';
 import { Label } from 'office-ui-fabric-react/lib/Label';
 import { Link } from 'office-ui-fabric-react/lib/Link';
 import { NeutralColors } from '@uifabric/fluent-theme';
@@ -32,7 +32,9 @@ const DescriptionCallout: React.FC<DescriptionCalloutProps> = function Descripti
         styles: { root: { width: '288px', padding: '17px 28px' } },
         onRenderContent: () => (
           <div>
-            <h3 style={{ fontSize: '20px', margin: '0', marginBottom: '10px' }}>{title}</h3>
+            <h3 style={{ fontSize: '20px', margin: '0', marginBottom: '10px' }} aria-label={title + '.'}>
+              {title}
+            </h3>
             <p>{description}</p>
             {helpLink && (
               <Link href={helpLink} target="_blank" rel="noopener noreferrer">
@@ -43,22 +45,24 @@ const DescriptionCallout: React.FC<DescriptionCalloutProps> = function Descripti
         ),
       }}
     >
-      <IconButton
-        aria-labelledby={`${id}-description`}
-        iconProps={{
-          iconName: 'Unknown',
-        }}
-        styles={{
-          root: { width: '20px', minWidth: '20px', height: '20px' },
-          rootHovered: { backgroundColor: 'transparent' },
-          rootChecked: { backgroundColor: 'transparent' },
-          icon: {
-            color: NeutralColors.gray160,
-            fontSize: '12px',
-            marginBottom: '-2px',
-          },
-        }}
-      />
+      <div tabIndex={0}>
+        <Icon
+          aria-labelledby={`${id}-description`}
+          iconName={'Unknown'}
+          styles={{
+            root: {
+              width: '16px',
+              minWidth: '16px',
+              height: '16px',
+              color: NeutralColors.gray160,
+              fontSize: '12px',
+              marginBottom: '-2px',
+              paddingLeft: '4px',
+              paddingTop: '4px',
+            },
+          }}
+        />
+      </div>
     </TooltipHost>
   );
 };
@@ -90,7 +94,13 @@ const FieldLabel: React.FC<FieldLabelProps> = props => {
         },
       }}
     >
-      {label}
+      <div
+        style={{
+          marginRight: '4px',
+        }}
+      >
+        {label}
+      </div>
       <DescriptionCallout description={description} id={id} title={label} helpLink={helpLink} />
     </Label>
   );