diff --git a/Composer/packages/client/src/components/MultiLanguage/AddLanguageModal.tsx b/Composer/packages/client/src/components/MultiLanguage/AddLanguageModal.tsx index b669d80873..f477d28bd8 100644 --- a/Composer/packages/client/src/components/MultiLanguage/AddLanguageModal.tsx +++ b/Composer/packages/client/src/components/MultiLanguage/AddLanguageModal.tsx @@ -15,6 +15,9 @@ import { Checkbox } from 'office-ui-fabric-react/lib/Checkbox'; import { Label } from 'office-ui-fabric-react/lib/Label'; import { Dropdown, IDropdownOption } from 'office-ui-fabric-react/lib/Dropdown'; import { DialogWrapper, DialogTypes } from '@bfc/ui-shared'; +import { hiddenContentStyle, mergeStyles } from 'office-ui-fabric-react/lib/Styling'; +import { Announced } from 'office-ui-fabric-react/lib/Announced'; +import { useId } from '@uifabric/react-hooks'; import { MultiLanguagesDialog } from '../../constants'; @@ -22,6 +25,8 @@ import { ILanguageFormData } from './types'; import { classNames } from './styles'; import { languageListTemplatesSorted, languageListTemplates } from './utils'; +const screenReaderOnly = mergeStyles(hiddenContentStyle); + export interface IAddLanguageModalProps { isOpen: boolean; languages: string[]; @@ -108,15 +113,16 @@ const AddLanguageModal: React.FC = (props) => { label += formatMessage(' - Current'); } return ( - +
+ +
); }); @@ -133,6 +139,9 @@ const AddLanguageModal: React.FC = (props) => { }); }, [currentLanguages]); + const searchBoxLabelId = useId('search-box-label'); + const translationsLabelId = useId('translations-label'); + const onSearch = (_e, newValue) => { setSearchKeywords(newValue.trim()); }; @@ -156,15 +165,48 @@ const AddLanguageModal: React.FC = (props) => { onChange={onDefaultLanguageChange} /> - - + +
+
{formatMessage('Bot language translations')}
+ + +
+ - {languageCheckBoxList} + +
{languageCheckBoxList}
+