From 97363c76c7d3c7aa706becfd86be476f3a402809 Mon Sep 17 00:00:00 2001
From: Eugene Olonov <EOlonov@gmail.com>
Date: Thu, 10 Feb 2022 10:55:24 -0800
Subject: [PATCH] a11y: fix reamining setting controls empty labels

Fixed the following issues with Settings controls:
- Make Bot allowed caller controls more descriptive so screen reader users can distinguish controls from different rows
- Fix empty label for the Channels publishing profile dropdown
- Fix keyboard interractions for the Channels publishing profiles dropdown
---
 .../src/pages/botProject/AllowedCallers.tsx   | 21 ++++++++++++++-----
 .../pages/botProject/adapters/ABSChannels.tsx |  9 +++++++-
 2 files changed, 24 insertions(+), 6 deletions(-)

diff --git a/Composer/packages/client/src/pages/botProject/AllowedCallers.tsx b/Composer/packages/client/src/pages/botProject/AllowedCallers.tsx
index 096efaa400..9989e1f8cf 100644
--- a/Composer/packages/client/src/pages/botProject/AllowedCallers.tsx
+++ b/Composer/packages/client/src/pages/botProject/AllowedCallers.tsx
@@ -57,13 +57,14 @@ const ItemContainer = styled.div({
 });
 
 type ItemProps = {
+  index: number;
   value: string;
   onBlur: () => void;
   onChange: (event: React.FormEvent<HTMLInputElement | HTMLTextAreaElement>, newValue?: string) => void;
   onRemove: () => void;
 };
 
-const Item = React.memo(({ value, onBlur, onChange, onRemove }: ItemProps) => {
+const Item = React.memo(({ index, value, onBlur, onChange, onRemove }: ItemProps) => {
   const itemRef = React.useRef<ITextField | null>(null);
   const didMount = React.useRef<boolean>(false);
 
@@ -75,8 +76,9 @@ const Item = React.memo(({ value, onBlur, onChange, onRemove }: ItemProps) => {
   }, []);
 
   return (
-    <Stack horizontal verticalAlign={'center'}>
+    <Stack horizontal role="listitem" verticalAlign={'center'}>
       <Input
+        ariaLabel={formatMessage('Item {index}: Allowed caller bot App ID', { index })}
         componentRef={(ref) => (itemRef.current = ref)}
         data-testid="addCallerInputField"
         styles={textFieldStyles}
@@ -85,7 +87,7 @@ const Item = React.memo(({ value, onBlur, onChange, onRemove }: ItemProps) => {
         onChange={onChange}
       />
       <ActionButton
-        aria-label={formatMessage('Remove item')}
+        ariaLabel={formatMessage('Remove item {index}', { index })}
         data-testid="addCallerRemoveBtn"
         styles={actionButton}
         onClick={onRemove}
@@ -177,9 +179,18 @@ export const AllowedCallers: React.FC<Props> = ({ projectId }) => {
           }
         )}
       </div>
-      <ItemContainer>
+      <ItemContainer role="list">
         {allowedCallers.map(({ value, id }, index) => {
-          return <Item key={id} value={value} onBlur={onBlur} onChange={onChange(index)} onRemove={onRemove(index)} />;
+          return (
+            <Item
+              key={id}
+              index={index + 1}
+              value={value}
+              onBlur={onBlur}
+              onChange={onChange(index)}
+              onRemove={onRemove(index)}
+            />
+          );
         })}
       </ItemContainer>
       {!allowedCallers.length && (
diff --git a/Composer/packages/client/src/pages/botProject/adapters/ABSChannels.tsx b/Composer/packages/client/src/pages/botProject/adapters/ABSChannels.tsx
index d69995998f..2ca9abf4bb 100644
--- a/Composer/packages/client/src/pages/botProject/adapters/ABSChannels.tsx
+++ b/Composer/packages/client/src/pages/botProject/adapters/ABSChannels.tsx
@@ -94,6 +94,7 @@ export const ABSChannels: React.FC<RuntimeSettingsProps> = (props) => {
   const { setApplicationLevelError, requireUserLogin } = useRecoilValue(dispatcherState);
   const currentUser = useRecoilValue(currentUserState);
   const isAuthenticated = useRecoilValue(isAuthenticatedState);
+  const [selectedConnectionKey, setSelectedConnectionKey] = useState<string>('');
 
   /* Copied from Azure Publishing extension */
   const getSubscriptions = async (token: string): Promise<Array<Subscription>> => {
@@ -115,11 +116,15 @@ export const ABSChannels: React.FC<RuntimeSettingsProps> = (props) => {
     }
   };
 
-  const onSelectProfile = async (_, opt) => {
+  const isDropdownFocusEvent = (event: React.FormEvent<HTMLDivElement>) => event.type === 'focus';
+
+  const onSelectProfile = async (ev, opt) => {
     if (opt.key === 'manageProfiles') {
+      if (isDropdownFocusEvent(ev)) return;
       TelemetryClient.track('ConnectionsAddNewProfile');
       navigateTo(`/bot/${projectId}/publish/all/#addNewPublishProfile`);
     } else {
+      setSelectedConnectionKey(opt.key);
       // identify the publishing profile in the list
       const profile = publishTargets?.find((p) => p.name === opt.key);
       if (profile) {
@@ -593,9 +598,11 @@ export const ABSChannels: React.FC<RuntimeSettingsProps> = (props) => {
       )}
       <div>
         <Dropdown
+          ariaLabel={formatMessage('Select publishing profile')}
           data-testid="publishTargetDropDown"
           options={publishTargetOptions}
           placeholder={formatMessage('Select publishing profile')}
+          selectedKey={selectedConnectionKey}
           styles={{
             root: { display: 'flex', alignItems: 'center', marginBottom: 10 },
             label: { width: 200 },