[Uptime] Improve accessibility labeling for FilterPopover component (…

…elastic#99714) * Improve accessibility labeling for `FilterPopover` component. * Simplify test revisions. * Simplify unit test. * Refactor test to use text formatter helper functions.
justinkambic · May 14, 2021 · 90db9df · 90db9df
1 parent 47f4bfc
commit 90db9df
Show file tree

Hide file tree

Showing 2 changed files with 46 additions and 19 deletions.
diff --git a/x-pack/plugins/uptime/public/components/overview/filter_group/filter_popover.test.tsx b/x-pack/plugins/uptime/public/components/overview/filter_group/filter_popover.test.tsx
@@ -7,7 +7,12 @@
 
 import React from 'react';
 import { fireEvent, waitFor, waitForElementToBeRemoved } from '@testing-library/react';
-import { FilterPopoverProps, FilterPopover } from './filter_popover';
+import {
+  FilterPopoverProps,
+  FilterPopover,
+  removeFilterForItemLabel,
+  filterByItemLabel,
+} from './filter_popover';
 import { render } from '../../../lib/helper/rtl_helpers';
 
 describe('FilterPopover component', () => {
@@ -77,17 +82,25 @@ describe('FilterPopover component', () => {
 
       fireEvent.click(uptimeFilterButton);
 
-      const generateLabelText = (item: string) => `Filter by ${props.title} ${item}.`;
+      selectedPropsItems.forEach((item) => {
+        expect(getByLabelText(removeFilterForItemLabel(item, props.title)));
+      });
 
       itemsToClick.forEach((item) => {
-        const optionButtonLabelText = generateLabelText(item);
-        const optionButton = getByLabelText(optionButtonLabelText);
+        let optionButton: HTMLElement;
+        if (selectedPropsItems.some((i) => i === item)) {
+          optionButton = getByLabelText(removeFilterForItemLabel(item, props.title));
+        } else {
+          optionButton = getByLabelText(filterByItemLabel(item, props.title));
+        }
         fireEvent.click(optionButton);
       });
 
       fireEvent.click(uptimeFilterButton);
 
-      await waitForElementToBeRemoved(() => queryByLabelText(generateLabelText(itemsToClick[0])));
+      await waitForElementToBeRemoved(() =>
+        queryByLabelText(`by ${props.title} ${itemsToClick[0]}`, { exact: false })
+      );
 
       expect(props.onFilterFieldChange).toHaveBeenCalledTimes(1);
       expect(props.onFilterFieldChange).toHaveBeenCalledWith(props.fieldName, expectedSelections);

diff --git a/x-pack/plugins/uptime/public/components/overview/filter_group/filter_popover.tsx b/x-pack/plugins/uptime/public/components/overview/filter_group/filter_popover.tsx
@@ -29,6 +29,18 @@ export interface FilterPopoverProps {
 const isItemSelected = (selectedItems: string[], item: string): 'on' | undefined =>
   selectedItems.find((selected) => selected === item) ? 'on' : undefined;
 
+export const filterByItemLabel = (item: string, title: string) =>
+  i18n.translate('xpack.uptime.filterPopover.filterItem.label', {
+    defaultMessage: 'Filter by {title} {item}.',
+    values: { item, title },
+  });
+
+export const removeFilterForItemLabel = (item: string, title: string) =>
+  i18n.translate('xpack.uptime.filterPopover.removeFilterItem.label', {
+    defaultMessage: 'Remove filter by {title} {item}.',
+    values: { item, title },
+  });
+
 export const FilterPopover = ({
   fieldName,
   id,
@@ -126,20 +138,22 @@ export const FilterPopover = ({
         />
       </EuiPopoverTitle>
       {!loading &&
-        itemsToDisplay.map((item) => (
-          <EuiFilterSelectItem
-            aria-label={i18n.translate('xpack.uptime.filterPopover.filterItem.label', {
-              defaultMessage: 'Filter by {title} {item}.',
-              values: { item, title },
-            })}
-            checked={isItemSelected(tempSelectedItems, item)}
-            data-test-subj={`filter-popover-item_${item}`}
-            key={item}
-            onClick={() => toggleSelectedItems(item, tempSelectedItems, setTempSelectedItems)}
-          >
-            {item}
-          </EuiFilterSelectItem>
-        ))}
+        itemsToDisplay.map((item) => {
+          const checked = isItemSelected(tempSelectedItems, item);
+          return (
+            <EuiFilterSelectItem
+              aria-label={
+                checked ? removeFilterForItemLabel(item, title) : filterByItemLabel(item, title)
+              }
+              checked={checked}
+              data-test-subj={`filter-popover-item_${item}`}
+              key={item}
+              onClick={() => toggleSelectedItems(item, tempSelectedItems, setTempSelectedItems)}
+            >
+              {item}
+            </EuiFilterSelectItem>
+          );
+        })}
       {id === 'location' && items.length === 0 && <LocationLink />}
     </EuiPopover>
   );