fix: update a lot of screen-reader text

Composer/packages/client/src/components/CollapsableWrapper.tsx

@@ -29,7 +29,7 @@ export const CollapsableWrapper: React.FC<CollapsableComponentProps> = (props) =
     <div css={containerStyle}>
       <div data-is-focusable aria-label={title} css={header}>
         <IconButton
-          ariaLabel={isCollapsed ? formatMessage('Expand') : formatMessage('Collapse')}
+          ariaLabel={isCollapsed ? `${title}, ${formatMessage('Expand')}` : `${title}, ${formatMessage('Collapse')}`}
           iconProps={{ iconName: isCollapsed ? 'ChevronRight' : 'ChevronDown' }}
           styles={{ root: { color: NeutralColors.gray150 } }}
           onClick={() => setIsCollapsed(!isCollapsed)}

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

@@ -18,11 +18,6 @@ import { isChildDialogLinkSelected, doesLinkMatch } from './helpers';
 import { TreeItem } from './treeItem';
 import { ProjectTreeOptions, TreeLink } from './types';
 
-const icons = {
-  BOT: 'CubeShape',
-  EXTERNAL_SKILL: 'Globe',
-};
-
 const headerCSS = (label: string) => css`
   margin-top: -6px;
   width: 100%;
@@ -159,10 +154,10 @@ export const ProjectHeader = (props: ProjectHeaderProps) => {
     <span key={name} css={headerCSS('bot-header')} data-testid={`BotHeader-${name}`}>
       <TreeItem
         hasChildren={!isRemote}
-        icon={isRemote ? icons.EXTERNAL_SKILL : icons.BOT}
         isActive={doesLinkMatch(link, selectedLink)}
         isChildSelected={isChildDialogLinkSelected(link, selectedLink)}
         isMenuOpen={isMenuOpen}
+        itemType={isRemote ? 'external skill' : 'bot'}
         link={link}
         menu={options.showMenu ? menu : []}
         menuOpenCallback={setMenuOpen}

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

@@ -53,17 +53,6 @@ const focusStyle = css`
   position: relative;
 `;
 
-const icons = {
-  TRIGGER: 'LightningBolt',
-  DIALOG: 'Org',
-  FORM_DIALOG: 'Table',
-  FORM_FIELD: 'Variable2', // x in parentheses
-  FORM_TRIGGER: 'TriggerAuto', // lightning bolt with gear
-  FILTER: 'Filter',
-  LG: 'Robot',
-  LU: 'People',
-};
-
 const tree = css`
   height: calc(100% - 45px);
   overflow-y: auto;
