[InfraUI] [LogsUI] Accessibility fixes (#41883)

* Fixes #40411 - Add aria-label to search input

* Fixes #40425 - Align gear icon aria-labels

* Fixes #40419 - Make use of EuiDescribedFormGroup in the source configuration panel

* Add data-test-subj attribute back for functional test

* Revert "Fixes #40419 - Make use of EuiDescribedFormGroup in the source configuration panel"

This reverts commit 5075777e53.
This commit is contained in:
Kerry Gallagher 2019-08-02 11:44:53 +01:00 committed by GitHub
parent 7c45d58685
commit 658ee17262
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
3 changed files with 15 additions and 2 deletions

View file

@ -28,6 +28,7 @@ interface AutocompleteFieldProps {
suggestions: AutocompleteSuggestion[]; suggestions: AutocompleteSuggestion[];
value: string; value: string;
autoFocus?: boolean; autoFocus?: boolean;
'aria-label'?: string;
} }
interface AutocompleteFieldState { interface AutocompleteFieldState {
@ -49,7 +50,14 @@ export class AutocompleteField extends React.Component<
private inputElement: HTMLInputElement | null = null; private inputElement: HTMLInputElement | null = null;
public render() { public render() {
const { suggestions, isLoadingSuggestions, isValid, placeholder, value } = this.props; const {
suggestions,
isLoadingSuggestions,
isValid,
placeholder,
value,
'aria-label': ariaLabel,
} = this.props;
const { areSuggestionsVisible, selectedIndex } = this.state; const { areSuggestionsVisible, selectedIndex } = this.state;
return ( return (
@ -67,6 +75,7 @@ export class AutocompleteField extends React.Component<
onSearch={this.submit} onSearch={this.submit}
placeholder={placeholder} placeholder={placeholder}
value={value} value={value}
aria-label={ariaLabel}
/> />
{areSuggestionsVisible && !isLoadingSuggestions && suggestions.length > 0 ? ( {areSuggestionsVisible && !isLoadingSuggestions && suggestions.length > 0 ? (
<SuggestionsPanel> <SuggestionsPanel>

View file

@ -31,7 +31,7 @@ export const LogColumnHeaders = injectI18n<{
}>(({ columnConfigurations, columnWidths, intl, showColumnConfiguration }) => { }>(({ columnConfigurations, columnWidths, intl, showColumnConfiguration }) => {
const showColumnConfigurationLabel = intl.formatMessage({ const showColumnConfigurationLabel = intl.formatMessage({
id: 'xpack.infra.logColumnHeaders.configureColumnsLabel', id: 'xpack.infra.logColumnHeaders.configureColumnsLabel',
defaultMessage: 'Configure columns', defaultMessage: 'Configure source',
}); });
return ( return (

View file

@ -80,6 +80,10 @@ export const LogsToolbar = injectI18n(({ intl }) => {
})} })}
suggestions={suggestions} suggestions={suggestions}
value={filterQueryDraft ? filterQueryDraft.expression : ''} value={filterQueryDraft ? filterQueryDraft.expression : ''}
aria-label={intl.formatMessage({
id: 'xpack.infra.logsPage.toolbar.kqlSearchFieldAriaLabel',
defaultMessage: 'Search for log entries',
})}
/> />
)} )}
</WithLogFilter> </WithLogFilter>