fix(a11y): associate labels with inputs (#1055)

splunk · Feb 7, 2024 · a880c45 · a880c45
1 parent b7f179a
commit a880c45
Show file tree

Hide file tree

Showing 6 changed files with 15 additions and 7 deletions.
diff --git a/ui/src/components/ControlWrapper.tsx b/ui/src/components/ControlWrapper.tsx
@@ -6,8 +6,6 @@ import CONTROL_TYPE_MAP, { ComponentTypes } from '../constants/ControlTypeMap';
 import { AnyEntity, UtilControlWrapper } from './BaseFormTypes';
 import { AcceptableFormValueOrNullish } from '../types/components/shareableTypes';
 
-const CustomElement = styled.div``;
-
 const ControlGroupWrapper = styled(ControlGroup).attrs((props: { dataName: string }) => ({
     'data-name': props.dataName,
 }))`
@@ -110,13 +108,12 @@ class ControlWrapper extends React.PureComponent<ControlWrapperProps> {
                 <ControlGroupWrapper
                     help={helpText}
                     error={this.props.error}
-                    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-                    // @ts-ignore property should be data-name, but is mapped in obj ControlGroupWrapper
+                    // @ts-expect-error property should be data-name, but is mapped in obj ControlGroupWrapper
                     dataName={this?.props?.entity.field}
                     labelWidth={240}
                     {...this?.props?.entity}
                 >
-                    <CustomElement>{rowView}</CustomElement>
+                    {rowView}
                 </ControlGroupWrapper>
             )
         );

diff --git a/ui/src/components/MultiInputComponent/MultiInputComponent.tsx b/ui/src/components/MultiInputComponent/MultiInputComponent.tsx
@@ -16,6 +16,7 @@ const WaitSpinnerWrapper = styled(WaitSpinner)`
 `;
 
 export interface MultiInputComponentProps {
+    id?: string;
     handleChange: (field: string, data: string) => void;
     field: string;
     controlOptions: {
@@ -40,6 +41,7 @@ export interface MultiInputComponentProps {
 
 function MultiInputComponent(props: MultiInputComponentProps) {
     const {
+        id,
         field,
         disabled = false,
         error = false,
@@ -135,6 +137,7 @@ function MultiInputComponent(props: MultiInputComponentProps) {
     return (
         <>
             <MultiSelectWrapper
+                inputId={id}
                 values={valueList}
                 error={error}
                 name={field}

diff --git a/ui/src/components/RadioComponent/RadioComponent.tsx b/ui/src/components/RadioComponent/RadioComponent.tsx
@@ -11,6 +11,7 @@ const RadioBarOption = styled(RadioBar.Option)`
 `;
 
 interface RadioComponentProps {
+    id?: string;
     value: string;
     handleChange: (field: string, value: string) => void;
     field: string;
@@ -31,6 +32,7 @@ class RadioComponent extends Component<RadioComponentProps> {
     render() {
         return (
             <RadioBarWrapper
+                id={this.props.id}
                 inline
                 onChange={this.handleChange}
                 value={this.props.value}

diff --git a/ui/src/components/SingleInputComponent.tsx b/ui/src/components/SingleInputComponent.tsx
@@ -31,6 +31,7 @@ interface FormItem {
 }
 
 interface SingleInputComponentProps {
+    id?: string;
     disabled?: boolean;
     value: string;
     error?: boolean;
@@ -181,6 +182,7 @@ function SingleInputComponent(props: SingleInputComponentProps) {
     ) : (
         <>
             <SelectWrapper
+                inputId={props.id}
                 className="dropdownBox"
                 data-test-loading={loading}
                 value={props.value}

diff --git a/ui/src/components/TextAreaComponent/TextAreaComponent.tsx b/ui/src/components/TextAreaComponent/TextAreaComponent.tsx
@@ -6,7 +6,8 @@ const TextWrapper = styled(TextArea)`
     width: 320px !important;
 `;
 
-interface TextAreadComponentProps {
+interface TextAreaComponentProps {
+    id?: string;
     value: string | number;
     handleChange: (field: string, value: string) => void;
     field: string;
@@ -15,13 +16,14 @@ interface TextAreadComponentProps {
     disabled?: boolean;
 }
 
-function TextAreaComponent(props: TextAreadComponentProps) {
+function TextAreaComponent(props: TextAreaComponentProps) {
     const handleChange = (e: unknown, { value }: { value: string }) => {
         props.handleChange(props.field, value);
     };
 
     return (
         <TextWrapper
+            inputId={props.id}
             inline
             canClear
             error={props.error}

diff --git a/ui/src/components/TextComponent/TextComponent.tsx b/ui/src/components/TextComponent/TextComponent.tsx
@@ -14,6 +14,7 @@ interface TextComponentProps {
     error?: boolean;
     encrypted?: boolean;
     disabled?: boolean;
+    id?: string;
 }
 
 class TextComponent extends Component<TextComponentProps> {
@@ -24,6 +25,7 @@ class TextComponent extends Component<TextComponentProps> {
     render() {
         return (
             <TextWrapper
+                inputId={this.props.id}
                 inline
                 error={this.props.error}
                 className={this.props.field}