Browse Source

ref(ui): Improve testability of select clear button (#68803)

Our `selectEvents.clearAll` doesn't seem to work, so this is at least a
minor workaround to test clearing select inputs
Evan Purkhiser 11 months ago
parent
commit
407b92cb65
1 changed files with 9 additions and 2 deletions
  1. 9 2
      static/app/components/forms/controls/selectControl.tsx

+ 9 - 2
static/app/components/forms/controls/selectControl.tsx

@@ -21,6 +21,7 @@ import omit from 'lodash/omit';
 
 import LoadingIndicator from 'sentry/components/loadingIndicator';
 import {IconChevron, IconClose} from 'sentry/icons';
+import {t} from 'sentry/locale';
 import {space} from 'sentry/styles/space';
 import type {Choices, SelectValue} from 'sentry/types';
 import convertFromSelect2Choices from 'sentry/utils/convertFromSelect2Choices';
@@ -45,9 +46,12 @@ function isGroupedOptions<OptionType extends OptionTypeBase>(
 function ClearIndicator(
   props: React.ComponentProps<typeof selectComponents.ClearIndicator>
 ) {
+  // XXX(epurkhiser): In react-selct 5 accessibility is greatly improved, for
+  // now we manually add aria labels to these interactive elements to help with
+  // testing
   return (
     <selectComponents.ClearIndicator {...props}>
-      <IconClose legacySize="10px" />
+      <IconClose aria-label={t('Clear choices')} legacySize="10px" />
     </selectComponents.ClearIndicator>
   );
 }
@@ -65,9 +69,12 @@ function DropdownIndicator(
 function MultiValueRemove(
   props: React.ComponentProps<typeof selectComponents.MultiValueRemove>
 ) {
+  // XXX(epurkhiser): In react-selct 5 accessibility is greatly improved, for
+  // now we manually add aria labels to these interactive elements to help with
+  // testing
   return (
     <selectComponents.MultiValueRemove {...props}>
-      <IconClose legacySize="8px" />
+      <IconClose aria-label={t('Remove item')} legacySize="8px" />
     </selectComponents.MultiValueRemove>
   );
 }