a11y: reflow and zoom support for Composer

Composer/packages/client/src/components/AppComponents/SideBar.tsx

@@ -47,8 +47,10 @@ const sideBar = (isExpand: boolean) => css`
   display: flex;
   flex-direction: column;
   justify-content: space-between;
-  overflow: hidden;
+  overflow-x: hidden;
+  overflow-y: auto;
   flex-shrink: 0;
+  scrollbar-width: thin;
 `;
 
 const dividerTop = css`

Composer/packages/client/src/components/BotRuntimeController/BotController.tsx

@@ -5,7 +5,7 @@
 import { jsx } from '@emotion/react';
 import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { DefaultButton, IconButton } from '@fluentui/react/lib/Button';
-import { TooltipHost } from '@fluentui/react/lib/Tooltip';
+import { TooltipHost, TooltipOverflowMode } from '@fluentui/react/lib/Tooltip';
 import { IContextualMenuItem } from '@fluentui/react/lib/ContextualMenu';
 import { useRecoilValue } from 'recoil';
 import formatMessage from 'format-message';
@@ -14,6 +14,7 @@ import { NeutralColors, CommunicationColors } from '@fluentui/theme';
 import { Spinner, SpinnerSize } from '@fluentui/react/lib/Spinner';
 import { DiagnosticSeverity } from '@botframework-composer/types';
 import { DirectionalHint } from '@fluentui/react/lib/common/DirectionalHint';
+import { mergeStyleSets, FontSizes } from '@fluentui/react/lib/Styling';
 
 import { DisableFeatureToolTip } from '../DisableFeatureToolTip';
 import TelemetryClient from '../../telemetry/TelemetryClient';
@@ -61,6 +62,50 @@ const startPanelsContainer = css`
 
 const transparentBackground = 'rgba(255, 255, 255, 0.5)';
 
