a11y: reapply tooltip additions

Composer/cypress/integration/LUPage.spec.ts

@@ -15,12 +15,15 @@ context('LU Page', () => {
 
     cy.get('.toggleEditMode button').should('not.exist');
 
-    // by default is table view
+    // by default it goes to table view
     cy.findByTestId('LUPage').findByTestId('table-view').should('exist');
 
+    // move away from the User Input button (clicking the logo should do nothing)
+    cy.findByAltText('Composer Logo').click();
+
     // nav to ToDoBotWithLuisSample.main dialog
     cy.findByTestId('ProjectTree').within(() => {
-      cy.findByText('__TestToDoBotWithLuisSample').click();
+      cy.findByText('__TestToDoBotWithLuisSample').click('left');
     });
     cy.get('.toggleEditMode button').as('switchButton');
     // goto edit-mode

Composer/cypress/integration/NotificationPage.spec.ts

@@ -61,6 +61,9 @@ context('Notification Page', () => {
 
     cy.findByTestId('LeftNav-CommandBarButtonNotifications').click();
 
+    // move away from the Notifications button (clicking the logo should do nothing)
+    cy.findByAltText('Composer Logo').click();
+
     cy.findByTestId('notifications-table-view').within(() => {
       cy.findAllByText('__testtodobotwithluissample.dialog').should('exist').first().dblclick();
     });

Composer/package.json

@@ -117,4 +117,4 @@
   "dependencies": {
     "cross-env": "^6.0.3"
   }
-}
+}

Composer/packages/client/src/App.tsx

@@ -7,6 +7,7 @@ import React, { forwardRef, useContext, useEffect, useState, Fragment, Suspense
 import { initializeIcons } from 'office-ui-fabric-react/lib/Icons';
 import { IconButton } from 'office-ui-fabric-react/lib/Button';
 import { FocusZone } from 'office-ui-fabric-react/lib/FocusZone';
+import { TooltipHost, DirectionalHint } from 'office-ui-fabric-react/lib/Tooltip';
 import formatMessage from 'format-message';
 
 import { Header } from './components/Header';
@@ -44,10 +45,13 @@ export const App: React.FC = () => {
     onboardingSetComplete(onboardingState.getComplete());
   }, []);
 
-  const mapNavItemTo = (x) => resolveToBasePath(BASEPATH, x);
+  const mapNavItemTo = (relPath: string) => resolveToBasePath(BASEPATH, relPath);
 
   const renderAppUpdater = isElectron();
 
+  const globalNavButtonText = sideBarExpand ? formatMessage('Collapse Navigation') : formatMessage('Expand Navigation');
+  const showTooltips = (link) => !sideBarExpand && !link.disabled;
+
   return (
     <Fragment>
       <div
@@ -67,17 +71,19 @@ export const App: React.FC = () => {
       <div css={main}>
         <nav css={sideBar(sideBarExpand)}>
           <div>
-            <IconButton
-              ariaLabel={sideBarExpand ? formatMessage('Collapse Nav') : formatMessage('Expand Nav')}
-              css={globalNav}
-              data-testid={'LeftNavButton'}
-              iconProps={{
-                iconName: 'GlobalNavButton',
-              }}
-              onClick={() => {
-                setSideBarExpand(!sideBarExpand);
-              }}
-            />
+            <TooltipHost content={globalNavButtonText} directionalHint={DirectionalHint.rightCenter}>
+              <IconButton
+                ariaLabel={globalNavButtonText}
+                css={globalNav}
+                data-testid={'LeftNavButton'}
+                iconProps={{
+                  iconName: 'GlobalNavButton',
+                }}
+                onClick={() => {
+                  setSideBarExpand((current) => !current);
+                }}
+              />
+            </TooltipHost>
             <div css={dividerTop} />{' '}
             <FocusZone allowFocusRoot>
               {topLinks.map((link, index) => {
@@ -88,6 +94,7 @@ export const App: React.FC = () => {
                     exact={link.exact}
                     iconName={link.iconName}
                     labelName={link.labelName}
+                    showTooltip={showTooltips(link)}
                     to={mapNavItemTo(link.to)}
                   />
                 );
@@ -104,6 +111,7 @@ export const App: React.FC = () => {
                   exact={link.exact}
                   iconName={link.iconName}
                   labelName={link.labelName}
+                  showTooltip={showTooltips(link)}
                   to={mapNavItemTo(link.to)}
                 />
               );

Composer/packages/client/src/components/NavItem/index.tsx

@@ -6,6 +6,7 @@ import { jsx, css } from '@emotion/core';
 import { useCallback, useContext } from 'react';
 import { Link } from '@reach/router';
 import { Icon } from 'office-ui-fabric-react/lib/Icon';
+import { TooltipHost, DirectionalHint } from 'office-ui-fabric-react/lib/Tooltip';
 
 import { StoreContext } from '../../store';
 import { useLocation, useRouterCache } from '../../utils/hooks';
@@ -25,14 +26,15 @@ export interface INavItemProps {
   iconName: string;
   labelName: string;
   disabled: boolean;
+  showTooltip: boolean;
 }
 
 export const NavItem: React.FC<INavItemProps> = (props) => {
   const {
     actions: { onboardingAddCoachMarkRef },
   } = useContext(StoreContext);
 
-  const { to, iconName, labelName, disabled } = props;
+  const { to, iconName, labelName, disabled, showTooltip } = props;
   const {
     location: { pathname },
   } = useLocation();
@@ -43,6 +45,8 @@ export const NavItem: React.FC<INavItemProps> = (props) => {
 
   const addRef = useCallback((ref) => onboardingAddCoachMarkRef({ [`nav${labelName.replace(' ', '')}`]: ref }), []);
 
+  const iconElement = <Icon iconName={iconName} styles={icon(active, disabled)} />;
+
   const activeArea = (
     <div
       aria-disabled={disabled}
@@ -51,7 +55,13 @@ export const NavItem: React.FC<INavItemProps> = (props) => {
       data-testid={active ? 'ActiveLeftNavItem' : undefined}
       tabIndex={-1}
     >
-      <Icon iconName={iconName} styles={icon(active, disabled)} />
+      {showTooltip ? (
+        <TooltipHost content={labelName} directionalHint={DirectionalHint.rightCenter}>
+          {iconElement}
+        </TooltipHost>
+      ) : (
+        iconElement
+      )}
       {labelName}
     </div>
   );

Composer/packages/client/src/components/ProjectTree/treeItem.tsx

@@ -5,8 +5,10 @@
 import { jsx } from '@emotion/core';
 import React from 'react';
 import { OverflowSet, IOverflowSetItemProps } from 'office-ui-fabric-react/lib/OverflowSet';
+import { TooltipHost, DirectionalHint } 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 formatMessage from 'format-message';
 
 import { moreButton, overflowSet, menuStyle, navItem, itemText, content } from './styles';
 
@@ -49,23 +51,27 @@ const onRenderItem = (item: IOverflowSetItemProps) => {
 };
 
 const onRenderOverflowButton = (isRoot: boolean, isActive: boolean) => {
+  const moreLabel = formatMessage('Actions');
   const showIcon = !isRoot;
   return (overflowItems) => {
     return showIcon ? (
-      <IconButton
-        className="dialog-more-btn"
-        data-is-focusable={isActive}
-        data-testid="dialogMoreButton"
-        menuIconProps={{ iconName: 'MoreVertical' }}
-        menuProps={{ items: overflowItems, styles: menuStyle }}
-        role="cell"
-        styles={moreButton(isActive)}
-        onKeyDown={(e) => {
-          if (e.key === 'Enter') {
-            e.stopPropagation();
-          }
-        }}
-      />
+      <TooltipHost content={moreLabel} directionalHint={DirectionalHint.rightCenter}>
+        <IconButton
+          ariaLabel={moreLabel}
+          className="dialog-more-btn"
+          data-is-focusable={isActive}
+          data-testid="dialogMoreButton"
+          menuIconProps={{ iconName: 'MoreVertical' }}
+          menuProps={{ items: overflowItems, styles: menuStyle }}
+          role="cell"
+          styles={moreButton(isActive)}
+          onKeyDown={(e) => {
+            if (e.key === 'Enter') {
+              e.stopPropagation();
+            }
+          }}
+        />
+      </TooltipHost>
     ) : null;
   };
 };

Composer/packages/client/src/pages/language-generation/table-view.tsx

@@ -48,6 +48,8 @@ const TableView: React.FC<TableViewProps> = (props) => {
     setTemplates(file.templates);
   }, [file, activeDialog, projectId]);
 
+  const moreLabel = formatMessage('Actions');
+
   const onClickEdit = useCallback(
     (template: LgTemplate) => {
       const { name } = template;
@@ -183,15 +185,17 @@ const TableView: React.FC<TableViewProps> = (props) => {
         data: 'string',
         onRender: (item, index) => {
           return (
-            <IconButton
-              ariaLabel={formatMessage('actions')}
-              menuIconProps={{ iconName: 'MoreVertical' }}
-              menuProps={{
-                shouldFocusOnMount: true,
-                items: getTemplatesMoreButtons(item, index),
-              }}
-              styles={{ menuIcon: { color: NeutralColors.black, fontSize: FontSizes.size16 } }}
-            />
+            <TooltipHost calloutProps={{ gapSpace: 10 }} content={moreLabel}>
+              <IconButton
+                ariaLabel={moreLabel}
+                menuIconProps={{ iconName: 'MoreVertical' }}
+                menuProps={{
+                  shouldFocusOnMount: true,
+                  items: getTemplatesMoreButtons(item, index),
+                }}
+                styles={{ menuIcon: { color: NeutralColors.black, fontSize: FontSizes.size16 } }}
+              />
+            </TooltipHost>
           );
         },
       },

Composer/packages/client/src/pages/language-understanding/table-view.tsx

@@ -45,6 +45,8 @@ const TableView: React.FC<TableViewProps> = (props) => {
   const [intents, setIntents] = useState<Intent[]>([]);
   const listRef = useRef(null);
 
+  const moreLabel = formatMessage('Open inline editor');
+
   function getIntentState(file: LuFile): string {
     if (!file.diagnostics) {
       return formatMessage('Error');
@@ -196,15 +198,17 @@ const TableView: React.FC<TableViewProps> = (props) => {
         data: 'string',
         onRender: (item, index) => {
           return (
-            <IconButton
-              ariaLabel={formatMessage('Open inline editor')}
-              menuIconProps={{ iconName: 'MoreVertical' }}
-              menuProps={{
-                shouldFocusOnMount: true,
-                items: getTemplatesMoreButtons(item, index),
-              }}
-              styles={{ menuIcon: { color: NeutralColors.black, fontSize: FontSizes.size16 } }}
-            />
+            <TooltipHost calloutProps={{ gapSpace: 10 }} content={moreLabel}>
+              <IconButton
+                ariaLabel={moreLabel}
+                menuIconProps={{ iconName: 'MoreVertical' }}
+                menuProps={{
+                  shouldFocusOnMount: true,
+                  items: getTemplatesMoreButtons(item, index),
+                }}
+                styles={{ menuIcon: { color: NeutralColors.black, fontSize: FontSizes.size16 } }}
+              />
+            </TooltipHost>
           );
         },
       },

Composer/packages/extensions/adaptive-flow/src/adaptive-flow-editor/renderers/EdgeMenu/EdgeMenu.tsx

@@ -6,6 +6,7 @@ import { jsx } from '@emotion/core';
 import { useContext, useState } from 'react';
 import formatMessage from 'format-message';
 import { DefinitionSummary } from '@bfc/shared';
+import { TooltipHost, DirectionalHint } from 'office-ui-fabric-react/lib/Tooltip';
 
 // TODO: leak of visual-sdk domain (EdgeAddButtonSize)
 import { EdgeAddButtonSize } from '../../../adaptive-flow-renderer/constants/ElementSizes';
@@ -38,8 +39,12 @@ export const EdgeMenu: React.FC<EdgeMenuProps> = ({ id, onClick }) => {
   };
 
   const [menuSelected, setMenuSelected] = useState<boolean>(false);
-  let boxShaow = '0px 2px 8px rgba(0, 0, 0, 0.1)';
-  boxShaow += menuSelected ? `,0 0 0 2px ${ObiColors.AzureBlue}` : nodeSelected ? `, 0 0 0 2px ${ObiColors.Black}` : '';
+  let boxShadow = '0px 2px 8px rgba(0, 0, 0, 0.1)';
+  boxShadow += menuSelected
+    ? `,0 0 0 2px ${ObiColors.AzureBlue}`
+    : nodeSelected
+    ? `, 0 0 0 2px ${ObiColors.Black}`
+    : '';
 
   const handleMenuShow = (menuSelected) => {
     setMenuSelected(menuSelected);
@@ -57,40 +62,45 @@ export const EdgeMenu: React.FC<EdgeMenuProps> = ({ id, onClick }) => {
     // Custom Action 'oneOf' arrays from schema file
     customSchemas.map((x) => x.oneOf).filter((oneOf) => Array.isArray(oneOf) && oneOf.length) as DefinitionSummary[][]
   );
+
+  const moreLabel = formatMessage('Add');
+
   return (
     <div
       style={{
         width: EdgeAddButtonSize.width,
         height: EdgeAddButtonSize.height,
         borderRadius: '8px',
         backdropFilter: 'white',
-        boxShadow: boxShaow,
+        boxShadow: boxShadow,
         overflow: 'hidden',
         background: 'white',
       }}
       {...declareElementAttributes(id)}
     >
-      <IconMenu
-        handleMenuShow={handleMenuShow}
-        iconName="Add"
-        iconSize={7}
-        iconStyles={{
-          color: '#005CE6',
-          selectors: {
-            ':focus': {
-              outline: 'none',
-              selectors: {
-                '::after': {
-                  outline: 'none !important',
+      <TooltipHost content={moreLabel} directionalHint={DirectionalHint.rightCenter}>
+        <IconMenu
+          handleMenuShow={handleMenuShow}
+          iconName="Add"
+          iconSize={7}
+          iconStyles={{
+            color: '#005CE6',
+            selectors: {
+              ':focus': {
+                outline: 'none',
+                selectors: {
+                  '::after': {
+                    outline: 'none !important',
+                  },
                 },
               },
             },
-          },
-        }}
-        label={formatMessage('Add')}
-        menuItems={menuItems}
-        nodeSelected={nodeSelected}
-      />
+          }}
+          label={moreLabel}
+          menuItems={menuItems}
+          nodeSelected={nodeSelected}
+        />
+      </TooltipHost>
     </div>
   );
 };