Protei/PromucFlow_constructor
2
0
Fork 0
Code Issues Pull Requests Actions 2 Packages Projects Releases Wiki Activity

feat: Makes jsToggle keyboard accessible (#12048)

Browse Source 
* Makes jstoggle keyboard accessible

* fix cypress locator
This commit is contained in:
Aswath K 2022-03-28 11:21:52 +05:30 committed by GitHub
parent 794c0f2299
commit 5330437d1a
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
4 changed files with 7 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
app/client/cypress/locators/FormWidgets.json
View File

@ -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"
}
}

2
app/client/cypress/support/Objects/CommonLocators.ts
View File

@ -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"

2
app/client/src/components/propertyControls/StyledControls.tsx
View File

@ -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;

4
app/client/src/pages/Editor/PropertyPane/PropertyControl.tsx
View File

@ -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 />