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', () => {
|
||||
const wrapper = mountWithIntl(<InnerIndexPatternDataPanel {...props} />);
|
||||
|
||||
|
|
|
@ -18,10 +18,12 @@ import {
|
|||
EuiSpacer,
|
||||
EuiFilterGroup,
|
||||
EuiFilterButton,
|
||||
EuiScreenReaderOnly,
|
||||
} from '@elastic/eui';
|
||||
import { i18n } from '@kbn/i18n';
|
||||
import { FormattedMessage } from '@kbn/i18n/react';
|
||||
import { DataPublicPluginStart, EsQueryConfig, Query, Filter } from 'src/plugins/data/public';
|
||||
import { htmlIdGenerator } from '@elastic/eui';
|
||||
import { DatasourceDataPanelProps, DataType, StateSetter } from '../types';
|
||||
import { ChildDragDropProvider, DragContextState } from '../drag_drop';
|
||||
import {
|
||||
|
@ -222,6 +224,9 @@ const fieldFiltersLabel = i18n.translate('xpack.lens.indexPatterns.fieldFiltersL
|
|||
defaultMessage: 'Field filters',
|
||||
});
|
||||
|
||||
const htmlId = htmlIdGenerator('datapanel');
|
||||
const fieldSearchDescriptionId = htmlId();
|
||||
|
||||
export const InnerIndexPatternDataPanel = function InnerIndexPatternDataPanel({
|
||||
currentIndexPatternId,
|
||||
indexPatternRefs,
|
||||
|
@ -489,6 +494,7 @@ export const InnerIndexPatternDataPanel = function InnerIndexPatternDataPanel({
|
|||
aria-label={i18n.translate('xpack.lens.indexPatterns.filterByNameAriaLabel', {
|
||||
defaultMessage: 'Search fields',
|
||||
})}
|
||||
aria-describedby={fieldSearchDescriptionId}
|
||||
/>
|
||||
</EuiFormControlLayout>
|
||||
|
||||
|
@ -550,6 +556,19 @@ export const InnerIndexPatternDataPanel = function InnerIndexPatternDataPanel({
|
|||
</EuiPopover>
|
||||
</EuiFilterGroup>
|
||||
</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>
|
||||
<FieldList
|
||||
exists={(field) =>
|
||||
|
|
Loading…
Reference in a new issue