Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly
Sign up
Appearance settings

Commit f3d08e9

Browse files
committed
[Feat]: #1883 add tab-index on buttons/checkbox/select
1 parent 1b7d4b9 commit f3d08e9

File tree

6 files changed

+45
-9
lines changed

6 files changed

+45
-9
lines changed

‎client/packages/lowcoder/src/comps/comps/buttonComp/buttonComp.tsx

Lines changed: 9 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { BoolCodeControl, StringControl } from "comps/controls/codeControl";
1+
import { BoolCodeControl, StringControl,NumberControl } from "comps/controls/codeControl";
22
import { dropdownControl } from "comps/controls/dropdownControl";
33
import { ButtonEventHandlerControl } from "comps/controls/eventHandlerControl";
44
import { IconControl } from "comps/controls/iconControl";
@@ -137,7 +137,8 @@ const childrenMap = {
137137
disabledStyle: DisabledButtonStyleControl,
138138
animationStyle: styleControl(AnimationStyle, 'animationStyle'),
139139
viewRef: RefControl<HTMLElement>,
140-
tooltip: StringControl
140+
tooltip: StringControl,
141+
tabIndex: NumberControl
141142
};
142143

143144
type ChildrenType = NewChildren<RecordConstructorToComp<typeof childrenMap>>;
@@ -162,8 +163,12 @@ const ButtonPropertyView = React.memo((props: {
162163
disabledPropertyView(props.children),
163164
hiddenPropertyView(props.children),
164165
loadingPropertyView(props.children),
166+
props.children.tabIndex.propertyView({ label: trans("prop.tabIndex") }),
165167
]
166-
: props.children.form.getPropertyView()}
168+
: [
169+
props.children.form.getPropertyView(),
170+
props.children.tabIndex.propertyView({ label: trans("prop.tabIndex") }),
171+
]}
167172
</Section>
168173
</>
169174
)}
@@ -222,6 +227,7 @@ const ButtonView = React.memo((props: ToViewReturn<ChildrenType>) => {
222227
(!isDefault(props.type) && getForm(editorState, props.form)?.disableSubmit())
223228
}
224229
onClick={handleClick}
230+
tabIndex={typeof props.tabIndex === 'number' ? props.tabIndex : undefined}
225231
>
226232
{props.prefixIcon && <IconWrapper>{props.prefixIcon}</IconWrapper>}
227233
{

‎client/packages/lowcoder/src/comps/comps/buttonComp/linkComp.tsx

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import { default as Button } from "antd/es/button";
22
import { ButtonCompWrapper, buttonRefMethods } from "comps/comps/buttonComp/buttonCompConstants";
3-
import { BoolCodeControl, StringControl } from "comps/controls/codeControl";
3+
import { BoolCodeControl, StringControl,NumberControl } from "comps/controls/codeControl";
44
import { ButtonEventHandlerControl } from "comps/controls/eventHandlerControl";
55
import { styleControl } from "comps/controls/styleControl";
66
import { AnimationStyle, AnimationStyleType, LinkStyle, LinkStyleType } from "comps/controls/styleControlConstants";
@@ -91,6 +91,7 @@ const LinkTmpComp = (function () {
9191
prefixIcon: IconControl,
9292
suffixIcon: IconControl,
9393
viewRef: RefControl<HTMLElement>,
94+
tabIndex: NumberControl,
9495
};
9596
return new UICompBuilder(childrenMap, (props) => {
9697
// chrome86 bug: button children should not contain only empty span
@@ -105,6 +106,7 @@ const LinkTmpComp = (function () {
105106
disabled={props.disabled}
106107
onClick={() => props.onEvent("click")}
107108
type={"link"}
109+
tabIndex={typeof props.tabIndex === 'number' ? props.tabIndex : undefined}
108110
>
109111
{hasChildren && (
110112
<span>
@@ -131,6 +133,7 @@ const LinkTmpComp = (function () {
131133
{hiddenPropertyView(children)}
132134
{loadingPropertyView(children)}
133135
{showDataLoadingIndicatorsPropertyView(children)}
136+
{children.tabIndex.propertyView({ label: trans("prop.tabIndex") })}
134137
</Section>
135138
<Section name={sectionNames.advanced}>
136139
{children.prefixIcon.propertyView({ label: trans("button.prefixIcon") })}

‎client/packages/lowcoder/src/comps/comps/buttonComp/toggleButtonComp.tsx

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { BoolCodeControl, StringControl } from "comps/controls/codeControl";
1+
import { BoolCodeControl, StringControl,NumberControl } from "comps/controls/codeControl";
22
import { withDefault } from "comps/generators";
33
import { UICompBuilder } from "comps/generators/uiCompBuilder";
44
import {
@@ -68,6 +68,7 @@ const ToggleTmpComp = (function () {
6868
showBorder: withDefault(BoolControl, true),
6969
viewRef: RefControl<HTMLElement>,
7070
tooltip: StringControl,
71+
tabIndex: NumberControl,
7172
};
7273
return new UICompBuilder(childrenMap, (props) => {
7374
const text = props.showText
@@ -92,6 +93,7 @@ const ToggleTmpComp = (function () {
9293
props.onEvent("change");
9394
props.value.onChange(!props.value.value);
9495
}}
96+
tabIndex={typeof props.tabIndex === 'number' ? props.tabIndex : undefined}
9597
>
9698
{props.iconPosition === "right" && text}
9799
{<IconWrapper>{props.value.value ? props.trueIcon : props.falseIcon}</IconWrapper>}
@@ -117,6 +119,7 @@ const ToggleTmpComp = (function () {
117119
{hiddenPropertyView(children)}
118120
{loadingPropertyView(children)}
119121
{showDataLoadingIndicatorsPropertyView(children)}
122+
{children.tabIndex.propertyView({ label: trans("prop.tabIndex") })}
120123
</Section>
121124
<Section name={sectionNames.advanced}>
122125
{children.showText.propertyView({ label: trans("toggleButton.showText") })}

‎client/packages/lowcoder/src/comps/comps/meetingComp/controlButton.tsx

Lines changed: 5 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { BoolCodeControl, StringControl } from "comps/controls/codeControl";
1+
import { BoolCodeControl, StringControl,NumberControl } from "comps/controls/codeControl";
22
import { dropdownControl } from "comps/controls/dropdownControl";
33
import { ButtonEventHandlerControl } from "comps/controls/eventHandlerControl";
44
import { IconControl } from "comps/controls/iconControl";
@@ -204,7 +204,8 @@ const childrenMap = {
204204
style: ButtonStyleControl,
205205
viewRef: RefControl<HTMLElement>,
206206
restrictPaddingOnRotation:withDefault(StringControl, 'controlButton'),
207-
tooltip: StringControl
207+
tooltip: StringControl,
208+
tabIndex: NumberControl
208209
};
209210

210211
let ButtonTmpComp = (function () {
@@ -294,6 +295,7 @@ let ButtonTmpComp = (function () {
294295
? handleClickEvent()
295296
: submitForm(editorState, props.form)
296297
}
298+
tabIndex={typeof props.tabIndex === 'number' ? props.tabIndex : undefined}
297299
>
298300
{props.sourceMode === 'standard' && props.prefixIcon && (
299301
<IconWrapper
@@ -342,6 +344,7 @@ let ButtonTmpComp = (function () {
342344
{disabledPropertyView(children)}
343345
{hiddenPropertyView(children)}
344346
{loadingPropertyView(children)}
347+
{children.tabIndex.propertyView({ label: trans("prop.tabIndex") })}
345348
</Section>
346349
)}
347350

‎client/packages/lowcoder/src/comps/comps/selectInputComp/checkboxComp.tsx

Lines changed: 19 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -214,8 +214,20 @@ let CheckboxBasicComp = (function () {
214214

215215
return new UICompBuilder(childrenMap, (props) => {
216216
const mountedRef = useRef(true);
217+
const checkboxRef = useRef<HTMLDivElement | null>(null);
217218
const [validateState, handleChange] = useSelectInputValidate(props);
218219

220+
useEffect(() => {
221+
if (!mountedRef.current) return;
222+
if (checkboxRef.current && typeof props.tabIndex === 'number') {
223+
const checkboxInputs = checkboxRef.current.querySelectorAll('input[type="checkbox"]');
224+
checkboxInputs.forEach((input, index) => {
225+
// Set sequential tabindex for each checkbox
226+
input.setAttribute('tabindex', (props.tabIndex + index).toString());
227+
});
228+
}
229+
}, [props.tabIndex, props.options]);
230+
219231
useEffect(() => {
220232
return () => {
221233
mountedRef.current = false;
@@ -251,7 +263,13 @@ let CheckboxBasicComp = (function () {
251263
layout={props.layout}
252264
options={filteredOptions()}
253265
onChange={handleValidateChange}
254-
viewRef={props.viewRef}
266+
viewRef={(el) => {
267+
if (!mountedRef.current) return;
268+
if (el) {
269+
props.viewRef(el);
270+
checkboxRef.current = el;
271+
}
272+
}}
255273
tabIndex={typeof props.tabIndex === 'number' ? props.tabIndex : undefined}
256274
/>
257275
),

‎client/packages/lowcoder/src/comps/comps/selectInputComp/selectCompConstants.tsx

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@ import {
66
} from "lowcoder-core";
77
import { BoolControl } from "../../controls/boolControl";
88
import { LabelControl } from "../../controls/labelControl";
9-
import { BoolCodeControl, StringControl } from "../../controls/codeControl";
9+
import { BoolCodeControl, StringControl,NumberControl } from "../../controls/codeControl";
1010
import { PaddingControl } from "../../controls/paddingControl";
1111
import { MarginControl } from "../../controls/marginControl";
1212
import {
@@ -242,6 +242,7 @@ export const SelectChildrenMap = {
242242
margin: MarginControl,
243243
padding: PaddingControl,
244244
inputFieldStyle:styleControl(SelectStyle),
245+
tabIndex: NumberControl,
245246
...SelectInputValidationChildren,
246247
...formDataChildren,
247248
};
@@ -269,6 +270,7 @@ export const SelectUIView = (
269270
placeholder={props.placeholder}
270271
value={props.value}
271272
showSearch={props.showSearch}
273+
tabIndex={typeof props.tabIndex === 'number' ? props.tabIndex : undefined}
272274
filterOption={(input, option) => {
273275
if (!option) return false;
274276
return String(option.label ?? option.value ?? "").toLowerCase().includes(input.toLowerCase());
@@ -348,6 +350,7 @@ export const SelectPropertyView = (
348350
{disabledPropertyView(children)}
349351
{hiddenPropertyView(children)}
350352
{showDataLoadingIndicatorsPropertyView(children as any)}
353+
{children.tabIndex.propertyView({ label: trans("prop.tabIndex") })}
351354
</Section>
352355
</>
353356
)}

0 commit comments

Comments
(0)

AltStyle によって変換されたページ (->オリジナル) /