chore: electron 14 upgrade build test (#9164)

* a11y: ensure there is only one main landmark (#9074) * a11y: ensure there is only one main landmark Remove redundant main landmarks and add the landmark for pages where it is not defined Contains the following changes: - Removed MainContent component as it's not beeing used anywhere - Remove main role duplication from Disigner pages - Add main role to plugin pages - (Unrelated improvement) Link Language modal search field label with the search field * Fix lint issues * a11y: Add aria-required attribute to Form Editor required fields (#9079) * a11y: Add aria-required attribute to FormEditor required fields These fields are visually indicated as required. so add `aria-required` attribute for screenreaders. * Address review comments * a11y: fix aria-label content (#9092) Aria label should start from visible content. This PR fixes the occurrence pointed out in the linked bug. * a11y: fix project tre roles and aria (#9093) This improves aria for the Project Tree control. Includes the following changes: - Remove redundant aria-label causing two elements in the chain to have the same name - Remove redundant tabIndex and move keyboard handler to the place where the keyboard event happens - Make aria-labels to follow the rule: visible content goes first in the label * a11y: add support for intellisense (#9091) * a11y: add support for intellisense The PR adds accessibility properties for the intellisense component, wires them with input components and fixes some observations. List of changes: - Added `aria` attributes set into `Intellisense` component, so it to be passed down to any input rendered - Updated fields. where it makes sense. to include a11y parameters passed by Intellisense - Added scrollIntoView for CompletionElement to ensure the selected element is in the view - Refactored CompletionList a11y properties. Now list has a listbox role when showing suggestions * Fix tests * Fix indent * Fix nit * a11y: address accessibility insights issues (#9148) * a11y: improve debug header aria * Add aria attributes * Exclude empty button from keyboard navigation * a11y: enforce HelpTooltip aria * Make HelpTooltip `aria-label` property required * Remove `aria-hidden` attribute from the help tooltip icon * Add missing aria-labels and roles * Allow focusing tooltips inside menu items * Rework types * a11y: add aria for knowledge base buttons * Add `aria-label` for icon-only buttons * a11y: improve publish screen aria * Add aria for controls * Add column names * a11y: split button aria * Add accessible split button component * Refactor Library split button * a11y: package manager aria * add missing aria labels for controls * Revert "a11y: split button aria" This reverts commit da7e713. * a11y: split button aria * Add accessible split button component * Refactor Library split button * Refactor Chat header split button * a11y: debug panel aria improvements * Add label for bot picker * a11y: upgrade webchat * Upgrade WebChat to the latest version as it fixes some accessibility issues * Revert "a11y: upgrade webchat" This reverts commit 9762cf0. * a11y: improve get started panel aria * Add close button label * fix lint * chore: update electron to currently supported version * Trigger build * Use Electron v14.2.6 * Trigger build * Fix mac signing process * Implement custom electron build fetching * Revert "chore: update electron (#9056)" This reverts commit 226b4df. * fix path
microsoft · May 12, 2022 · 82c2ffc · 82c2ffc
1 parent 226b4df
commit 82c2ffc
Show file tree

Hide file tree

Showing 48 changed files with 463 additions and 143 deletions.
diff --git a/Composer/packages/adaptive-form/src/components/fields/BooleanField.tsx b/Composer/packages/adaptive-form/src/components/fields/BooleanField.tsx
@@ -72,6 +72,7 @@ const BooleanField: React.FC<FieldProps> = function CheckboxWidget(props) {
         required={required}
       />
       <Dropdown
+        aria-required={required}
         ariaLabel={label || formatMessage('boolean field')}
         id={id}
         options={options}

diff --git a/Composer/packages/adaptive-form/src/components/fields/IntellisenseFields.tsx b/Composer/packages/adaptive-form/src/components/fields/IntellisenseFields.tsx
@@ -47,9 +47,11 @@ export const IntellisenseTextField: React.FC<FieldProps<string>> = (props) => {
         onKeyDownTextField,
         onKeyUpTextField,
         onClickTextField,
+        aria,
       }) => (
         <StringField
           {...props}
+          aria={aria}
           cursorPosition={cursorPosition}
           focused={focused}
           id={id}
@@ -109,10 +111,12 @@ export const IntellisenseExpressionField: React.FC<FieldProps<string>> = (props)
         onKeyDownTextField,
         onKeyUpTextField,
         onClickTextField,
+        aria,
       }) => (
         <div ref={setContainerElm}>
           <StringField
             {...props}
+            aria={aria}
             cursorPosition={cursorPosition}
             focused={focused}
             id={id}
@@ -161,9 +165,10 @@ export const IntellisenseNumberField: React.FC<FieldProps<string>> = (props) =>
       onBlur={props.onBlur}
       onChange={onChange}
     >
-      {({ textFieldValue, focused, onValueChanged, onKeyDownTextField, onKeyUpTextField, onClickTextField }) => (
+      {({ textFieldValue, focused, onValueChanged, onKeyDownTextField, onKeyUpTextField, onClickTextField, aria }) => (
         <NumberField
           {...props}
+          aria={aria}
           focused={focused}
           id={id}
           value={textFieldValue}

diff --git a/Composer/packages/adaptive-form/src/components/fields/OpenObjectField/ObjectItem.tsx b/Composer/packages/adaptive-form/src/components/fields/OpenObjectField/ObjectItem.tsx
@@ -34,6 +34,7 @@ const ObjectItem: React.FC<ObjectItemProps> = ({
   onChange,
   onNameChange,
   onDelete,
+  required,
   ...rest
 }) => {
   const initialName = useMemo(() => originalName, []);
@@ -76,6 +77,7 @@ const ObjectItem: React.FC<ObjectItemProps> = ({
           label={formatMessage('Key')}
           name="key"
           placeholder={initialName || formatMessage('Add a new key')}
+          required={required}
           schema={{ type: 'string' }}
           uiOptions={{}}
           value={name}
@@ -89,6 +91,7 @@ const ObjectItem: React.FC<ObjectItemProps> = ({
           label={formatMessage('Value')}
           name="value"
           placeholder={placeholder}
+          required={required}
           schema={schema}
           value={value}
           onChange={onChange}

diff --git a/Composer/packages/adaptive-form/src/components/fields/OpenObjectField/OpenObjectField.tsx b/Composer/packages/adaptive-form/src/components/fields/OpenObjectField/OpenObjectField.tsx
@@ -43,6 +43,7 @@ const OpenObjectField: React.FC<FieldProps<{
             formData={value}
             id={`${id}.value`}
             name={propertyName}
+            required={required}
             schema={typeof additionalProperties === 'object' ? additionalProperties : {}}
             uiOptions={uiOptions.properties?.additionalProperties || {}}
             value={propertyValue}

diff --git a/Composer/packages/adaptive-form/src/components/fields/SelectField.tsx b/Composer/packages/adaptive-form/src/components/fields/SelectField.tsx
@@ -62,6 +62,7 @@ export const SelectField: React.FC<FieldProps<string | number>> = function Selec
     <>
       <FieldLabel description={description} helpLink={uiOptions?.helpLink} id={id} label={label} required={required} />
       <Dropdown
+        aria-required={required}
         ariaLabel={label || formatMessage('selection field')}
         data-testid="SelectFieldDropdown"
         errorMessage={error as string}

diff --git a/Composer/packages/adaptive-form/src/components/fields/StringField.tsx b/Composer/packages/adaptive-form/src/components/fields/StringField.tsx
@@ -26,6 +26,7 @@ export const StringField: React.FC<FieldProps<string>> = function StringField(pr
     focused,
     cursorPosition,
     hasIcon,
+    aria,
   } = props;
 
   const textFieldRef = React.createRef<ITextField>();
@@ -64,6 +65,8 @@ export const StringField: React.FC<FieldProps<string>> = function StringField(pr
     <>
       <FieldLabel description={description} helpLink={uiOptions?.helpLink} id={id} label={label} required={required} />
       <TextField
+        {...aria}
+        aria-required={required}
         ariaLabel={label || formatMessage('string field')}
         autoAdjustHeight={!!uiOptions?.multiline}
         autoComplete="off"

diff --git a/Composer/packages/client/src/components/EditableField.tsx b/Composer/packages/client/src/components/EditableField.tsx
@@ -9,6 +9,7 @@ import { mergeStyleSets } from '@fluentui/style-utilities';
 import { IconButton } from '@fluentui/react/lib/Button';
 import { IIconProps } from '@fluentui/react/lib/Icon';
 import { Announced } from '@fluentui/react/lib/Announced';
+import formatMessage from 'format-message';
 
 import { FieldConfig, useForm } from '../hooks/useForm';
 import { useAfterRender } from '../hooks/useAfterRender';
@@ -296,6 +297,7 @@ const EditableField: React.FC<EditableFieldProps> = (props) => {
         />
         {enableIcon && (
           <IconButton
+            aria-label={formatMessage('Remove item {name}', { name: formData.value })}
             iconProps={{
               iconName: iconProps?.iconName,
               styles: mergeStyleSets(

diff --git a/Composer/packages/client/src/components/GetStarted/GetStarted.tsx b/Composer/packages/client/src/components/GetStarted/GetStarted.tsx
@@ -48,6 +48,7 @@ export const GetStarted: React.FC<GetStartedProps> = (props) => {
 
   return (
     <Panel
+      closeButtonAriaLabel={formatMessage('Close Get Started panel')}
       customWidth="395px"
       isBlocking={false}
       isOpen={props.isOpen}

diff --git a/Composer/packages/client/src/components/MainContent.tsx b/Composer/packages/client/src/components/MainContent.tsx
diff --git a/Composer/packages/client/src/components/MultiLanguage/AddLanguageModal.tsx b/Composer/packages/client/src/components/MultiLanguage/AddLanguageModal.tsx
@@ -140,6 +140,7 @@ const AddLanguageModal: React.FC<IAddLanguageModalProps> = (props) => {
   }, [currentLanguages]);
 
   const searchBoxLabelId = useId('search-box-label');
+  const searchBoxId = useId('search-box');
   const translationsLabelId = useId('translations-label');
 
   const onSearch = (_e, newValue) => {
@@ -196,10 +197,13 @@ const AddLanguageModal: React.FC<IAddLanguageModalProps> = (props) => {
                 )}
               />
             </div>
-            <Label id={searchBoxLabelId}>{MultiLanguagesDialog.ADD_DIALOG.selectionTitle}</Label>
+            <Label htmlFor={searchBoxId} id={searchBoxLabelId}>
+              {MultiLanguagesDialog.ADD_DIALOG.selectionTitle}
+            </Label>
             <SearchBox
               disableAnimation
               aria-labelledBy={searchBoxLabelId}
+              id={searchBoxId}
               placeholder={MultiLanguagesDialog.ADD_DIALOG.searchPlaceHolder}
               styles={{ root: { width: 300 } }}
               onChange={onSearch}

diff --git a/Composer/packages/client/src/components/PluginHost/PluginHost.tsx b/Composer/packages/client/src/components/PluginHost/PluginHost.tsx
@@ -40,6 +40,7 @@ interface PluginHostProps {
   pluginType: PluginType;
   bundleId: string;
   projectId: string;
+  role?: string;
 }
 
 /** Binds closures around Composer client code to plugin iframe's window object */
@@ -136,7 +137,7 @@ export const PluginHost: React.FC<PluginHostProps> = (props) => {
   }, [shell]);
 
   return (
-    <div css={containerStyles}>
+    <div css={containerStyles} role={props.role}>
       <iframe
         key={`${pluginName}.${bundleId}.${pluginType}`}
         ref={targetRef}

diff --git a/Composer/packages/client/src/components/ProjectTree/ExpandableNode.tsx b/Composer/packages/client/src/components/ProjectTree/ExpandableNode.tsx
@@ -76,7 +76,7 @@ export const ExpandableNode = ({
       onKeyDown={handleKey}
     >
       {/* eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions, jsx-a11y/no-noninteractive-tabindex */}
-      <li css={listItemStyle(isActive, isExpanded, children != null)} data-testid={'summaryTag'}>
+      <li css={listItemStyle(isActive, isExpanded, children != null)} data-testid={'summaryTag'} role="treeitem">
         {summary}
       </li>
       {children != null && isExpanded && <div role="group">{children}</div>}

diff --git a/Composer/packages/client/src/components/ProjectTree/treeItem.tsx b/Composer/packages/client/src/components/ProjectTree/treeItem.tsx
@@ -427,7 +427,7 @@ export const TreeItem: React.FC<ITreeItemProps> = ({
 }) => {
   const [thisItemSelected, setThisItemSelected] = useState<boolean>(false);
 
-  const ariaLabel = `${objectNames[itemType]()} ${link.displayName}`;
+  const ariaLabel = `${link.displayName} ${objectNames[itemType]()}`;
   const dataTestId = `${dialogName ?? '$Root'}_${link.displayName}`;
   const isExternal = Boolean(link.href);
 
@@ -470,8 +470,18 @@ export const TreeItem: React.FC<ITreeItemProps> = ({
             tabIndex={0}
             onBlur={item.onBlur}
             onFocus={item.onFocus}
+            onKeyDown={
+              onSelect
+                ? (e) => {
+                    if (e.key === 'Enter') {
+                      onSelect(link);
+                      e.stopPropagation();
+                    }
+                  }
+                : undefined
+            }
           >
-            <div css={projectTreeItem} role="presentation" tabIndex={-1}>
+            <div css={projectTreeItem} role="presentation">
               {item.itemType != null && TreeIcons[item.itemType] != null && (
                 <Icon
                   iconName={TreeIcons[item.itemType]}
@@ -482,7 +492,6 @@ export const TreeItem: React.FC<ITreeItemProps> = ({
                       outline: 'none',
                     },
                   }}
-                  tabIndex={-1}
                 />
               )}
               <span className={'treeItem-text'} css={itemName(maxTextWidth)}>
@@ -564,28 +573,15 @@ export const TreeItem: React.FC<ITreeItemProps> = ({
 
   return (
     <div
-      aria-label={ariaLabel}
       css={navContainer(isMenuOpen, isActive, thisItemSelected, textWidth - overflowIconWidthOnHover, isBroken)}
       data-testid={dataTestId}
-      role={role}
-      tabIndex={0}
       onClick={
         onSelect
           ? () => {
               onSelect(link);
             }
           : undefined
       }
-      onKeyDown={
-        onSelect
-          ? (e) => {
-              if (e.key === 'Enter') {
-                onSelect(link);
-                e.stopPropagation();
-              }
-            }
-          : undefined
-      }
     >
       <OverflowSet
         css={overflowSet(isBroken)}

diff --git a/Composer/packages/client/src/components/WebChat/WebChatHeader.tsx b/Composer/packages/client/src/components/WebChat/WebChatHeader.tsx
@@ -4,10 +4,11 @@
 /** @jsx jsx */
 import { jsx } from '@emotion/core';
 import React from 'react';
-import { ActionButton, DefaultButton, IButtonStyles, IconButton } from '@fluentui/react/lib/Button';
+import { ActionButton, IButtonStyles, IconButton } from '@fluentui/react/lib/Button';
 import { IContextualMenuProps } from '@fluentui/react/lib/ContextualMenu';
 import formatMessage from 'format-message';
 import { CommunicationColors, NeutralColors } from '@fluentui/theme';
+import { SplitButton } from '@bfc/ui-shared';
 
 import { RestartOption } from './types';
 
@@ -27,7 +28,7 @@ const customButtonStyles: IButtonStyles = {
   splitButtonDivider: {
     backgroundColor: `${NeutralColors.gray50}`,
     width: 1,
-    right: 26,
+    right: 28,
     position: 'absolute',
     top: 4,
     bottom: 4,
@@ -112,8 +113,7 @@ export const WebChatHeader: React.FC<WebChatHeaderProps> = ({
           onClick={onCloseWebChat}
         />
       </h4>
-      <DefaultButton
-        split
+      <SplitButton
         aria-roledescription="split button"
         ariaLabel="restart-conversation"
         disabled={isRestartButtonDisabled}

diff --git a/Composer/packages/client/src/pages/botProject/create-publish-profile/ProfileFormDialog.tsx b/Composer/packages/client/src/pages/botProject/create-publish-profile/ProfileFormDialog.tsx
@@ -101,7 +101,7 @@ export const ProfileFormDialog: React.FC<ProfileFormDialogProps> = (props) => {
             />
             <DropdownField
               required
-              ariaLabel={formatMessage('The target where you publish your bot')}
+              ariaLabel={formatMessage('Publishing target: the target where you publish your bot')}
               defaultSelectedKey={targetType}
               label={formatMessage('Publishing target')}
               options={targetTypes}

diff --git a/Composer/packages/client/src/pages/design/DebugPanel/DebugPanel.tsx b/Composer/packages/client/src/pages/design/DebugPanel/DebugPanel.tsx
@@ -11,6 +11,7 @@ import { FontSizes } from '@fluentui/theme';
 import { Resizable } from 're-resizable';
 import { Label } from '@fluentui/react/lib/Label';
 import { useRecoilValue } from 'recoil';
+import { useId } from '@fluentui/react-hooks';
 
 import TelemetryClient from '../../../telemetry/TelemetryClient';
 import { debugPanelExpansionState, debugPanelActiveTabState, dispatcherState } from '../../../recoilModel';
@@ -37,6 +38,7 @@ export const DebugPanel: React.FC = () => {
   const isPanelExpanded = useRecoilValue(debugPanelExpansionState);
   const activeTab = useRecoilValue(debugPanelActiveTabState);
   const pivotRef = useRef<IPivot>(null);
+  const contentId = useId('debug-panel-content');
 
   useEffect(() => {
     if (isPanelExpanded) {
@@ -170,15 +172,20 @@ export const DebugPanel: React.FC = () => {
             {headerPivot}
           </div>
           <div
+            aria-controls={contentId}
+            aria-expanded={isPanelExpanded ? 'true' : 'false'}
+            aria-label={formatMessage('Toggle debug panel')}
             css={{ flexGrow: 1, cursor: 'pointer', outline: 'none' }}
             data-testid="header__blank"
             role="button"
-            tabIndex={0}
+            tabIndex={-1}
             onClick={onDebugPaneClick}
             onKeyPress={onDebugPaneClick}
           />
           <div css={rightBarStyle} data-testid="header__right">
             <IconButton
+              aria-controls={contentId}
+              aria-expanded={isPanelExpanded ? 'true' : 'false'}
               iconProps={{ iconName: isPanelExpanded ? 'ChevronDown' : 'ChevronUp' }}
               styles={{ root: { height: '100%' } }}
               title={isPanelExpanded ? formatMessage('Collapse Debug Panel') : formatMessage('Expand Debug Panel')}
@@ -192,7 +199,13 @@ export const DebugPanel: React.FC = () => {
             />
           </div>
         </div>
-        <div css={debugPaneContentStyle} data-testid="debug-panel__content">
+        <div
+          aria-label={formatMessage('Debug panel tab content')}
+          css={debugPaneContentStyle}
+          data-testid="debug-panel__content"
+          id={contentId}
+          role="region"
+        >
           {debugExtensions.map((debugTabs) => {
             const { ContentWidget } = debugTabs;
             return (

diff --git a/...ges/client/src/pages/design/DebugPanel/TabExtensions/DiagnosticsTab/DiagnosticFilters.tsx b/...ges/client/src/pages/design/DebugPanel/TabExtensions/DiagnosticsTab/DiagnosticFilters.tsx
@@ -149,6 +149,7 @@ export const DiagnosticsFilters: React.FC<DiagnosticsFiltersProps> = (props) =>
         }}
       >
         <DropdownWithAllOption
+          aria-label={formatMessage('Select bots to display problems for')}
           optionAll={optionAll}
           options={projectSelectorOptions}
           placeholder={formatMessage('Select bots')}

diff --git a/Composer/packages/client/src/pages/design/DesignPage.tsx b/Composer/packages/client/src/pages/design/DesignPage.tsx
@@ -55,7 +55,7 @@ const DesignPage: React.FC<RouteComponentProps<{ dialogId: string; projectId: st
           </div>
         </div>
 
-        <div css={contentWrapper} role="main">
+        <div css={contentWrapper}>
           <CommandBar projectId={activeBot} />
           <Conversation css={splitPaneContainer}>
             <div css={splitPaneWrapper}>

diff --git a/Composer/packages/client/src/pages/knowledge-base/table-view.tsx b/Composer/packages/client/src/pages/knowledge-base/table-view.tsx
@@ -353,6 +353,7 @@ const TableView: React.FC<TableViewProps> = (props) => {
       const onRenderItem = (item: IOverflowSetItemProps): JSX.Element => {
         return (
           <IconButton
+            aria-Label={formatMessage('Edit knowledge base name')}
             menuIconProps={{ iconName: 'Edit' }}
             styles={{
               root: {

diff --git a/Composer/packages/client/src/pages/plugin/PluginPageContainer.tsx b/Composer/packages/client/src/pages/plugin/PluginPageContainer.tsx
@@ -15,7 +15,7 @@ const PluginPageContainer: React.FC<RouteComponentProps<{ pluginId: string; bund
     return null;
   }
 
-  return <PluginHost bundleId={bundleId} pluginName={pluginId} pluginType="page" projectId={projectId} />;
+  return <PluginHost bundleId={bundleId} pluginName={pluginId} pluginType="page" projectId={projectId} role="main" />;
 };
 
 export { PluginPageContainer };