fix: resolve the issue in input accessibility.

splunk · Jan 2, 2025 · eff4051 · eff4051
1 parent 12ea7b6
commit eff4051
Show file tree

Hide file tree

Showing 5 changed files with 11 additions and 1 deletion.
diff --git a/ui/src/components/BaseFormView/BaseFormView.tsx b/ui/src/components/BaseFormView/BaseFormView.tsx
@@ -372,6 +372,7 @@ class BaseFormView extends PureComponent<BaseFormProps, BaseFormState> {
                     disabled: false,
                     error: false,
                     display: true,
+                    id: `${e.field}-${e.label}`,
                 };
 
                 if (e.type !== 'helpLink' && e.type !== 'custom') {
@@ -1376,6 +1377,7 @@ class BaseFormView extends PureComponent<BaseFormProps, BaseFormState> {
                                 fileNameToDisplay={temState.fileNameToDisplay}
                                 modifiedEntitiesData={temState.modifiedEntitiesData}
                                 page={this.props.page}
+                                id={temState.id}
                             />
                         );
                     })}

diff --git a/ui/src/components/CheckBoxComponent/CheckBoxComponent.tsx b/ui/src/components/CheckBoxComponent/CheckBoxComponent.tsx
@@ -7,6 +7,7 @@ interface CheckBoxComponentProps {
     handleChange: (field: string, value: 0 | 1) => void;
     field: string;
     disabled?: boolean;
+    id: string;
 }
 
 class CheckBoxComponent extends React.Component<CheckBoxComponentProps> {
@@ -27,6 +28,7 @@ class CheckBoxComponent extends React.Component<CheckBoxComponentProps> {
                 disabled={this.props.disabled}
                 selected={!(this.props.value ? isFalse(this.props.value) : true)}
                 appearance="checkbox"
+                id={this.props.id}
             />
         );
     }

diff --git a/ui/src/components/ControlWrapper/ControlWrapper.tsx b/ui/src/components/ControlWrapper/ControlWrapper.tsx
@@ -51,6 +51,7 @@ export interface ControlWrapperProps {
         required?: boolean;
     };
     page?: string;
+    id?: number;
 }
 
 class ControlWrapper extends React.PureComponent<ControlWrapperProps> {
@@ -109,6 +110,7 @@ class ControlWrapper extends React.PureComponent<ControlWrapperProps> {
                           ...this?.props?.entity,
                           ...this.props?.modifiedEntitiesData,
                           page: this.props.page,
+                          id: this.props.id,
                       }
                   )
                 : `No View Found for ${this?.props?.entity?.type} type`;
@@ -139,6 +141,7 @@ class ControlWrapper extends React.PureComponent<ControlWrapperProps> {
                 : isRequiredModified;
 
         const label = this.props?.modifiedEntitiesData?.label || this?.props?.entity?.label || '';
+        const labelFor = this.props.id !== undefined ? this.props.id.toString() : undefined;
         return (
             this.props.display && (
                 <ControlGroupWrapper
@@ -151,6 +154,7 @@ class ControlWrapper extends React.PureComponent<ControlWrapperProps> {
                     labelWidth={240}
                     required={isFieldRequired}
                     label={label}
+                    labelFor={labelFor}
                 >
                     <CustomElement>{rowView}</CustomElement>
                 </ControlGroupWrapper>

diff --git a/ui/src/components/RadioComponent/RadioComponent.tsx b/ui/src/components/RadioComponent/RadioComponent.tsx
@@ -35,7 +35,6 @@ class RadioComponent extends Component<RadioComponentProps> {
     render() {
         return (
             <RadioBarWrapper
-                id={this.props.id}
                 inline
                 onChange={this.handleChange}
                 value={
@@ -47,6 +46,7 @@ class RadioComponent extends Component<RadioComponentProps> {
             >
                 {this.props.controlOptions.items.map((item) => (
                     <RadioBarOption
+                        id={this.props.id}
                         key={item.value}
                         value={getValueMapTruthyFalse(item.value, this.props.page)}
                         label={item.label}

diff --git a/ui/src/types/components/BaseFormTypes.ts b/ui/src/types/components/BaseFormTypes.ts
@@ -49,6 +49,7 @@ export type ModifyFieldsOnValue = Array<ModificationCriteria>;
 
 export interface BaseFormStateData {
     [x: string]: {
+        id: number | undefined;
         disabled: boolean;
         error: boolean;
         fileNameToDisplay?: string;
@@ -165,6 +166,7 @@ export interface BasicEntity {
     display: boolean;
     value?: AcceptableFormValueOrNullish;
     fileNameToDisplay?: string;
+    id?: string;
 }
 
 export interface ChangeRecord {