a11y: make SR read field descriptions on widgets (#2281)

* replace IconButton with Icon Replaces the IconButton in WidgetLabel.tsx with a plain Icon bearing an aria-label. * fix unit tests * Update WidgetLabel.tsx Add a keyboard tab stop and adjust spacing - still not sure the SR experience is 100% great, but this at least makes it work. Co-authored-by: Chris Whitten <christopher.whitten@microsoft.com>
microsoft · Mar 22, 2020 · d2a2ab9 · d2a2ab9
1 parent 2cf1676
commit d2a2ab9
Show file tree

Hide file tree

Showing 3 changed files with 28 additions and 19 deletions.
diff --git a/.../packages/extensions/obiformeditor/__tests__/Form/ArrayFieldTemplate/ObjectArray.test.tsx b/.../packages/extensions/obiformeditor/__tests__/Form/ArrayFieldTemplate/ObjectArray.test.tsx
@@ -38,10 +38,10 @@ describe('<ObjectArray />', () => {
   });
 
   it('renders a DescriptionField in tooltip', async () => {
-    const { baseElement, findAllByRole } = renderDefault();
-    const [icon] = await findAllByRole('presentation');
+    const { baseElement } = renderDefault();
+    const icon = baseElement.querySelector('[data-icon-name="Unknown"]');
 
-    fireEvent.mouseOver(icon);
+    if (icon !== null) fireEvent.mouseOver(icon);
 
     expect(baseElement).toHaveTextContent('My array description.');
   });

diff --git a/.../packages/extensions/obiformeditor/__tests__/Form/ArrayFieldTemplate/StringArray.test.tsx b/.../packages/extensions/obiformeditor/__tests__/Form/ArrayFieldTemplate/StringArray.test.tsx
@@ -38,10 +38,10 @@ describe('<StringArray />', () => {
   });
 
   it('renders a DescriptionField in tooltip', async () => {
-    const { baseElement, findAllByRole } = renderDefault();
-    const [icon] = await findAllByRole('presentation');
+    const { baseElement } = renderDefault();
+    const icon = baseElement.querySelector('[data-icon-name="Unknown"]');
 
-    fireEvent.mouseOver(icon);
+    if (icon !== null) fireEvent.mouseOver(icon);
 
     expect(baseElement).toHaveTextContent('My array description.');
   });

diff --git a/Composer/packages/extensions/obiformeditor/src/Form/widgets/WidgetLabel.tsx b/Composer/packages/extensions/obiformeditor/src/Form/widgets/WidgetLabel.tsx
@@ -3,7 +3,7 @@
 
 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 { NeutralColors } from '@uifabric/fluent-theme';
 
@@ -50,18 +50,27 @@ const DescriptionCallout: React.FC<DescriptionCalloutProps> = props => {
       styles={{ root: { display: 'flex', alignItems: 'center' } }}
       id={`${id}-description`}
     >
-      <IconButton
-        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' },
-        }}
-        aria-labelledby={`${id}-description`}
-      />
+      <div tabIndex={0}>
+        <Icon
+          iconName="Unknown"
+          styles={{
+            root: {
+              width: '12px',
+              minWidth: '12px',
+              height: '12px',
+
+              padding: '0px 3px',
+
+              color: NeutralColors.gray160,
+              fontSize: '12px',
+            },
+          }}
+          aria-label={
+            // add a semicolon so the screen-reader pauses instead of making a confusing run-on
+            `;${description}`
+          }
+        />
+      </div>
     </TooltipHost>
   );
 };