a11y: add callout to Onboarding toggle switch (microsoft#2390)

* add callout label to Onboarding toggle * add callout label to Onboarding toggle * Update index.tsx * add callout label to Onboarding toggle * add callout label to Onboarding toggle * Update index.tsx * Update index.tsx Co-authored-by: Chris Whitten <christopher.whitten@microsoft.com> Co-authored-by: Andy Brown <asbrown002@gmail.com>
lei9444 · Apr 2, 2020 · 549b8e5 · 549b8e5
1 parent ddfd5e3
commit 549b8e5
Showing 1 changed file with 53 additions and 3 deletions.
diff --git a/Composer/packages/client/src/pages/setting/onboarding-settings/index.tsx b/Composer/packages/client/src/pages/setting/onboarding-settings/index.tsx
@@ -2,17 +2,23 @@
 // Licensed under the MIT License.
 
 /** @jsx jsx */
-import { jsx } from '@emotion/core';
-import { useCallback, useContext } from 'react';
+import { jsx, css } from '@emotion/core';
+import { useCallback, useContext, useState } from 'react';
 import formatMessage from 'format-message';
 import { Toggle } from 'office-ui-fabric-react/lib/Toggle';
 import { Link } from 'office-ui-fabric-react/lib/Link';
+import { TeachingBubble } from 'office-ui-fabric-react/lib/TeachingBubble';
+import { FontIcon } from 'office-ui-fabric-react/lib/Icon';
+import { DirectionalHint } from 'office-ui-fabric-react/lib/common/DirectionalHint';
+import { NeutralColors } from '@uifabric/fluent-theme';
 
 import { StoreContext } from '../../../store';
 
 import { onboardingSettings, onboardingTitle } from './style';
 
 export const OnboardingSettings = () => {
+  const [calloutIsShown, showCallout] = useState(false);
+
   const {
     actions: { onboardingSetComplete },
     state: {
@@ -22,20 +28,64 @@ export const OnboardingSettings = () => {
 
   const onChange = useCallback(() => {
     onboardingSetComplete(!complete);
+    showCallout(complete);
   }, [complete, onboardingSetComplete]);
 
   return (
     <div css={onboardingSettings}>
       <h1 css={onboardingTitle}>{formatMessage('Onboarding')}</h1>
       <p>{formatMessage('Enabling Onboarding will restart the product tour.')}</p>
       <Toggle
+        id={'onboardingToggle'}
         data-testid="onboardingToggle"
         checked={!complete}
+        onChange={onChange}
         label={formatMessage('Onboarding')}
         offText={formatMessage('Disabled')}
-        onChange={onChange}
         onText={formatMessage('Enabled')}
       />
+      <TeachingBubble
+        calloutProps={{
+          hidden: !calloutIsShown,
+          role: 'status',
+          directionalHint: DirectionalHint.rightCenter,
+          isBeakVisible: false,
+        }}
+        target={'#onboardingToggle'}
+        styles={{
+          bodyContent: {
+            padding: '0px',
+          },
+          body: {
+            margin: '0px',
+          },
+        }}
+      >
+        <div
+          css={css`
+            display: flex;
+            align-items: center;
+          `}
+        >
+          <div
+            css={css`
+              font-size: 24px;
+              background: ${NeutralColors.gray20};
+              color: black;
+              padding: 4px;
+            `}
+          >
+            <FontIcon iconName={'SplitObject'} />
+          </div>
+          <div
+            css={css`
+              padding-left: 8px;
+            `}
+          >
+            {formatMessage('Please return to Design View to start the Onboarding tutorial.')}
+          </div>
+        </div>
+      </TeachingBubble>
       <Link href="https://aka.ms/bfc-onboarding" target="_blank" rel="noopener noreferrer">
         {formatMessage('Learn more')}
       </Link>