a11y: make focus visible on create node button (#2677)

* add circle outline for add button

* add set menuSelected false callback

Co-authored-by: Andy Brown <asbrown002@gmail.com>
Co-authored-by: Corina <14900841+corinagum@users.noreply.github.com>

Composer/packages/extensions/visual-designer/src/components/menus/EdgeMenu.tsx

@@ -3,7 +3,7 @@
 
 /** @jsx jsx */
 import { jsx, css } from '@emotion/core';
-import { useCallback, useContext } from 'react';
+import { useCallback, useContext, useState } from 'react';
 import classnames from 'classnames';
 import formatMessage from 'format-message';
 import { createStepMenu, DialogGroup, SDKKinds } from '@bfc/shared';
@@ -16,6 +16,7 @@ import { SelectionContext } from '../../store/SelectionContext';
 import { SelfHostContext } from '../../store/SelfHostContext';
 import { AttrNames } from '../../constants/ElementAttributes';
 import { MenuTypes } from '../../constants/MenuTypes';
+import { ObiColors } from '../../constants/ElementColors';
 
 import { IconMenu } from './IconMenu';
 
@@ -115,8 +116,14 @@ export const EdgeMenu: React.FC<EdgeMenuProps> = ({ id, addCoachMarkRef, onClick
     };
   };
 
+  const [menuSelected, setMenuSelected] = useState<boolean>(false);
   const addRef = useCallback((action: HTMLDivElement) => addCoachMarkRef && addCoachMarkRef({ action }), []);
+  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}` : '';
 
+  const handleMenuShow = menuSelected => {
+    setMenuSelected(menuSelected);
+  };
   return (
     <div
       ref={addRef}
@@ -125,10 +132,9 @@ export const EdgeMenu: React.FC<EdgeMenuProps> = ({ id, addCoachMarkRef, onClick
         height: EdgeAddButtonSize.height,
         borderRadius: '8px',
         backdropFilter: 'white',
-        boxShadow: '0px 2px 8px rgba(0, 0, 0, 0.1)',
+        boxShadow: boxShaow,
         overflow: 'hidden',
         background: 'white',
-        outline: nodeSelected ? '1px solid #0078d4' : '',
       }}
       className={classnames({ 'step-renderer-container--selected': nodeSelected })}
       {...declareElementAttributes(id)}
@@ -157,6 +163,7 @@ export const EdgeMenu: React.FC<EdgeMenuProps> = ({ id, addCoachMarkRef, onClick
           selfHosted ? x => x !== SDKKinds.LogAction : undefined
         )}
         label={formatMessage('Add')}
+        handleMenuShow={handleMenuShow}
         {...rest}
       />
     </div>

Composer/packages/extensions/visual-designer/src/components/menus/IconMenu.tsx

@@ -21,6 +21,7 @@ interface IconMenuProps {
   label?: string;
   menuItems: any[];
   menuWidth?: number;
+  handleMenuShow?: (menuShowed: boolean) => void;
 }
 
 export const IconMenu: React.FC<IconMenuProps> = ({
@@ -31,6 +32,7 @@ export const IconMenu: React.FC<IconMenuProps> = ({
   label,
   menuItems,
   menuWidth,
+  handleMenuShow,
   ...rest
 }): JSX.Element => {
   const _onRenderItem = (item): React.ReactNode => {
@@ -78,6 +80,12 @@ export const IconMenu: React.FC<IconMenuProps> = ({
       },
     };
 
+    const onMenuClick = () => {
+      handleMenuShow && handleMenuShow(true);
+    };
+    const onAfterMenuDismiss = () => {
+      handleMenuShow && handleMenuShow(false);
+    };
     return (
       <IconButton
         // @ts-ignore
@@ -86,6 +94,8 @@ export const IconMenu: React.FC<IconMenuProps> = ({
         styles={buttonStyles}
         menuIconProps={{ iconName, style: { fontSize: iconSize, fontWeight: 'bold', color } }}
         menuProps={{ items: overflowItems, calloutProps: { calloutMaxWidth: menuWidth } }}
+        onMenuClick={onMenuClick}
+        onAfterMenuDismiss={onAfterMenuDismiss}
         ariaLabel={label}
         {...rest}
       />