+const classNames = mergeStyleSets({
+  startButtonOverflow: {
+    overflow: 'hidden',
+    textOverflow: 'ellipsis',
+    whiteSpace: 'nowrap',
+    fontSize: FontSizes.size16,
+    color: NeutralColors.white,
+  },
+  subComponentStyles: {
+    startButton: {
+      root: {
+        backgroundColor: CommunicationColors.tint10,
+        display: 'flex',
+        alignItems: 'center',
+        minWidth: '100px',
+        height: '36px',
+        flexDirection: 'row',
+        padding: '0 7px',
+        border: `1px solid ${CommunicationColors.tint10}`,
+        width: '100%',
+      },
+      rootHovered: {
+        background: transparentBackground,
+      },
+      rootDisabled: {
+        opacity: 0.6,
+        backgroundColor: CommunicationColors.tint10,
+        color: `${NeutralColors.white}`,
+        border: 'none',
+        font: '62px',
+      },
+    },
+    startButtonTooltip: {
+      root: {
+        display: 'block',
+        flex: 'auto',
+        '@media screen and (max-width: 720px)': /* 150% zoom */ {
+          width: '35px',
+        },
+      },
+    },
+  },
+});
+
 type BotControllerProps = {
   onHideController: (isHidden: boolean) => void;
   isControllerHidden: boolean;
@@ -225,58 +270,43 @@ const BotController: React.FC<BotControllerProps> = ({ onHideController, isContr
           )}
           isPVABot={isPVABot}
         >
-          <DefaultButton
-            primary
-            aria-roledescription={formatMessage('Bot Controller')}
-            data-testid={'startBotButton'}
-            disabled={disableStartBots || areBotsProcessing}
-            iconProps={{
-              iconName: statusIconClass,
-              styles: {
-                root: {
-                  color: `${NeutralColors.white}`,
-                },
-              },
-            }}
-            id={'startBotPanelElement'}
-            menuAs={() => null}
-            styles={{
-              root: {
-                backgroundColor: CommunicationColors.tint10,
-                display: 'flex',
-                alignItems: 'center',
-                minWidth: '229px',
-                height: '36px',
-                flexDirection: 'row',
-                padding: '0 7px',
-                border: `1px solid ${CommunicationColors.tint10}`,
-                width: '100%',
-              },
-              rootHovered: {
-                background: transparentBackground,
-              },
-              rootDisabled: {
-                opacity: 0.6,
-                backgroundColor: CommunicationColors.tint10,
-                color: `${NeutralColors.white}`,
-                border: 'none',
-                font: '62px',
-              },
-            }}
-            onClick={handleClick}
+          <TooltipHost
+            content={startPanelButtonText}
+            hostClassName={classNames.startButtonOverflow}
+            overflowMode={TooltipOverflowMode.Self}
+            styles={classNames.subComponentStyles.startButtonTooltip}
           >
-            {areBotsProcessing && (
-              <Spinner
-                size={SpinnerSize.small}
-                styles={{
+            <DefaultButton
+              primary
+              aria-roledescription={formatMessage('Bot Controller')}
+              data-testid={'startBotButton'}
+              disabled={disableStartBots || areBotsProcessing}
+              iconProps={{
+                iconName: statusIconClass,
+                styles: {
                   root: {
-                    marginRight: '5px',
+                    color: `${NeutralColors.white}`,
                   },
-                }}
-              />
-            )}
-            <span style={{ margin: '0 0 2px 5px' }}>{startPanelButtonText}</span>
-          </DefaultButton>
+                },
+              }}
+              id={'startBotPanelElement'}
+              menuAs={() => null}
+              styles={classNames.subComponentStyles.startButton({})}
+              onClick={handleClick}
+            >
+              {areBotsProcessing && (
+                <Spinner
+                  size={SpinnerSize.small}
+                  styles={{
+                    root: {
+                      marginRight: '5px',
+                    },
+                  }}
+                />
+              )}
+              <span style={{ margin: '0 0 2px 5px' }}>{startPanelButtonText}</span>
+            </DefaultButton>
+          </TooltipHost>
         </DisableFeatureToolTip>
         <div ref={onboardRef} css={[iconSectionContainer, disableStartBots ? disabledStyle : '']}>
           <TooltipHost content={startStopLabel} directionalHint={DirectionalHint.bottomCenter}>

Composer/packages/client/src/components/CreationFlow/CreateBot.tsx

@@ -38,27 +38,26 @@ import { TemplateDetailView } from './TemplateDetailView';
 // -------------------- Styles -------------------- //
 
 const detailListContainer = css`
-  width: 48%;
-  padding-right: 2%;
+  flex-basis: 50%;
   height: 400px;
   overflow: hidden;
-  float: left;
-  flex-grow: 1;
 `;
 
 const templateDetailContainer = css`
-  width: 48%;
-  padding-right: 2%;
+  flex-basis: 50%;
   height: 400px;
   overflow: auto;
-  flex-grow: 1;
-  float: left;
 `;
 
 const pickerContainer = css`
   position: relative;
-  height: 400px;
+  min-height: 400px;
   border: 1px solid #f3f2f1;
+  display: flex;
+  gap: 8px;
+  @media screen and (max-width: 480px) /* 300% zoom */ {
+    flex-flow: column;
+  }
 `;
 
 const rowDetails = (disabled) => {

Composer/packages/client/src/components/CreationFlow/DefineConversation.tsx

@@ -23,6 +23,7 @@ import { IDropdownOption } from '@fluentui/react/lib/Dropdown';
 import camelCase from 'lodash/camelCase';
 import upperFirst from 'lodash/upperFirst';
 import { Label } from '@fluentui/react/lib/Label';
+import styled from '@emotion/styled';
 
 import { CreationFlowStatus, DialogCreationCopy, nameRegex, botNameRegex } from '../../constants';
 import { FieldConfig, useForm } from '../../hooks/useForm';
@@ -34,6 +35,7 @@ import { getAliasFromPayload, Profile } from '../../utils/electronUtil';
 import TelemetryClient from '../../telemetry/TelemetryClient';
 
 import { LocationSelectContent } from './LocationSelectContent';
+import { FormStack } from './FormStack';
 
 // -------------------- Styles -------------------- //
 
@@ -48,27 +50,23 @@ const textFieldlabel = {
 };
 
 const name = {
-  root: {
-    width: '420px',
-  },
   subComponentStyles: textFieldlabel,
 };
 
-const halfstack = {
-  root: [
-    {
-      flexBasis: '50%',
-    },
-  ],
+const dropdownCalloutStyles = {
+  root: {
+    minWidth: '200px',
+    maxWidth: '100vw',
+  },
 };
 
-const stackinput = {
-  root: [
-    {
-      marginBottom: '1rem',
-    },
-  ],
-};
+const InnerFormStack = styled(FormStack)`
+  --min-column-size: 151px; /* two fields can't fit on 125% zoom */
+  column-gap: 1rem;
+  @media screen and (max-width: 960px) /* 125% zoom */ {
+    --min-column-size: 240px; /* force two-column layout for zoom up to 300% */
+  }
+`;
 
 // -------------------- DefineConversation -------------------- //
 
@@ -417,8 +415,8 @@ const DefineConversation: React.FC<DefineConversationProps> = (props) => {
       <DialogWrapper isOpen {...dialogCopy} dialogType={DialogTypes.CreateFlow} onDismiss={onDismiss}>
         <form onSubmit={handleSubmit}>
           <input style={{ display: 'none' }} type="submit" />
-          <Stack horizontal styles={stackinput} tokens={{ childrenGap: '2rem' }}>
-            <StackItem grow={0} styles={halfstack}>
+          <FormStack>
+            <StackItem>
               <TextField
                 autoFocus
                 required
@@ -431,19 +429,21 @@ const DefineConversation: React.FC<DefineConversationProps> = (props) => {
               />
             </StackItem>
             {!isImported && (
-              <StackItem grow={0} styles={halfstack}>
-                <Stack horizontal styles={stackinput} tokens={{ childrenGap: '2rem' }}>
-                  <StackItem grow={0}>
+              <StackItem>
+                <InnerFormStack>
+                  <StackItem>
                     <DropdownField
                       required
+                      calloutProps={{
+                        styles: dropdownCalloutStyles,
+                      }}
                       data-testid="NewDialogRuntimeType"
                       label={formatMessage('Runtime type')}
                       options={getSupportedRuntimesForTemplate()}
                       selectedKey={formData.runtimeType}
                       styles={{
-                        root: { width: inBotMigration ? '200px' : '420px' },
-                        dropdownItem: { height: '100px' },
-                        dropdownItemSelected: { height: '100px' },
+                        dropdownItem: { height: 'auto' },
+                        dropdownItemSelected: { height: 'auto' },
                       }}
                       tooltip={formatMessage(
                         'Azure offers a number of ways to host your application code. The runtime type refers to the hosting model for the computing resources that your application runs on.'
@@ -453,21 +453,20 @@ const DefineConversation: React.FC<DefineConversationProps> = (props) => {
                     />
                   </StackItem>
                   {inBotMigration && (
-                    <StackItem grow={0}>
+                    <StackItem>
                       <DropdownField
                         data-testid="NewDialogRuntimeLanguage"
                         label={formatMessage('Runtime Language')}
                         options={getRuntimeLanguageOptions()}
                         selectedKey={formData.runtimeLanguage}
-                        styles={{ root: { width: '200px' } }}
                         onChange={(_e, option) => updateField('runtimeLanguage', option?.key.toString())}
                       />
                     </StackItem>
                   )}
-                </Stack>
+                </InnerFormStack>
               </StackItem>
             )}
-          </Stack>
+          </FormStack>
           {locationSelectContent}
           <DialogFooter>
             <DefaultButton text={formatMessage('Cancel')} onClick={onDismiss} />

Composer/packages/client/src/components/CreationFlow/FileSelector.tsx

@@ -22,7 +22,7 @@ import {
 } from '@fluentui/react/lib/DetailsList';
 import formatMessage from 'format-message';
 import { Fragment } from 'react';
-import { Stack, StackItem } from '@fluentui/react/lib/Stack';
+import { StackItem } from '@fluentui/react/lib/Stack';
 import { ComboBox, IComboBox, IComboBoxOption } from '@fluentui/react/lib/ComboBox';
 import { TextField } from '@fluentui/react/lib/TextField';
 import moment from 'moment';
@@ -34,6 +34,8 @@ import { StorageFolder, File } from '../../recoilModel/types';
 import { getFileIconName, calculateTimeDiff } from '../../utils/fileUtil';
 import httpClient from '../../utils/httpUtil';
 
+import { FormStack } from './FormStack';
+
 // -------------------- Styles -------------------- //
 
 const detailListContainer = css`
@@ -79,22 +81,6 @@ export const content = css`
   margin-top: 3px;
 `;
 
-export const halfstack = {
-  root: [
-    {
-      flexBasis: '50%',
-    },
-  ],
-};
-
-export const stackinput = {
-  root: [
-    {
-      marginBottom: '1rem',
-    },
-  ],
-};
-
 export const editButton = {
   root: {
     height: 20,
@@ -521,8 +507,8 @@ export const FileSelector: React.FC<FileSelectorProps> = (props) => {
 
   return (
     <Fragment>
-      <Stack horizontal styles={stackinput} tokens={{ childrenGap: '2rem' }}>
-        <StackItem grow={0} styles={halfstack}>
+      <FormStack>
+        <StackItem>
           <ComboBox
             allowFreeform
             useComboBoxAsMenuWidth
@@ -532,7 +518,6 @@ export const FileSelector: React.FC<FileSelectorProps> = (props) => {
             label={formatMessage('Location')}
             options={breadcrumbItems}
             selectedKey={currentPath}
-            styles={{ root: { width: '420px' } }}
             onChange={updatePath}
             onPendingValueChanged={updatePathPending}
           />
@@ -546,7 +531,7 @@ export const FileSelector: React.FC<FileSelectorProps> = (props) => {
             </Link>
           )}
         </StackItem>
-      </Stack>
+      </FormStack>
       <div css={detailListContainer} data-is-scrollable="true">
         <ScrollablePane scrollbarVisibility={ScrollbarVisibility.auto}>
           <DetailsList