mirror of
https://github.com/elastic/kibana.git
synced 2025-04-25 02:09:32 -04:00
[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:
parent
7c45d58685
commit
658ee17262
3 changed files with 15 additions and 2 deletions
|
@ -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>
|
||||||
|
|
|
@ -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 (
|
||||||
|
|
|
@ -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>
|
||||||
|
|
Loading…
Add table
Add a link
Reference in a new issue