add live region for field search (#84310)

elastic · Nov 25, 2020 · 5b2e119 · 5b2e119
1 parent 280ce7e
commit 5b2e119
Show file tree

Hide file tree

Showing 2 changed files with 38 additions and 0 deletions.
diff --git a/x-pack/plugins/lens/public/indexpattern_datasource/datapanel.test.tsx b/x-pack/plugins/lens/public/indexpattern_datasource/datapanel.test.tsx
@@ -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} />);
 

diff --git a/x-pack/plugins/lens/public/indexpattern_datasource/datapanel.tsx b/x-pack/plugins/lens/public/indexpattern_datasource/datapanel.tsx
@@ -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) =>