SONAR-22287 Fix a11y issues on Background Tasks page

2 files changed, 8 insertions, 5 deletions

diff --git a/server/sonar-web/design-system/src/components/input/DateRangePicker.tsx b/server/sonar-web/design-system/src/components/input/DateRangePicker.tsx
index db4b32351e0..03bcdaa302e 100644
--- a/server/sonar-web/design-system/src/components/input/DateRangePicker.tsx
+++ b/server/sonar-web/design-system/src/components/input/DateRangePicker.tsx
@@ -33,13 +33,14 @@ interface DateRange {
 interface Props {
   alignEndDateCalandarRight?: boolean;
   className?: string;
-  clearButtonLabel: string;
+  endClearButtonLabel: string;
   fromLabel: string;
   inputSize?: InputSizeKeys;
   maxDate?: Date;
   minDate?: Date;
   onChange: (date: DateRange) => void;
   separatorText?: string;
+  startClearButtonLabel: string;
   toLabel: string;
   value?: DateRange;
   valueFormatter?: (date?: Date) => string;
@@ -75,7 +76,8 @@ export class DateRangePicker extends React.PureComponent<Props> {
   render() {
     const {
       alignEndDateCalandarRight,
-      clearButtonLabel,
+      startClearButtonLabel,
+      endClearButtonLabel,
       fromLabel,
       inputSize = 'full',
       minDate,
@@ -89,7 +91,7 @@ export class DateRangePicker extends React.PureComponent<Props> {
     return (
       <div className={classNames('sw-flex sw-items-center', this.props.className)}>
         <DatePicker
-          clearButtonLabel={clearButtonLabel}
+          clearButtonLabel={startClearButtonLabel}
           currentMonth={this.to}
           data-test="from"
           highlightTo={this.to}
@@ -106,7 +108,7 @@ export class DateRangePicker extends React.PureComponent<Props> {
         <LightLabel className="sw-mx-2">{separatorText ?? '–'}</LightLabel>
         <DatePicker
           alignRight={alignEndDateCalandarRight}
-          clearButtonLabel={clearButtonLabel}
+          clearButtonLabel={endClearButtonLabel}
           currentMonth={this.from}
           data-test="to"
           highlightFrom={this.from}
diff --git a/server/sonar-web/design-system/src/components/input/__tests__/DateRangePicker-test.tsx b/server/sonar-web/design-system/src/components/input/__tests__/DateRangePicker-test.tsx
index 51cb03f6f98..21489a311ed 100644
--- a/server/sonar-web/design-system/src/components/input/__tests__/DateRangePicker-test.tsx
+++ b/server/sonar-web/design-system/src/components/input/__tests__/DateRangePicker-test.tsx
@@ -82,9 +82,10 @@ function renderDateRangePicker(overrides: Partial<DateRangePicker['props']> = {}
   render(
     <IntlWrapper messages={{ next_: 'next', previous_: 'previous' }}>
       <DateRangePicker
-        clearButtonLabel="clear"
+        endClearButtonLabel="clear end date"
         fromLabel="from"
         onChange={jest.fn()}
+        startClearButtonLabel="clear start date"
         toLabel="to"
         valueFormatter={defaultFormatter}
         {...overrides}