SONAR-22287 Fix a11y issues on Background Tasks page

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 db4b32351e0a070c46a83eb84d752a1b2636a56a..03bcdaa302e6a9e330d6eada1f7a6f6c1fd1a1de 100644 (file)
--- 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 51cb03f6f9819b88e5e39c269c9d0bb7bfbc8894..21489a311ed60ba1f3e3f16d0f82e9aeda57d5f6 100644 (file)
--- 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 5b3da2702dca34c266fb115bc5cdbe0647722b37..a60cd4d2b494780af81583f41815fd2d0be6724a 100644 (file)
--- 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 d05cdf92034e0e61af34463299562b236978161d..30d379faacae4cc9c9b930b7dc9765d64b92ef8b 100644 (file)
--- 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 b1be9d0954946b5a5d5c29f05f3f3864e1782d32..d1f8b48fc7983c32ae61e8d11cfb95af3af311f0 100644 (file)
--- 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 828c8d001b32d15c27e6113a158f6ab835d4dc1e..69bae18059550556f4da214a7f6e4fba618e5cc3 100644 (file)
--- 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 62de980541c3d4093ecea4d5a3fba20403047bfc..a27365e78cb9cc72361f23633246abae9a36f45a 100644 (file)
--- 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 fdc05423c42e2f6ac860f016d8e9362ac08d02d6..7a7573f8bbde567ca1a807709680709ee50ae82a 100644 (file)
--- 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