Skip to content

Commit

Permalink
fix: [Stateful:Connectors:New connector page]Configuration form missi…
Browse files Browse the repository at this point in the history
…ng instructions and field names from announcement (#197963)

Closes: #197586

## Description
Forms, requiring user input, should have clear instructions on how to
fill them. Specific fields can have their own help (guidance) text on
how to fill them with examples.
All fields which are present in the form can be programmatically
determined, especially for the users using assistive technology to
understand what fields are present, what input is expected.

## What was changed: 
1. `aria-label` values ​​are explicitly set for
`ConnectorConfigurationField` child components. I suspect that due to
the dynamic nature of this component, the standard mechanism does not
work properly.


## Screen: 

<img width="1163" alt="image"
src="https://github.com/user-attachments/assets/00e1bd87-30b3-4c8f-a3d7-0c7774028a66">
  • Loading branch information
alexwizp authored Oct 28, 2024
1 parent 6b91b15 commit 0220874
Showing 1 changed file with 9 additions and 3 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -52,7 +52,7 @@ export const ConfigInputField: React.FC<ConfigInputFieldProps> = ({
isLoading,
validateAndSetConfigValue,
}) => {
const { isValid, required, placeholder, value } = configEntry;
const { isValid, required, placeholder, value, label } = configEntry;
const [innerValue, setInnerValue] = useState(value);
return (
<EuiFieldText
Expand All @@ -65,6 +65,7 @@ export const ConfigInputField: React.FC<ConfigInputFieldProps> = ({
validateAndSetConfigValue(event.target.value);
}}
placeholder={placeholder}
aria-label={label}
/>
);
};
Expand All @@ -74,7 +75,7 @@ export const ConfigInputTextArea: React.FC<ConfigInputFieldProps> = ({
configEntry,
validateAndSetConfigValue,
}) => {
const { isValid, required, placeholder, value } = configEntry;
const { isValid, required, placeholder, value, label } = configEntry;
const [innerValue, setInnerValue] = useState(value);
return (
<EuiTextArea
Expand All @@ -88,6 +89,7 @@ export const ConfigInputTextArea: React.FC<ConfigInputFieldProps> = ({
validateAndSetConfigValue(event.target.value);
}}
placeholder={placeholder}
aria-label={label}
/>
);
};
Expand Down Expand Up @@ -129,7 +131,7 @@ export const ConfigInputPassword: React.FC<ConfigInputFieldProps> = ({
configEntry,
validateAndSetConfigValue,
}) => {
const { required, value } = configEntry;
const { required, value, label } = configEntry;
const [innerValue, setInnerValue] = useState(value);
return (
<EuiFieldPassword
Expand All @@ -141,6 +143,7 @@ export const ConfigInputPassword: React.FC<ConfigInputFieldProps> = ({
setInnerValue(event.target.value);
validateAndSetConfigValue(event.target.value);
}}
aria-label={label}
/>
);
};
Expand Down Expand Up @@ -170,6 +173,7 @@ export const ConnectorConfigurationField: React.FC<ConnectorConfigurationFieldPr
onChange={(event) => {
validateAndSetConfigValue(event.target.value);
}}
aria-label={label}
/>
) : (
<EuiRadioGroup
Expand All @@ -180,6 +184,7 @@ export const ConnectorConfigurationField: React.FC<ConnectorConfigurationFieldPr
onChange={(id) => {
validateAndSetConfigValue(id);
}}
aria-label={label}
/>
);

Expand Down Expand Up @@ -227,6 +232,7 @@ export const ConnectorConfigurationField: React.FC<ConnectorConfigurationFieldPr
onChange={(event) => {
validateAndSetConfigValue(event.target.checked);
}}
aria-label={label}
/>
</EuiFlexItem>
{!hasPlatinumLicense && (
Expand Down

0 comments on commit 0220874

Please sign in to comment.