a11y: accessibility issue 2055 (#2732)

* announce filtered dialogs * use formatMessage Co-authored-by: Chris Whitten <christopher.whitten@microsoft.com>
microsoft · Apr 29, 2020 · 522fe1f · 522fe1f
1 parent dc9ec55
commit 522fe1f
Showing 1 changed file with 23 additions and 3 deletions.
diff --git a/Composer/packages/client/src/components/ProjectTree/index.tsx b/Composer/packages/client/src/components/ProjectTree/index.tsx
@@ -16,6 +16,7 @@ import cloneDeep from 'lodash/cloneDeep';
 import formatMessage from 'format-message';
 import { DialogInfo, ITrigger } from '@bfc/shared';
 import { Resizable, ResizeCallback } from 're-resizable';
+import debounce from 'lodash/debounce';
 
 import { StoreContext } from '../../store';
 import { createSelectedPath, getFriendlyName } from '../../utils';
@@ -96,7 +97,7 @@ export const ProjectTree: React.FC<IProjectTreeProps> = props => {
   const groupRef: React.RefObject<IGroupedList> = useRef(null);
   const { dialogs, dialogId, selected, onSelect, onDeleteTrigger, onDeleteDialog } = props;
   const [filter, setFilter] = useState('');
-
+  const delayedSetFilter = debounce(newValue => setFilter(newValue), 1000);
   const addMainDialogRef = useCallback(mainDialog => onboardingAddCoachMarkRef({ mainDialog }), []);
 
   const sortedDialogs = useMemo(() => {
@@ -141,14 +142,16 @@ export const ProjectTree: React.FC<IProjectTreeProps> = props => {
 
   const onFilter = (_e?: any, newValue?: string): void => {
     if (typeof newValue === 'string') {
-      setFilter(newValue);
+      delayedSetFilter(newValue);
     }
   };
 
   const handleResize: ResizeCallback = (_e, _dir, _ref, d) => {
     updateUserSettings({ dialogNavWidth: currentWidth + d.width });
   };
 
+  const res: { items: any[]; groups: IGroup[] } = createGroup(sortedDialogs, dialogId, filter);
+
   return (
     <Resizable
       size={{ width: currentWidth, height: 'auto' }}
@@ -167,8 +170,25 @@ export const ProjectTree: React.FC<IProjectTreeProps> = props => {
           onChange={onFilter}
           iconProps={{ iconName: 'Filter' }}
         />
+        <div
+          aria-live={'polite'}
+          aria-label={formatMessage(
+            `{
+            dialogNum, plural,
+                =0 {No dialogs}
+                =1 {One dialog}
+              other {# dialogs}
+            } have been found.
+            {
+              dialogNum, select,
+                  0 {}
+                other {Press down arrow key to navigate the search results}
+            }`,
+            { dialogNum: res.groups.length }
+          )}
+        />
         <GroupedList
-          {...createGroup(sortedDialogs, dialogId, filter)}
+          {...res}
           onRenderCell={onRenderCell}
           componentRef={groupRef}
           groupProps={