@@ -287,10 +276,10 @@ export const ProjectTree: React.FC<Props> = ({
         >
           <TreeItem
             hasChildren
-            icon={isFormDialog ? icons.FORM_DIALOG : icons.DIALOG}
             isActive={doesLinkMatch(dialogLink, selectedLink)}
             isChildSelected={isChildTriggerLinkSelected(dialogLink, selectedLink)}
             isMenuOpen={isMenuOpen}
+            itemType={isFormDialog ? 'form dialog' : 'dialog'}
             link={dialogLink}
             menu={options.showMenu ? menu : options.showQnAMenu ? [QnAMenuItem] : []}
             menuOpenCallback={setMenuOpen}
@@ -320,9 +309,9 @@ export const ProjectTree: React.FC<Props> = ({
       <span key={'common'} ref={null} css={headerCSS('dialog-header')} data-testid={`DialogHeader-Common`}>
         <TreeItem
           hasChildren
-          icon={icons.DIALOG}
           isActive={doesLinkMatch(dialogLink, selectedLink)}
           isMenuOpen={isMenuOpen}
+          itemType={'dialog'}
           link={dialogLink}
           menuOpenCallback={setMenuOpen}
           padLeft={depth * LEVEL_PADDING}
@@ -363,9 +352,9 @@ export const ProjectTree: React.FC<Props> = ({
         key={`${item.id}_${item.index}`}
         dialogName={dialog.displayName}
         extraSpace={INDENT_PER_LEVEL}
-        icon={icons.TRIGGER}
         isActive={doesLinkMatch(link, selectedLink)}
         isMenuOpen={isMenuOpen}
+        itemType={'trigger'}
         link={link}
         marginLeft={depth * INDENT_PER_LEVEL}
         menu={
@@ -440,6 +429,7 @@ export const ProjectTree: React.FC<Props> = ({
           hasChildren
           isMenuOpen={isMenuOpen}
           isSubItemActive={false}
+          itemType={'trigger group'}
           link={link}
           menuOpenCallback={setMenuOpen}
           showErrors={options.showErrors}
@@ -516,9 +506,9 @@ export const ProjectTree: React.FC<Props> = ({
       <TreeItem
         key={`lg_${item.id}`}
         extraSpace={INDENT_PER_LEVEL}
-        icon={icons.DIALOG}
         isActive={doesLinkMatch(link, selectedLink)}
         isMenuOpen={isMenuOpen}
+        itemType={'dialog'}
         link={link}
         menu={[]}
         menuOpenCallback={setMenuOpen}
@@ -545,9 +535,9 @@ export const ProjectTree: React.FC<Props> = ({
       <TreeItem
         key={`lg_${item.id}`}
         extraSpace={INDENT_PER_LEVEL}
-        icon={icons.DIALOG}
         isActive={doesLinkMatch(link, selectedLink)}
         isMenuOpen={isMenuOpen}
+        itemType={'dialog'}
         link={link}
         menu={[]}
         menuOpenCallback={setMenuOpen}
@@ -581,9 +571,9 @@ export const ProjectTree: React.FC<Props> = ({
       <TreeItem
         key={`lu_${item.id}`}
         extraSpace={INDENT_PER_LEVEL}
-        icon={icons.DIALOG}
         isActive={doesLinkMatch(link, selectedLink)}
         isMenuOpen={isMenuOpen}
+        itemType={'dialog'}
         link={link}
         menu={[]}
         menuOpenCallback={setMenuOpen}
@@ -610,9 +600,9 @@ export const ProjectTree: React.FC<Props> = ({
       <TreeItem
         key={`lu_${item.id}`}
         extraSpace={INDENT_PER_LEVEL}
-        icon={icons.DIALOG}
         isActive={doesLinkMatch(link, selectedLink)}
         isMenuOpen={isMenuOpen}
+        itemType={'dialog'}
         link={link}
         menu={[]}
         menuOpenCallback={setMenuOpen}
@@ -797,10 +787,10 @@ export const ProjectTree: React.FC<Props> = ({
           aria-label={formatMessage(
             `{
             dialogNum, plural,
-                =0 {No bots}
-                =1 {One bot}
-              other {# bots}
-            } have been found.
+                =0 {No bots have}
+                =1 {One bot has}
+              other {# bots have}
+            } been found.
             {
               dialogNum, select,
                   0 {}

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

@@ -225,6 +225,44 @@ const calloutRootStyle = css`
   padding: 11px;
 `;
 
+type TreeObject =
+  | 'bot'
+  | 'dialog'
+  | 'trigger' // basic ProjectTree elements
+  | 'trigger group'
+  | 'form dialog'
+  | 'form field'
+  | 'form trigger' // used with form dialogs
+  | 'lg'
+  | 'lu' // used on other pages
+  | 'external skill'; // used with multi-bot authoring
+
+const icons: { [key in TreeObject]: string } = {
+  bot: 'CubeShape',
+  dialog: 'Org',
+  trigger: 'LightningBolt',
+  'trigger group': '',
+  'form dialog': 'Table',
+  'form field': 'Variable2', // x in parentheses
+  'form trigger': 'TriggerAuto', // lightning bolt with gear
+  lg: 'Robot',
+  lu: 'People',
+  'external skill': 'Globe',
+};
+
+const objectNames: { [key in TreeObject]: () => string } = {
+  trigger: () => formatMessage('Trigger'),
+  dialog: () => formatMessage('Dialog'),
+  'trigger group': () => formatMessage('Trigger group'),
+  'form dialog': () => formatMessage('Form dialog'),
+  'form field': () => formatMessage('Form field'),
+  'form trigger': () => formatMessage('Form trigger'),
+  lg: () => formatMessage('LG'),
+  lu: () => formatMessage('LU'),
+  bot: () => formatMessage('Bot'),
+  'external skill': () => formatMessage('External skill'),
+};
+
 // -------------------- TreeItem -------------------- //
 
 type ITreeItemProps = {
@@ -233,7 +271,7 @@ type ITreeItemProps = {
   isChildSelected?: boolean;
   isSubItemActive?: boolean;
   onSelect?: (link: TreeLink) => void;
-  icon?: string;
+  itemType: TreeObject;
   dialogName?: string;
   textWidth?: number;
   extraSpace?: number;
@@ -372,7 +410,7 @@ export const TreeItem: React.FC<ITreeItemProps> = ({
   link,
   isActive = false,
   isChildSelected = false,
-  icon,
+  itemType,
   dialogName,
   onSelect,
   textWidth = 100,
@@ -387,7 +425,9 @@ export const TreeItem: React.FC<ITreeItemProps> = ({
   role,
 }) => {
   const [thisItemSelected, setThisItemSelected] = useState<boolean>(false);
-  const a11yLabel = `${dialogName ?? '$Root'}_${link.displayName}`;
+
+  const ariaLabel = `${objectNames[itemType]()} ${link.displayName}`;
+  const dataTestId = `${dialogName ?? '$Root'}_${link.displayName}`;
 
   const overflowMenu = menu.map(renderTreeMenuItem(link));
 
@@ -422,16 +462,16 @@ export const TreeItem: React.FC<ITreeItemProps> = ({
       return (
         <div
           data-is-focusable
-          aria-label={`${item.displayName} ${warningContent} ${errorContent}`}
+          aria-label={`${ariaLabel} ${warningContent} ${errorContent}`}
           css={projectTreeItemContainer}
           tabIndex={0}
           onBlur={item.onBlur}
           onFocus={item.onFocus}
         >
           <div css={projectTreeItem} role="presentation" tabIndex={-1}>
-            {item.icon != null && (
+            {item.itemType != null && (
               <Icon
-                iconName={item.icon}
+                iconName={icons[item.itemType]}
                 styles={{
                   root: {
                     width: '12px',
@@ -471,7 +511,12 @@ export const TreeItem: React.FC<ITreeItemProps> = ({
       return (overflowItems: IContextualMenuItem[] | undefined) => {
         if (overflowItems == null) return null;
         return (
-          <TooltipHost content={moreLabel} directionalHint={DirectionalHint.rightCenter} styles={moreButtonContainer}>
+          <TooltipHost
+            content={moreLabel}
+            directionalHint={DirectionalHint.rightCenter}
+            styles={moreButtonContainer}
+            tabIndex={0}
+          >
             <IconButton
               ariaLabel={moreLabel}
               className="dialog-more-btn"
@@ -508,7 +553,7 @@ export const TreeItem: React.FC<ITreeItemProps> = ({
 
   return (
     <div
-      aria-label={a11yLabel}
+      aria-label={ariaLabel}
       css={navContainer(
         isMenuOpen,
         isActive,
@@ -518,7 +563,7 @@ export const TreeItem: React.FC<ITreeItemProps> = ({
         padLeft,
         marginLeft
       )}
-      data-testid={a11yLabel}
+      data-testid={dataTestId}
       role={role}
       tabIndex={0}
       onClick={() => {
@@ -530,7 +575,7 @@ export const TreeItem: React.FC<ITreeItemProps> = ({
         }
       }}
     >
-      <div style={{ minWidth: `${spacerWidth}px` }}></div>
+      <div style={{ minWidth: `${spacerWidth}px` }} />
       <OverflowSet
         //In 8.0 the OverflowSet will no longer be wrapped in a FocusZone
         //remove this at that time
@@ -540,7 +585,8 @@ export const TreeItem: React.FC<ITreeItemProps> = ({
         items={[
           {
             key: linkString,
-            icon: isBroken ? 'RemoveLink' : icon,
+            icon: isBroken ? 'RemoveLink' : icons[itemType],
+            itemType,
             ...link,
           },
         ]}

Composer/packages/client/src/pages/botProject/adapters/ExternalAdapterSettings.tsx

@@ -99,14 +99,18 @@ const ExternalAdapterSettings = (props: Props) => {
                   styles={{ root: { color: SharedColors.green10, fontSize: '18px' } }}
                 />
               ) : (
-                <Link key={key} onClick={() => openModal(key, true, packageName)}>
+                <Link
+                  key={key}
+                  ariaLabel={formatMessage('Configure {title}', { title })}
+                  onClick={() => openModal(key, true, packageName)}
+                >
                   {formatMessage('Configure')}
                 </Link>
               )}
             </div>
             <div css={tableRowItem(columnSizes[2])} role="cell">
               <Toggle
-                ariaLabel={formatMessage('Enable')}
+                ariaLabel={formatMessage('{title} connection', { title })}
                 checked={keyEnabled}
                 data-testid={`toggle_${key}`}
                 disabled={!keyConfigured}

Composer/packages/client/src/pages/design/DebugPanel/TabExtensions/DiagnosticsTab/DiagnosticsStatus.tsx

@@ -7,6 +7,7 @@ import { DefaultButton } from 'office-ui-fabric-react/lib/Button';
 import { useSetRecoilState } from 'recoil';
 import { FontSizes, SharedColors } from '@uifabric/fluent-theme';
 import { FontIcon } from 'office-ui-fabric-react/lib/Icon';
+import formatMessage from 'format-message';
 
 import { debugPanelExpansionState, debugPanelActiveTabState } from '../../../../../recoilModel';
 import { DiagnosticsTabKey } from '../types';
@@ -23,12 +24,33 @@ export const DiagnosticsStatus = () => {
 
   if (!errorsCount && !warningsCount) return null;
 
+  const errorLabel = formatMessage(
+    `{
+    errorsCount, plural,
+        =0 {No errors}
+        =1 {One error}
+      other {# errors}
+    }`,
+    { errorsCount }
+  );
+
+  const warningLabel = formatMessage(
+    `{
+    warningsCount, plural,
+        =0 {No warnings}
+        =1 {One warning}
+      other {# warnings}
+    }`,
+    { warningsCount }
+  );
+
   return (
     <div
       css={{ height: '100%', display: 'flex', alignItems: 'center', paddingLeft: '8px' }}
       data-testid="diagnostics-tab-header--collapsed"
     >
       <DefaultButton
+        ariaLabel={`${errorLabel} ${warningLabel}`}
         styles={{
           root: {
             height: '36px',

Composer/packages/client/src/pages/setting/app-settings/SettingToggle.tsx

@@ -39,6 +39,7 @@ const SettingToggle: React.FC<ISettingToggleProps> = (props) => {
       </div>
       {!hideToggle && (
         <Toggle
+          ariaLabel={`${title} ${description}`}
           checked={!!checked}
           data-testid={id}
           id={id || uniqueId}