a11y: add support for intellisense

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}

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,7 @@ 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}

Composer/packages/extension-client/src/types/form.ts

@@ -13,6 +13,7 @@ export type ChangeHandler<T = any> = (newValue?: T) => void;
 
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
 export interface FieldProps<T = any> {
+  aria?: Record<string, unknown>;
   className?: string;
   definitions: SchemaDefinitions | undefined;
   description?: string;

Composer/packages/intellisense/src/components/CompletionElement.tsx

@@ -6,7 +6,7 @@ import { css, jsx } from '@emotion/core';
 import { CompletionItemKind } from 'monaco-languageclient';
 import { FontIcon } from '@fluentui/react/lib/Icon';
 import { TooltipHost } from '@fluentui/react/lib/Tooltip';
-import React from 'react';
+import React, { useLayoutEffect, useRef } from 'react';
 import { CompletionItem, MarkupContent } from 'vscode-languageserver-types';
 import { DirectionalHint } from '@fluentui/react/lib/common/DirectionalHint';
 
@@ -78,17 +78,31 @@ const renderDocumentation = (documentation: string | MarkupContent | undefined)
 };
 
 export const CompletionElement = (props: {
+  id: string;
   completionItem: CompletionItem;
   isSelected: boolean;
   onClickCompletionItem: () => void;
 }) => {
-  const { completionItem, isSelected, onClickCompletionItem } = props;
-
+  const { completionItem, isSelected, onClickCompletionItem, id } = props;
+  const rootRef = useRef<HTMLDivElement>(null);
   const additionalStyles = isSelected ? styles.selectedElement : {};
 
+  useLayoutEffect(() => {
+    if (isSelected) {
+      rootRef.current?.scrollIntoView?.();
+    }
+  }, [isSelected]);
+
   const renderItem = () => {
     return (
-      <div css={[styles.completionElement, additionalStyles]} onClick={onClickCompletionItem}>
+      <div
+        id={id}
+        ref={rootRef}
+        aria-selected={isSelected}
+        css={[styles.completionElement, additionalStyles]}
+        onClick={onClickCompletionItem}
+        role="option"
+      >
         <FontIcon iconName={getIconName(completionItem.kind)} css={styles.icon} />
         <div css={styles.text}>
           {completionItem.data?.matches

Composer/packages/intellisense/src/components/CompletionList.tsx

@@ -27,18 +27,22 @@ export const CompletionList = React.forwardRef<
   HTMLDivElement,
   {
     completionItems: CompletionItem[];
+    getItemId: (index: number) => string;
     selectedItem: number;
     completionListOverride?: JSX.Element | null;
     onClickCompletionItem: (index: number) => void;
+    'aria-label': string;
+    id: string;
   }
 >((props, ref) => {
-  const { completionItems, selectedItem, completionListOverride, onClickCompletionItem } = props;
+  const { completionItems, selectedItem, completionListOverride, onClickCompletionItem, getItemId, ...rest } = props;
 
   return (
-    <div ref={ref} css={styles.completionList}>
+    <div {...rest} ref={ref} css={styles.completionList} role={completionListOverride ? 'none' : 'listbox'}>
       {completionListOverride ??
         completionItems.map((completionItem, index) => (
           <CompletionElement
+            id={getItemId(index)}
             key={index}
             completionItem={completionItem}
             isSelected={selectedItem === index}

Composer/packages/intellisense/src/components/Intellisense.tsx

@@ -1,12 +1,20 @@
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT License.
 
-import React from 'react';
+import { Announced } from '@fluentui/react';
+import React, { AriaAttributes, useCallback, useEffect, useState } from 'react';
+import formatMessage from 'format-message';
 
 import { useLanguageServer } from '../hooks/useLanguageServer';
 import { checkIsOutside } from '../utils/uiUtils';
 
 import { CompletionList } from './CompletionList';
+import { useId } from '@fluentui/react-hooks';
+
+type AriaState = Pick<AriaAttributes, 'aria-autocomplete' | 'aria-expanded' | 'aria-activedescendant' | 'aria-owns'> & {
+  role: string;
+  'aria-description': string;
+};
 
 export const Intellisense = React.memo(
   (props: {
@@ -28,6 +36,7 @@ export const Intellisense = React.memo(
       onKeyDownTextField: (event: React.KeyboardEvent<HTMLInputElement>) => void;
       onKeyUpTextField: (event: React.KeyboardEvent<HTMLInputElement>) => void;
       onClickTextField: (event: React.MouseEvent<HTMLInputElement, MouseEvent>) => void;
+      aria: AriaState;
     }) => JSX.Element;
   }) => {
     const {
@@ -53,6 +62,34 @@ export const Intellisense = React.memo(
     const mainContainerRef = React.useRef<HTMLDivElement>(null);
     const completionListRef = React.useRef<HTMLDivElement>(null);
 
+    const itemIdPrefix = useId('suggestion-item');
+    const suggestionsContainerId = useId('suggestion-items');
+    const getItemId = useCallback((index: number) => `${itemIdPrefix}-${index}`, []);
+    const [aria, setAria] = useState<AriaState>(() => ({
+      role: 'combobox',
+      'aria-owns': suggestionsContainerId,
+      'aria-autocomplete': 'list',
+      'aria-expanded': 'false',
+      'aria-activedescendant': '',
+      'aria-description': formatMessage("Start typing to get suggestions or type '=' to write an expression"),
+    }));
+
+    useEffect(() => {
+      if (showCompletionList && selectedCompletionItem >= 0) {
+        setAria({
+          ...aria,
+          'aria-expanded': 'true',
+          'aria-activedescendant': getItemId(selectedCompletionItem),
+        });
+      } else {
+        setAria({
+          ...aria,
+          'aria-expanded': 'false',
+          'aria-activedescendant': '',
+        });
+      }
+    }, [selectedCompletionItem, showCompletionList]);
+
     const completionItems = useLanguageServer(url, scopes, id, textFieldValue, cursorPosition, projectId);
     const completionListOverride =
       completionListOverrideResolver !== undefined && focused ? completionListOverrideResolver(textFieldValue) : null;
@@ -194,6 +231,18 @@ export const Intellisense = React.memo(
       setCursorPosition((event.target as HTMLInputElement).selectionStart || 0);
     };
 
+    const resultsMessage = showCompletionList
+      ? formatMessage(
+          `{
+            suggestionsCount, plural,
+              =1 {One suggestion found}
+              =0 {No suggestions found}
+              other {# suggestions found}
+          }`,
+          { suggestionsCount: completionListOverride ? 0 : completionItems.length }
+        )
+      : '';
+
     return (
       <div onKeyUp={onKeyUpMainComponent} ref={mainContainerRef} style={{ position: 'relative' }}>
         {children({
@@ -204,10 +253,14 @@ export const Intellisense = React.memo(
           onKeyDownTextField,
           onKeyUpTextField,
           onClickTextField,
+          aria,
         })}
-
+        <Announced aria-live={resultsMessage ? 'assertive' : 'off'} message={resultsMessage} />
         {completionListOverride || showCompletionList ? (
           <CompletionList
+            aria-label={formatMessage('Suggestions list')}
+            id={suggestionsContainerId}
+            getItemId={getItemId}
             ref={completionListRef}
             completionItems={completionItems}
             selectedItem={selectedCompletionItem}