Merge pull request #2179 from mozilla/fix-mac-658

Fix MAC-658

src/css/popup.css

@@ -895,6 +895,7 @@ input.proxies {
   block-size: var(--panelSize);
   max-block-size: var(--panelSize);
   min-block-size: var(--panelSize);
+  overflow-x: hidden;
 }
 
 .proxy-panel-title {

src/js/popup.js

@@ -1943,17 +1943,6 @@ Logic.registerPanel(P_MOZILLA_VPN_SERVER_LIST, {
 
     Utils.addEnterHandler(document.getElementById("moz-vpn-return"), async () => {
       const identity = Logic.currentIdentity();
-      const { mozillaVpnServers } = await browser.storage.local.get("mozillaVpnServers");
-
-      const selectedServer = document.querySelector(".server-radio-btn:checked");
-      const proxy = MozillaVPN.getProxy(
-        selectedServer.dataset.countryCode,
-        selectedServer.dataset.cityName,
-        true,
-        mozillaVpnServers
-      );
-
-      await proxifiedContainers.set(identity.cookieStoreId, proxy);
       Logic.showPanel(P_CONTAINER_EDIT, identity, false, false);
       Logic.showPreviousPanel();
     });
@@ -1997,6 +1986,21 @@ Logic.registerPanel(P_MOZILLA_VPN_SERVER_LIST, {
         radioBtn.dataset.cityName = city.name;
         radioBtn.name = "server-city";
 
+        const cityListItem = cityTemplateClone.querySelector(".server-city-list-item");
+        Utils.addEnterHandler((cityListItem), async(e) => {
+          if (e.key === "Enter") {
+            radioBtn.checked = true;
+          }
+          const identity = Logic.currentIdentity();
+          const proxy = MozillaVPN.getProxy(
+            radioBtn.dataset.countryCode,
+            radioBtn.dataset.cityName,
+            true,
+            mozillaVpnServers
+          );
+          await proxifiedContainers.set(identity.cookieStoreId, proxy);
+        });
+
         // Set city name
         cityName.textContent = city.name;
         cityList.appendChild(cityTemplateClone);

src/popup.html

@@ -408,7 +408,7 @@
       </template>
       <template id="server-city-list-items">
         <li>
-          <label class="server-city-list-item">
+          <label class="server-city-list-item" tabindex="0">
             <input class="server-radio-btn"  type="radio" data-country-code="" data-city-name="" checked=""/>
             <div class="server-radio-control"></div>
             <span class="server-city-name"></span>