|
@@ -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>
|
|
|
);
|
|
|
}
|