From 5330437d1a06db0bf215cb3dd321581b8fce728f Mon Sep 17 00:00:00 2001
From: Aswath K <aswath@appsmith.com>
Date: Mon, 28 Mar 2022 11:21:52 +0530
Subject: [PATCH] feat: Makes jsToggle keyboard accessible (#12048)

* Makes jstoggle keyboard accessible

* fix cypress locator
---
 app/client/cypress/locators/FormWidgets.json                  | 4 ++--
 app/client/cypress/support/Objects/CommonLocators.ts          | 2 +-
 app/client/src/components/propertyControls/StyledControls.tsx | 2 +-
 app/client/src/pages/Editor/PropertyPane/PropertyControl.tsx  | 4 +++-
 4 files changed, 7 insertions(+), 5 deletions(-)

diff --git a/app/client/cypress/locators/FormWidgets.json b/app/client/cypress/locators/FormWidgets.json
index 52d83df5ef..8b3c240b0e 100644
--- a/app/client/cypress/locators/FormWidgets.json
+++ b/app/client/cypress/locators/FormWidgets.json
@@ -43,7 +43,7 @@
   "radioInput": ".t--draggable-radiogroupwidget span.t--widget-name",
   "checkboxGroupInput": ".t--draggable-checkboxgroupwidget span.t--widget-name",
   "switchGroupInput": ".t--draggable-switchgroupwidget span.t--widget-name",
-  "radioAddButton": ".t--property-control-options button",
+  "radioAddButton": ".t--property-control-options button.t--property-control-options-add",
   "formD": "div[type='FORM_WIDGET']",
   "datepickerFooter": ".bp3-datepicker-footer span",
   "datepickerFooterPublish": ".bp3-datepicker-footer span",
@@ -67,4 +67,4 @@
   "apiCallToast": "div.t--toast-action span[type='p1']",
   "toggleOnOptionChange": ".t--property-control-onoptionchange .t--js-toggle",
   "toggleButtonVariant": ".t--property-control-buttonvariant .t--js-toggle"
-}
\ No newline at end of file
+}
diff --git a/app/client/cypress/support/Objects/CommonLocators.ts b/app/client/cypress/support/Objects/CommonLocators.ts
index d487cd7e2a..a4e6514f6e 100644
--- a/app/client/cypress/support/Objects/CommonLocators.ts
+++ b/app/client/cypress/support/Objects/CommonLocators.ts
@@ -37,7 +37,7 @@ export class CommonLocators {
     _entityNameEditing = (entityNameinLeftSidebar: string) => "//span[text()='" + entityNameinLeftSidebar + "']/parent::div[contains(@class, 't--entity-name editing')]/input"
     _jsToggle = (controlToToggle: string) => ".t--property-control-" + controlToToggle + " .t--js-toggle"
     _spanButton = (btnVisibleText: string) => "//span[text()='" + btnVisibleText + "']/parent::button"
-    _selectPropDropdown = (ddName: string) => "//div[contains(@class, 't--property-control-" + ddName + "')]//button"
+    _selectPropDropdown = (ddName: string) => "//div[contains(@class, 't--property-control-" + ddName + "')]//button[contains(@class, 't--open-dropdown-Select-Action')]"
     _dropDownValue = (ddOption: string) => ".single-select:contains('" + ddOption + "')"
     _actionTextArea = (actionName: string) => "//label[text()='" + actionName + "']/following-sibling::div//div[contains(@class, 'CodeMirror')]//textarea"
     _existingDefaultTextInput = ".t--property-control-defaulttext .CodeMirror-code"
diff --git a/app/client/src/components/propertyControls/StyledControls.tsx b/app/client/src/components/propertyControls/StyledControls.tsx
index 115b97d4bb..968e0c0e5f 100644
--- a/app/client/src/components/propertyControls/StyledControls.tsx
+++ b/app/client/src/components/propertyControls/StyledControls.tsx
@@ -50,7 +50,7 @@ export const ControlPropertyLabelContainer = styled.div`
   }
 `;
 
-export const JSToggleButton = styled.span<{ active: boolean }>`
+export const JSToggleButton = styled.button<{ active: boolean }>`
   margin: 4px;
   margin-top: 0px;
   cursor: pointer;
diff --git a/app/client/src/pages/Editor/PropertyPane/PropertyControl.tsx b/app/client/src/pages/Editor/PropertyPane/PropertyControl.tsx
index 512b293f6b..75f6c690ac 100644
--- a/app/client/src/pages/Editor/PropertyPane/PropertyControl.tsx
+++ b/app/client/src/pages/Editor/PropertyPane/PropertyControl.tsx
@@ -422,7 +422,9 @@ const PropertyControl = memo((props: Props) => {
             {isConvertible && (
               <JSToggleButton
                 active={isDynamic}
-                className={`t--js-toggle ${isDynamic ? "is-active" : ""}`}
+                className={`focus:ring-2 t--js-toggle ${
+                  isDynamic ? "is-active" : ""
+                }`}
                 onClick={() => toggleDynamicProperty(propertyName, isDynamic)}
               >
                 <ControlIcons.JS_TOGGLE />