ref(ui): add missing translations to aria labels (#70257)

static/app/components/group/issueReplayCount.tsx

@@ -40,7 +40,7 @@ function IssueReplayCount({group}: Props) {
         to={normalizeUrl(
           `/organizations/${organization.slug}/issues/${group.id}/replays/`
         )}
-        aria-label="replay-count"
+        aria-label={t('replay-count')}
       >
         <IconPlay size="xs" />
         {countDisplay}

static/app/components/modals/metricWidgetViewerModal/header.tsx

@@ -4,6 +4,7 @@ import {Button} from 'sentry/components/button';
 import Input from 'sentry/components/input';
 import {Tooltip} from 'sentry/components/tooltip';
 import {IconCheckmark, IconEdit} from 'sentry/icons';
+import {t} from 'sentry/locale';
 import {space} from 'sentry/styles/space';
 import {WidgetDescription} from 'sentry/views/dashboards/widgetCard';
 
@@ -47,7 +48,7 @@ export function MetricWidgetTitle({
           <h3>{titleToDisplay}</h3>
         )}
         <Button
-          aria-label="Edit Title"
+          aria-label={t('Edit Title')}
           size="sm"
           borderless
           icon={title.isEditing ? <IconCheckmark size="sm" /> : <IconEdit size="sm" />}

static/app/components/modals/metricWidgetViewerModal/queries.tsx

@@ -416,7 +416,7 @@ function ExpressionAliasForm({
       <Tooltip title={t('Clear alias')} delay={SLOW_TOOLTIP_DELAY}>
         <StyledButton
           icon={<IconDelete size="xs" />}
-          aria-label="Clear Alias"
+          aria-label={t('Clear Alias')}
           onClick={() => onChange(undefined)}
         />
       </Tooltip>

static/app/components/organizations/pageFilters/pageFilterPinIndicator.tsx

@@ -1,6 +1,7 @@
 import styled from '@emotion/styled';
 
 import {IconLock} from 'sentry/icons';
+import {t} from 'sentry/locale';
 import {space} from 'sentry/styles/space';
 import type {PinnedPageFilter} from 'sentry/types';
 import usePageFilters from 'sentry/utils/usePageFilters';
@@ -18,7 +19,7 @@ function PageFilterPinIndicator({children, filter}: Props) {
     <Wrap>
       {children}
       {pinned && (
-        <IndicatorWrap aria-label="Filter applied across pages">
+        <IndicatorWrap aria-label={t('Filter applied across pages')}>
           <StyledIconLock size="xs" isSolid />
         </IndicatorWrap>
       )}

static/app/components/profiling/flamegraph/flamegraphToolbar/flamegraphViewSelectMenu.tsx

@@ -20,7 +20,7 @@ function FlamegraphViewSelectMenu({
   return (
     <FlamegraphViewSelectMenuWrap>
       <SegmentedControl
-        aria-label="Sorting"
+        aria-label={t('Sorting')}
         size="xs"
         value={sorting}
         priority="primary"
@@ -33,7 +33,7 @@ function FlamegraphViewSelectMenu({
         <SegmentedControl.Item key="left heavy">{t('Left Heavy')}</SegmentedControl.Item>
       </SegmentedControl>
       <SegmentedControl
-        aria-label="View"
+        aria-label={t('View')}
         size="xs"
         value={view}
         onChange={onViewChange}

static/app/components/smartSearchBar/searchBarDatePicker.tsx

@@ -142,7 +142,7 @@ function TimeInput({time, setTime}: TimeInputProps) {
   return (
     <Input
       ref={timeInputRef}
-      aria-label="Time"
+      aria-label={t('Time')}
       type="time"
       data-test-id="search-bar-date-picker-time-input"
       onChange={(e: React.ChangeEvent<HTMLInputElement>) => {

static/app/views/dashboards/addWidget.tsx

@@ -67,7 +67,7 @@ function AddWidget({onAddWidget}: Props) {
         <InnerWrapper>
           <AddWidgetButton
             onAddWidget={onAddWidget}
-            aria-label="Add Widget"
+            aria-label={t('Add Widget')}
             data-test-id="widget-add"
           />
         </InnerWrapper>

static/app/views/dashboards/controls.tsx

@@ -174,7 +174,7 @@ function Controls({
                 {hasCustomMetrics(organization) ? (
                   <AddWidgetButton
                     onAddWidget={onAddWidget}
-                    aria-label="Add Widget"
+                    aria-label={t('Add Widget')}
                     priority="primary"
                     data-test-id="add-widget-library"
                     disabled={widgetLimitReached}

static/app/views/dashboards/widgetBuilder/buildSteps/sortByStep/sortBySelectors.tsx

@@ -82,7 +82,7 @@ export function SortBySelectors({
       >
         <SelectControl
           name="sortDirection"
-          aria-label="Sort direction"
+          aria-label={t('Sort direction')}
           menuPlacement="auto"
           disabled={disableSortDirection}
           options={Object.keys(sortDirections).map(value => ({
@@ -105,7 +105,7 @@ export function SortBySelectors({
         {displayType === DisplayType.TABLE ? (
           <SelectControl
             name="sortBy"
-            aria-label="Sort by"
+            aria-label={t('Sort by')}
             menuPlacement="auto"
             disabled={disableSort}
             placeholder={`${t('Select a column')}\u{2026}`}

static/app/views/metrics/chart/useFocusArea.tsx

@@ -10,6 +10,7 @@ import moment from 'moment';
 import {Button} from 'sentry/components/button';
 import type {DateTimeObject} from 'sentry/components/charts/utils';
 import {IconClose, IconZoom} from 'sentry/icons';
+import {t} from 'sentry/locale';
 import {space} from 'sentry/styles/space';
 import type {DateString} from 'sentry/types/core';
 import type {EChartBrushEndHandler, ReactEchartsRef} from 'sentry/types/echarts';
@@ -321,9 +322,14 @@ function FocusAreaOverlay({
           size="xs"
           onClick={onZoom}
           icon={<IconZoom isZoomIn />}
-          aria-label="zoom"
+          aria-label={t('zoom')}
+        />
+        <Button
+          size="xs"
+          onClick={onRemove}
+          icon={<IconClose />}
+          aria-label={t('remove')}
         />
-        <Button size="xs" onClick={onRemove} icon={<IconClose />} aria-label="remove" />
       </FocusAreaRectActions>
     </Fragment>
   );