fix: [Security:Rules:Detection Rules:Create Rule] Time input interval…

… spinner for timeperiod input to suppress alerts is missing form label (#205387) Closes: #204498 ## Description The time input interval box for timeperiod input for suppressing alerts is missing form label Preconditions: Security -> Rules->Detection Rules(SIEM) page is open ## Changes made: `aria-label` attribute was added for mentioned place ## Screen: ![image](https://github.com/user-attachments/assets/0d78a57d-8b96-4d53-ac69-39d3f2ae42ba)
elastic · Jan 3, 2025 · 020e17e · 020e17e
1 parent 2ef573b
commit 020e17e
Show file tree

Hide file tree

Showing 3 changed files with 5 additions and 1 deletion.
diff --git a/...e_creation/components/alert_suppression_edit/components/suppression_duration_selector.tsx b/...e_creation/components/alert_suppression_edit/components/suppression_duration_selector.tsx
@@ -132,6 +132,7 @@ const SuppressionDurationSelectorFields = memo(function SuppressionDurationSelec
             disabled ||
             suppressionDurationSelectorField.value !== AlertSuppressionDurationType.PerTimePeriod
           }
+          aria-label={i18n.ALERT_SUPPRESSION_DURATION_PER_TIME_PERIOD_OPTION}
           minimumValue={1}
         />
       </div>

diff --git a/...n/public/detection_engine/rule_creation/components/alert_suppression_edit/test_helpers.ts b/...n/public/detection_engine/rule_creation/components/alert_suppression_edit/test_helpers.ts
@@ -40,7 +40,7 @@ export function expectSuppressionFields(fieldNames: string[]): void {
 
 export function setDurationType(value: 'Per rule execution' | 'Per time period'): void {
   act(() => {
-    fireEvent.click(within(screen.getByTestId('alertSuppressionDuration')).getByLabelText(value));
+    fireEvent.click(within(screen.getByTestId('alertSuppressionDuration')).getByText(value));
   });
 }
 

diff --git a/...curity_solution/public/detection_engine/rule_creation/components/duration_input/index.tsx b/...curity_solution/public/detection_engine/rule_creation/components/duration_input/index.tsx
@@ -18,6 +18,7 @@ interface DurationInputProps {
   minimumValue?: number;
   isDisabled: boolean;
   durationUnitOptions?: Array<{ value: 's' | 'm' | 'h' | 'd'; text: string }>;
+  'aria-label'?: string;
 }
 
 // This component is similar to the ScheduleItem component, but instead of combining the value
@@ -33,6 +34,7 @@ export const DurationInput = memo(function DurationInputComponent({
     { value: 'm', text: I18n.MINUTES },
     { value: 'h', text: I18n.HOURS },
   ],
+  'aria-label': ariaLabel,
   ...props
 }: DurationInputProps): JSX.Element {
   const { euiTheme } = useEuiTheme();
@@ -98,6 +100,7 @@ export const DurationInput = memo(function DurationInputComponent({
         onChange={onChangeTimeVal}
         value={durationValue}
         data-test-subj="interval"
+        aria-label={ariaLabel}
         {...rest}
       />
     </EuiFormRow>