mirror of
https://github.com/elastic/kibana.git
synced 2025-04-24 17:59:23 -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[];
|
||||
value: string;
|
||||
autoFocus?: boolean;
|
||||
'aria-label'?: string;
|
||||
}
|
||||
|
||||
interface AutocompleteFieldState {
|
||||
|
@ -49,7 +50,14 @@ export class AutocompleteField extends React.Component<
|
|||
private inputElement: HTMLInputElement | null = null;
|
||||
|
||||
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;
|
||||
|
||||
return (
|
||||
|
@ -67,6 +75,7 @@ export class AutocompleteField extends React.Component<
|
|||
onSearch={this.submit}
|
||||
placeholder={placeholder}
|
||||
value={value}
|
||||
aria-label={ariaLabel}
|
||||
/>
|
||||
{areSuggestionsVisible && !isLoadingSuggestions && suggestions.length > 0 ? (
|
||||
<SuggestionsPanel>
|
||||
|
|
|
@ -31,7 +31,7 @@ export const LogColumnHeaders = injectI18n<{
|
|||
}>(({ columnConfigurations, columnWidths, intl, showColumnConfiguration }) => {
|
||||
const showColumnConfigurationLabel = intl.formatMessage({
|
||||
id: 'xpack.infra.logColumnHeaders.configureColumnsLabel',
|
||||
defaultMessage: 'Configure columns',
|
||||
defaultMessage: 'Configure source',
|
||||
});
|
||||
|
||||
return (
|
||||
|
|
|
@ -80,6 +80,10 @@ export const LogsToolbar = injectI18n(({ intl }) => {
|
|||
})}
|
||||
suggestions={suggestions}
|
||||
value={filterQueryDraft ? filterQueryDraft.expression : ''}
|
||||
aria-label={intl.formatMessage({
|
||||
id: 'xpack.infra.logsPage.toolbar.kqlSearchFieldAriaLabel',
|
||||
defaultMessage: 'Search for log entries',
|
||||
})}
|
||||
/>
|
||||
)}
|
||||
</WithLogFilter>
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue