SONAR-22287 Fix a11y issues on Background Tasks page

8 files changed, 21 insertions, 10 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}
diff --git a/server/sonar-web/src/main/js/apps/audit-logs/components/AuditAppRenderer.tsx b/server/sonar-web/src/main/js/apps/audit-logs/components/AuditAppRenderer.tsx
index 5b3da2702dc..a60cd4d2b49 100644
--- a/server/sonar-web/src/main/js/apps/audit-logs/components/AuditAppRenderer.tsx
+++ b/server/sonar-web/src/main/js/apps/audit-logs/components/AuditAppRenderer.tsx
@@ -124,7 +124,8 @@ export default function AuditAppRenderer(props: Readonly<AuditAppRendererProps>)
 
           <DateRangePicker
             className="sw-w-abs-350 sw-mt-4"
-            clearButtonLabel={translate('clear')}
+            startClearButtonLabel={translate('clear.start')}
+            endClearButtonLabel={translate('clear.end')}
             fromLabel={translate('start_date')}
             onChange={props.handleDateSelection}
             separatorText={translate('to_')}
diff --git a/server/sonar-web/src/main/js/apps/background-tasks/components/DateFilter.tsx b/server/sonar-web/src/main/js/apps/background-tasks/components/DateFilter.tsx
index d05cdf92034..30d379faaca 100644
--- a/server/sonar-web/src/main/js/apps/background-tasks/components/DateFilter.tsx
+++ b/server/sonar-web/src/main/js/apps/background-tasks/components/DateFilter.tsx
@@ -36,7 +36,8 @@ export default class DateFilter extends React.PureComponent<Props> {
     const dateRange = { from: this.props.minSubmittedAt, to: this.props.maxExecutedAt };
     return (
       <DateRangePicker
-        clearButtonLabel={translate('clear')}
+        startClearButtonLabel={translate('clear.start')}
+        endClearButtonLabel={translate('clear.end')}
         fromLabel={translate('start_date')}
         toLabel={translate('end_date')}
         onChange={this.handleDateRangeChange}
diff --git a/server/sonar-web/src/main/js/apps/issues/sidebar/CreationDateFacet.tsx b/server/sonar-web/src/main/js/apps/issues/sidebar/CreationDateFacet.tsx
index b1be9d09549..d1f8b48fc79 100644
--- a/server/sonar-web/src/main/js/apps/issues/sidebar/CreationDateFacet.tsx
+++ b/server/sonar-web/src/main/js/apps/issues/sidebar/CreationDateFacet.tsx
@@ -173,7 +173,8 @@ export class CreationDateFacetClass extends React.PureComponent<Props & WrappedC
 
     return (
       <DateRangePicker
-        clearButtonLabel={translate('clear')}
+        startClearButtonLabel={translate('clear.start')}
+        endClearButtonLabel={translate('clear.end')}
         fromLabel={translate('start_date')}
         onChange={this.handlePeriodChange}
         separatorText={translate('to_')}
diff --git a/server/sonar-web/src/main/js/apps/projectActivity/components/ProjectActivityDateInput.tsx b/server/sonar-web/src/main/js/apps/projectActivity/components/ProjectActivityDateInput.tsx
index 828c8d001b3..69bae180595 100644
--- a/server/sonar-web/src/main/js/apps/projectActivity/components/ProjectActivityDateInput.tsx
+++ b/server/sonar-web/src/main/js/apps/projectActivity/components/ProjectActivityDateInput.tsx
@@ -43,7 +43,8 @@ export default class ProjectActivityDateInput extends React.PureComponent<Props>
       <div className="sw-flex">
         <DateRangePicker
           className="sw-w-abs-350"
-          clearButtonLabel={translate('clear')}
+          startClearButtonLabel={translate('clear.start')}
+          endClearButtonLabel={translate('clear.end')}
           fromLabel={translate('start_date')}
           onChange={this.handleChange}
           separatorText={translate('to_')}
diff --git a/server/sonar-web/src/main/js/apps/quality-profiles/changelog/ChangelogSearch.tsx b/server/sonar-web/src/main/js/apps/quality-profiles/changelog/ChangelogSearch.tsx
index 62de980541c..a27365e78cb 100644
--- a/server/sonar-web/src/main/js/apps/quality-profiles/changelog/ChangelogSearch.tsx
+++ b/server/sonar-web/src/main/js/apps/quality-profiles/changelog/ChangelogSearch.tsx
@@ -36,7 +36,8 @@ export default function ChangelogSearch(props: ChangelogSearchProps) {
   return (
     <div className="sw-flex sw-gap-2">
       <DateRangePicker
-        clearButtonLabel={intl.formatMessage({ id: 'clear' })}
+        startClearButtonLabel={intl.formatMessage({ id: 'clear.start' })}
+        endClearButtonLabel={intl.formatMessage({ id: 'clear.end' })}
         fromLabel={intl.formatMessage({ id: 'start_date' })}
         inputSize="small"
         separatorText={intl.formatMessage({ id: 'to_' })}
diff --git a/sonar-core/src/main/resources/org/sonar/l10n/core.properties b/sonar-core/src/main/resources/org/sonar/l10n/core.properties
index fdc05423c42..7a7573f8bbd 100644
--- a/sonar-core/src/main/resources/org/sonar/l10n/core.properties
+++ b/sonar-core/src/main/resources/org/sonar/l10n/core.properties
@@ -415,6 +415,9 @@ Th=Th
 Fr=Fr
 Sa=Sa
 
+clear.start=Clear start date
+clear.end=Clear end date
+
 #------------------------------------------------------------------------------
 #
 # ALM