Fix keyboard focus visibility for delete buttons in Saved Connections

localization/l10n/bundle.l10n.json

@@ -230,6 +230,12 @@
   "Advanced": "Advanced",
   "Test Connection": "Test Connection",
   "Connect to Database": "Connect to Database",
+  "Connect to {0}/{0} is the name of the connection profile": {
+    "message": "Connect to {0}",
+    "comment": [
+      "{0} is the name of the connection profile"
+    ]
+  },
   "Parameters": "Parameters",
   "Connection String": "Connection String",
   "Browse Azure": "Browse Azure",

localization/xliff/vscode-mssql.xlf

@@ -541,6 +541,10 @@
       <source xml:lang="en">Connect to server {0}?</source>
       <note>{0} is the server name</note>
     </trans-unit>
+    <trans-unit id="++CODE++ea9acac28e2644caf0dd7884eec71c1a92d541701276abf4acd5de8d04aa8af9">
+      <source xml:lang="en">Connect to {0}</source>
+      <note>{0} is the name of the connection profile</note>
+    </trans-unit>
     <trans-unit id="++CODE++6f00f15723c8b6718a4b05d9bb29188131a2a38b58f11c451e6522a7762c5ad5">
       <source xml:lang="en">Connect using profile {0}?</source>
       <note>{0} is the profile ID</note>

src/reactviews/common/locConstants.ts

@@ -200,6 +200,12 @@ export class LocConstants {
             advancedSettings: l10n.t("Advanced"),
             testConnection: l10n.t("Test Connection"),
             connectToDatabase: l10n.t("Connect to Database"),
+            connectTo: (profileName: string) =>
+                l10n.t({
+                    message: "Connect to {0}",
+                    args: [profileName],
+                    comment: ["{0} is the name of the connection profile"],
+                }),
             parameters: l10n.t("Parameters"),
             connectionString: l10n.t("Connection String"),
             browseAzure: l10n.t("Browse Azure"),

src/reactviews/pages/ConnectionDialog/connectionsListContainer.tsx

@@ -19,6 +19,7 @@ import { MouseEventHandler, useContext, useEffect, useState } from "react";
 import { ConnectionDialogContext } from "./connectionDialogStateProvider";
 import { IConnectionDialogProfile } from "../../../sharedInterfaces/connectionDialog";
 import { locConstants } from "../../common/locConstants";
+import { Keys } from "../../common/keys";
 
 const buttonContainer = "buttonContainer";
 
@@ -49,6 +50,16 @@ const useStyles = makeStyles({
                 visibility: "visible",
             },
         },
+        ":focus-within": {
+            [`& .${buttonContainer}`]: {
+                visibility: "visible",
+            },
+        },
+        ":focus": {
+            [`& .${buttonContainer}`]: {
+                visibility: "visible",
+            },
+        },
     },
     horizontalCardImage: {
         width: "50px",
@@ -177,9 +188,19 @@ export const ConnectionCard = ({
         <Card
             className={styles.connectionContainer}
             appearance="subtle"
+            tabIndex={0}
             onClick={() => {
                 context.loadConnection(connection);
-            }}>
+            }}
+            onKeyDown={(e) => {
+                if (e.key === Keys.Enter || e.key === Keys.Space) {
+                    e.preventDefault();
+                    context.loadConnection(connection);
+                }
+            }}
+            title={locConstants.connectionDialog.connectTo(displayName)}
+            role="button"
+            style={{ cursor: "pointer" }}>
             <CardHeader
                 image={<ServerRegular fontSize={20} />}
                 header={displayName}
@@ -189,8 +210,19 @@ export const ConnectionCard = ({
                             <Button
                                 icon={actionButton.icon}
                                 appearance="subtle"
-                                onClick={actionButton.onClick}
+                                onClick={(e) => {
+                                    e.stopPropagation();
+                                    actionButton.onClick(e);
+                                }}
+                                onKeyDown={(e) => {
+                                    if (e.key === Keys.Enter || e.key === Keys.Space) {
+                                        e.preventDefault();
+                                        e.stopPropagation();
+                                        actionButton.onClick(e as any);
+                                    }
+                                }}
                                 title={actionButton.tooltip}
+                                tabIndex={0}
                             />
                         </div>
                     )