fix: a11y keyboard interactions for configure and publish screens (#8844

) * Fix losing keyboard focus after modal gets closed * Prevent navigation to publishing profile tab on dropdown focus Co-authored-by: Eugene Olonov <v-evolo@microsoft.com> Co-authored-by: Andy Brown <asbrown002@gmail.com>
microsoft · Dec 16, 2021 · 24b070b · 24b070b
1 parent fa797ee
commit 24b070b
Show file tree

Hide file tree

Showing 2 changed files with 12 additions and 5 deletions.
diff --git a/Composer/packages/client/src/pages/botProject/RootBotExternalService.tsx b/Composer/packages/client/src/pages/botProject/RootBotExternalService.tsx
@@ -411,7 +411,6 @@ export const RootBotExternalService: React.FC<RootBotExternalServiceProps> = (pr
           )}
         </div>
         <PrimaryButton
-          disabled={displayManageLuis || displayManageQNA}
           styles={{ root: { width: '250px', marginTop: '15px' } }}
           text={formatMessage('Set up Language Understanding')}
           onClick={() => {
@@ -480,7 +479,6 @@ export const RootBotExternalService: React.FC<RootBotExternalServiceProps> = (pr
           />
         </div>
         <PrimaryButton
-          disabled={displayManageLuis || displayManageQNA}
           styles={{ root: { width: '250px', marginTop: '15px' } }}
           text={formatMessage('Set up QnA Maker')}
           onClick={() => {

diff --git a/Composer/packages/client/src/pages/publish/BotStatusList.tsx b/Composer/packages/client/src/pages/publish/BotStatusList.tsx
@@ -125,9 +125,18 @@ export const BotStatusList: React.FC<BotStatusListProps> = ({
     }
   };
 
-  const handleChangePublishTarget = (item: BotStatus, option?: IDropdownOption): void => {
+  const isDropdownFocusEvent = (event: React.FormEvent<HTMLDivElement>) => event.type === 'focus';
+
+  const handleChangePublishTarget = (
+    event: React.FormEvent<HTMLDivElement>,
+    item: BotStatus,
+    option?: IDropdownOption
+  ): void => {
     if (option) {
       if (option.key === 'manageProfiles') {
+        // Focus events trigger onChange when no option selected
+        // This prevents navigation on focus events
+        if (isDropdownFocusEvent(event)) return;
         onManagePublishProfile(item.id);
       } else {
         onChangePublishTarget(option.text, item);
@@ -215,14 +224,14 @@ export const BotStatusList: React.FC<BotStatusListProps> = ({
       onRender: (item: BotStatus) => {
         return (
           <Dropdown
-            defaultSelectedKey={item.publishTarget}
             options={getPublishTargetOptions(item)}
             placeholder={formatMessage('Select a publish target')}
+            selectedKey={item.publishTarget}
             styles={{
               root: { width: '100%' },
               dropdownItems: { selectors: { '.ms-Button-flexContainer': { width: '100%' } } },
             }}
-            onChange={(_, option?: IDropdownOption) => handleChangePublishTarget(item, option)}
+            onChange={(event, option?: IDropdownOption) => handleChangePublishTarget(event, item, option)}
             onRenderOption={renderDropdownOption}
           />
         );