Skip to content

Commit fe0e45c

Browse files
yordan-styordan-st
committed
feat: add form orientation accessibility support to dialog forms
1 parent 9b32b49 commit fe0e45c

File tree

4 files changed

+75
-20
lines changed

4 files changed

+75
-20
lines changed

‎packages/pluggableWidgets/rich-text-web/src/components/ModalDialog/DialogContent.tsx‎

Lines changed: 21 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -56,16 +56,32 @@ export function DialogBody(
5656

5757
export interface FormControlProps extends PropsWithChildrenWithClass {
5858
label?: string;
59+
formOrientation?: "horizontal" | "vertical";
60+
inputId?: string;
5961
}
6062

61-
export function FormControl(props: FormControlProps): ReactElement {
62-
const { children, className, label } = props;
63+
export function FormControl(props: FormControlProps & { formOrientation?: "horizontal" | "vertical" }): ReactElement {
64+
const { children, className, label, formOrientation, inputId } = props;
65+
66+
console.log("Form orientation:", props.formOrientation);
6367

6468
return (
6569
<If condition={children !== undefined && children !== null}>
66-
<div className={classNames("form-group", className)}>
67-
{label && <label className="control-label col-sm-3">{label}</label>}
68-
<div className={`col-sm-${label ? "9" : "12"}`}> {children}</div>
70+
<div className={classNames("form-group", formOrientation === "vertical" ? "no-columns" : "", className)}>
71+
{label && (
72+
<label
73+
htmlFor={inputId}
74+
id={`${inputId}-label`}
75+
className={classNames("control-label", formOrientation !== "vertical" && "col-sm-3")}
76+
>
77+
{label}
78+
</label>
79+
)}
80+
{formOrientation === "vertical" ? (
81+
children
82+
) : (
83+
<div className={`col-sm-${label ? "9" : "12"}`}>{children}</div>
84+
)}
6985
</div>
7086
</If>
7187
);

‎packages/pluggableWidgets/rich-text-web/src/components/ModalDialog/ImageDialog.tsx‎

Lines changed: 26 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -163,7 +163,11 @@ export default function ImageDialog(props: ImageDialogProps): ReactElement {
163163
)}
164164
<div>
165165
<If condition={activeTab === "general"}>
166-
<FormControl label="Source">
166+
<FormControl
167+
label="Source"
168+
formOrientation={formOrientation}
169+
inputId="rich-text-image-file-input"
170+
>
167171
{defaultValue?.src ? (
168172
<img
169173
src={defaultValue.src}
@@ -184,6 +188,7 @@ export default function ImageDialog(props: ImageDialogProps): ReactElement {
184188
</div>
185189
) : enableDefaultUpload ? (
186190
<input
191+
id="rich-text-image-file-input"
187192
name="files"
188193
className="form-control mx-textarea-input mx-textarea-noresize code-input"
189194
type="file"
@@ -192,8 +197,13 @@ export default function ImageDialog(props: ImageDialogProps): ReactElement {
192197
></input>
193198
) : undefined}
194199
</FormControl>
195-
<FormControl label="Alternative description">
200+
<FormControl
201+
label="Alternative description"
202+
formOrientation={formOrientation}
203+
inputId="rich-text-image-alt-input"
204+
>
196205
<input
206+
id="rich-text-image-alt-input"
197207
className="form-control"
198208
type="text"
199209
name="alt"
@@ -202,10 +212,16 @@ export default function ImageDialog(props: ImageDialogProps): ReactElement {
202212
ref={inputReference}
203213
/>
204214
</FormControl>
205-
<FormControl label="Width" className="image-dialog-size">
215+
<FormControl
216+
label="Width"
217+
className="image-dialog-size"
218+
formOrientation={formOrientation}
219+
inputId="rich-text-image-width-input"
220+
>
206221
<div className="flexcontainer image-dialog-size-container">
207222
<div className="flexcontainer image-dialog-size-input">
208223
<input
224+
id="rich-text-image-width-input"
209225
className="form-control"
210226
type="number"
211227
name="width"
@@ -219,6 +235,7 @@ export default function ImageDialog(props: ImageDialogProps): ReactElement {
219235
</div>
220236
<div className="flexcontainer image-dialog-size-input">
221237
<input
238+
id="rich-text-image-height-input"
222239
className="form-control"
223240
type="number"
224241
name="height"
@@ -230,8 +247,13 @@ export default function ImageDialog(props: ImageDialogProps): ReactElement {
230247
</div>
231248
</div>
232249
</FormControl>
233-
<FormControl label="Keep ratio">
250+
<FormControl
251+
label="Keep ratio"
252+
formOrientation={formOrientation}
253+
inputId="rich-text-image-keep-ratio-input"
254+
>
234255
<input
256+
id="rich-text-image-keep-ratio-input"
235257
type="checkbox"
236258
name="keepAspectRatio"
237259
checked={formState.keepAspectRatio}

‎packages/pluggableWidgets/rich-text-web/src/components/ModalDialog/LinkDialog.tsx‎

Lines changed: 18 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -27,35 +27,48 @@ export default function LinkDialog(props: LinkDialogProps): ReactElement {
2727
<DialogContent className={classNames("link-dialog", formOrientation === "vertical" ? "form-vertical" : "")}>
2828
<DialogHeader onClose={onClose}>Insert/Edit Link</DialogHeader>
2929
<DialogBody formOrientation={formOrientation}>
30-
<FormControl label="Text">
30+
<FormControl label="Text" formOrientation={formOrientation} inputId="rich-text-link-text-input">
3131
<input
32+
id="rich-text-link-text-input"
3233
type="text"
3334
className="form-control"
3435
name="text"
3536
onChange={onInputChange}
3637
value={formState.text}
3738
/>
3839
</FormControl>
39-
<FormControl label="URL">
40+
<FormControl label="URL" formOrientation={formOrientation} inputId="rich-text-link-url-input">
4041
<input
42+
id="rich-text-link-url-input"
4143
type="url"
4244
className="form-control"
4345
name="href"
4446
onChange={onInputChange}
4547
value={formState.href}
4648
/>
4749
</FormControl>
48-
<FormControl label="Title">
50+
<FormControl label="Title" formOrientation={formOrientation} inputId="rich-text-link-title-input">
4951
<input
52+
id="rich-text-link-title-input"
5053
type="text"
5154
className="form-control"
5255
name="title"
5356
onChange={onInputChange}
5457
value={formState.title}
5558
/>
5659
</FormControl>
57-
<FormControl label="Open link in...">
58-
<select value={formState.target} name="target" onChange={onInputChange} className="form-control">
60+
<FormControl
61+
label="Open link in..."
62+
formOrientation={formOrientation}
63+
inputId="rich-text-link-target-select"
64+
>
65+
<select
66+
id="rich-text-link-target-select"
67+
value={formState.target}
68+
name="target"
69+
onChange={onInputChange}
70+
className="form-control"
71+
>
5972
<option value="_self">Current window</option>
6073
<option value="_blank">New window</option>
6174
</select>

‎packages/pluggableWidgets/rich-text-web/src/components/ModalDialog/VideoDialog.tsx‎

Lines changed: 10 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -23,7 +23,7 @@ export function getValueType(value: VideoFormType): VideoFormType {
2323
}
2424

2525
function GeneralVideoDialog(props: VideoDialogProps): ReactElement {
26-
const { onSubmit, onClose, defaultValue } = props;
26+
const { onSubmit, onClose, defaultValue, formOrientation } = props;
2727
const [formState, setFormState] = useState<videoConfigType>({
2828
src: defaultValue?.src ?? "",
2929
width: defaultValue?.width ?? 560,
@@ -48,11 +48,12 @@ function GeneralVideoDialog(props: VideoDialogProps): ReactElement {
4848

4949
return (
5050
<Fragment>
51-
<FormControl label="URL">
51+
<FormControl label="URL" formOrientation={formOrientation} inputId="rich-text-video-src-input">
5252
{defaultValue?.src ? (
5353
<span className="mx-text-muted">{defaultValue?.src}</span>
5454
) : (
5555
<input
56+
id="rich-text-video-src-input"
5657
className="form-control"
5758
type="url"
5859
name="src"
@@ -61,17 +62,19 @@ function GeneralVideoDialog(props: VideoDialogProps): ReactElement {
6162
/>
6263
)}
6364
</FormControl>
64-
<FormControl label="Width">
65+
<FormControl label="Width" formOrientation={formOrientation} inputId="rich-text-video-width-input">
6566
<input
67+
id="rich-text-video-width-input"
6668
className="form-control"
6769
type="number"
6870
name="width"
6971
onChange={onInputChange}
7072
value={formState.width}
7173
/>
7274
</FormControl>
73-
<FormControl label="Height">
75+
<FormControl label="Height" formOrientation={formOrientation} inputId="rich-text-video-height-input">
7476
<input
77+
id="rich-text-video-height-input"
7578
className="form-control"
7679
type="number"
7780
name="height"
@@ -85,7 +88,7 @@ function GeneralVideoDialog(props: VideoDialogProps): ReactElement {
8588
}
8689

8790
function EmbedVideoDialog(props: VideoDialogProps): ReactElement {
88-
const { onSubmit, onClose } = props;
91+
const { onSubmit, onClose, formOrientation } = props;
8992
const [formState, setFormState] = useState<videoEmbedConfigType>({
9093
embedcode: ""
9194
});
@@ -96,9 +99,10 @@ function EmbedVideoDialog(props: VideoDialogProps): ReactElement {
9699

97100
return (
98101
<Fragment>
99-
<FormControl label="URL">
102+
<FormControl label="URL" formOrientation={formOrientation} inputId="rich-text-video-embed-input">
100103
{" "}
101104
<textarea
105+
id="rich-text-video-embed-input"
102106
className="form-control"
103107
name="embedcode"
104108
onChange={onInputChange}

0 commit comments

Comments
 (0)