add live region for field search (#84310)
This commit is contained in:
parent
280ce7e5fa
commit
5b2e119356
|
@ -718,6 +718,25 @@ describe('IndexPattern Data Panel', () => {
|
||||||
]);
|
]);
|
||||||
});
|
});
|
||||||
|
|
||||||
|
it('should announce filter in live region', () => {
|
||||||
|
const wrapper = mountWithIntl(<InnerIndexPatternDataPanel {...props} />);
|
||||||
|
act(() => {
|
||||||
|
wrapper.find('[data-test-subj="lnsIndexPatternFieldSearch"]').prop('onChange')!({
|
||||||
|
target: { value: 'me' },
|
||||||
|
} as ChangeEvent<HTMLInputElement>);
|
||||||
|
});
|
||||||
|
|
||||||
|
wrapper
|
||||||
|
.find('[data-test-subj="lnsIndexPatternEmptyFields"]')
|
||||||
|
.find('button')
|
||||||
|
.first()
|
||||||
|
.simulate('click');
|
||||||
|
|
||||||
|
expect(wrapper.find('[aria-live="polite"]').text()).toEqual(
|
||||||
|
'1 available field. 1 empty field. 0 meta fields.'
|
||||||
|
);
|
||||||
|
});
|
||||||
|
|
||||||
it('should filter down by type', () => {
|
it('should filter down by type', () => {
|
||||||
const wrapper = mountWithIntl(<InnerIndexPatternDataPanel {...props} />);
|
const wrapper = mountWithIntl(<InnerIndexPatternDataPanel {...props} />);
|
||||||
|
|
||||||
|
|
|
@ -18,10 +18,12 @@ import {
|
||||||
EuiSpacer,
|
EuiSpacer,
|
||||||
EuiFilterGroup,
|
EuiFilterGroup,
|
||||||
EuiFilterButton,
|
EuiFilterButton,
|
||||||
|
EuiScreenReaderOnly,
|
||||||
} from '@elastic/eui';
|
} from '@elastic/eui';
|
||||||
import { i18n } from '@kbn/i18n';
|
import { i18n } from '@kbn/i18n';
|
||||||
import { FormattedMessage } from '@kbn/i18n/react';
|
import { FormattedMessage } from '@kbn/i18n/react';
|
||||||
import { DataPublicPluginStart, EsQueryConfig, Query, Filter } from 'src/plugins/data/public';
|
import { DataPublicPluginStart, EsQueryConfig, Query, Filter } from 'src/plugins/data/public';
|
||||||
|
import { htmlIdGenerator } from '@elastic/eui';
|
||||||
import { DatasourceDataPanelProps, DataType, StateSetter } from '../types';
|
import { DatasourceDataPanelProps, DataType, StateSetter } from '../types';
|
||||||
import { ChildDragDropProvider, DragContextState } from '../drag_drop';
|
import { ChildDragDropProvider, DragContextState } from '../drag_drop';
|
||||||
import {
|
import {
|
||||||
|
@ -222,6 +224,9 @@ const fieldFiltersLabel = i18n.translate('xpack.lens.indexPatterns.fieldFiltersL
|
||||||
defaultMessage: 'Field filters',
|
defaultMessage: 'Field filters',
|
||||||
});
|
});
|
||||||
|
|
||||||
|
const htmlId = htmlIdGenerator('datapanel');
|
||||||
|
const fieldSearchDescriptionId = htmlId();
|
||||||
|
|
||||||
export const InnerIndexPatternDataPanel = function InnerIndexPatternDataPanel({
|
export const InnerIndexPatternDataPanel = function InnerIndexPatternDataPanel({
|
||||||
currentIndexPatternId,
|
currentIndexPatternId,
|
||||||
indexPatternRefs,
|
indexPatternRefs,
|
||||||
|
@ -489,6 +494,7 @@ export const InnerIndexPatternDataPanel = function InnerIndexPatternDataPanel({
|
||||||
aria-label={i18n.translate('xpack.lens.indexPatterns.filterByNameAriaLabel', {
|
aria-label={i18n.translate('xpack.lens.indexPatterns.filterByNameAriaLabel', {
|
||||||
defaultMessage: 'Search fields',
|
defaultMessage: 'Search fields',
|
||||||
})}
|
})}
|
||||||
|
aria-describedby={fieldSearchDescriptionId}
|
||||||
/>
|
/>
|
||||||
</EuiFormControlLayout>
|
</EuiFormControlLayout>
|
||||||
|
|
||||||
|
@ -550,6 +556,19 @@ export const InnerIndexPatternDataPanel = function InnerIndexPatternDataPanel({
|
||||||
</EuiPopover>
|
</EuiPopover>
|
||||||
</EuiFilterGroup>
|
</EuiFilterGroup>
|
||||||
</EuiFlexItem>
|
</EuiFlexItem>
|
||||||
|
<EuiScreenReaderOnly>
|
||||||
|
<div aria-live="polite" id={fieldSearchDescriptionId}>
|
||||||
|
{i18n.translate('xpack.lens.indexPatterns.fieldSearchLiveRegion', {
|
||||||
|
defaultMessage:
|
||||||
|
'{availableFields} available {availableFields, plural, one {field} other {fields}}. {emptyFields} empty {emptyFields, plural, one {field} other {fields}}. {metaFields} meta {metaFields, plural, one {field} other {fields}}.',
|
||||||
|
values: {
|
||||||
|
availableFields: fieldGroups.AvailableFields.fields.length,
|
||||||
|
emptyFields: fieldGroups.EmptyFields.fields.length,
|
||||||
|
metaFields: fieldGroups.MetaFields.fields.length,
|
||||||
|
},
|
||||||
|
})}
|
||||||
|
</div>
|
||||||
|
</EuiScreenReaderOnly>
|
||||||
<EuiFlexItem>
|
<EuiFlexItem>
|
||||||
<FieldList
|
<FieldList
|
||||||
exists={(field) =>
|
exists={(field) =>
|
||||||
|
|
Loading…
Reference in a new issue