From b042b758d849665706949b9a2bbe41fd2f668964 Mon Sep 17 00:00:00 2001 From: Mathieu Suen Date: Wed, 1 Feb 2023 09:47:49 +0100 Subject: [PATCH] SONAR-18068 Incorrect semantic markup --- .../main/js/components/controls/DateInput.tsx | 56 +++++++++---------- .../controls/__tests__/DateInput-test.tsx | 8 +-- .../__snapshots__/DateInput-test.tsx.snap | 13 +++-- server/sonar-web/src/main/js/helpers/l10n.ts | 18 ++++++ .../resources/org/sonar/l10n/core.properties | 1 + 5 files changed, 58 insertions(+), 38 deletions(-) diff --git a/server/sonar-web/src/main/js/components/controls/DateInput.tsx b/server/sonar-web/src/main/js/components/controls/DateInput.tsx index 80174673eff..1c3766ea0d7 100644 --- a/server/sonar-web/src/main/js/components/controls/DateInput.tsx +++ b/server/sonar-web/src/main/js/components/controls/DateInput.tsx @@ -29,6 +29,7 @@ import CalendarIcon from '../../components/icons/CalendarIcon'; import ChevronLeftIcon from '../../components/icons/ChevronLeftIcon'; import ChevronRightIcon from '../../components/icons/ChevronRightIcon'; import { + getMonthName, getShortMonthName, getShortWeekDayName, getWeekDayName, @@ -65,7 +66,7 @@ interface State { type Week = [string, string, string, string, string, string, string]; -const LAST_MONTH_INDEX = 11; +const MONTH_IN_YEAR = 12; export default class DateInput extends React.PureComponent { input?: HTMLInputElement | null; @@ -128,32 +129,25 @@ export default class DateInput extends React.PureComponent { getPreviousMonthAriaLabel = () => { const { currentMonth } = this.state; - return currentMonth.getMonth() === 0 - ? translateWithParameters( - 'show_month_x_of_year_y', - getShortMonthName(LAST_MONTH_INDEX), - currentMonth.getFullYear() - 1 - ) - : translateWithParameters( - 'show_month_x_of_year_y', - getShortMonthName(currentMonth.getMonth() - 1), - currentMonth.getFullYear() - ); + const previous = (currentMonth.getMonth() + MONTH_IN_YEAR - 1) % MONTH_IN_YEAR; + + return translateWithParameters( + 'show_month_x_of_year_y', + getMonthName(previous), + currentMonth.getFullYear() - Math.floor(previous / (MONTH_IN_YEAR - 1)) + ); }; getNextMonthAriaLabel = () => { const { currentMonth } = this.state; - return currentMonth.getMonth() === LAST_MONTH_INDEX - ? translateWithParameters( - 'show_month_x_of_year_y', - getShortMonthName(0), - currentMonth.getFullYear() + 1 - ) - : translateWithParameters( - 'show_month_x_of_year_y', - getShortMonthName(currentMonth.getMonth() + 1), - currentMonth.getFullYear() - ); + + const next = (currentMonth.getMonth() + MONTH_IN_YEAR + 1) % MONTH_IN_YEAR; + + return translateWithParameters( + 'show_month_x_of_year_y', + getMonthName(next), + currentMonth.getFullYear() + 1 - Math.ceil(next / (MONTH_IN_YEAR - 1)) + ); }; render() { @@ -173,7 +167,7 @@ export default class DateInput extends React.PureComponent { const after = this.props.maxDate || new Date(); - const months = range(12); + const months = range(MONTH_IN_YEAR); const years = range(new Date().getFullYear() - 10, new Date().getFullYear() + 1); const selectedDays: Modifier[] = value ? [value] : []; @@ -226,8 +220,14 @@ export default class DateInput extends React.PureComponent { /> )} {open && ( -
- + } disabledDays={{ after, before: minDate }} @@ -276,7 +276,7 @@ export default class DateInput extends React.PureComponent { weekdaysLong={weekdaysLong} weekdaysShort={weekdaysShort} /> -
+ )} diff --git a/server/sonar-web/src/main/js/components/controls/__tests__/DateInput-test.tsx b/server/sonar-web/src/main/js/components/controls/__tests__/DateInput-test.tsx index 30bd6262f11..35067dd5e93 100644 --- a/server/sonar-web/src/main/js/components/controls/__tests__/DateInput-test.tsx +++ b/server/sonar-web/src/main/js/components/controls/__tests__/DateInput-test.tsx @@ -106,12 +106,12 @@ it('should hightlightTo range', () => { it('should announce the proper month and year for next/previous buttons aria label', () => { const { wrapper, instance } = shallowRender(); expect(wrapper.state().currentMonth).toEqual(dateA); - expect(instance.getPreviousMonthAriaLabel()).toEqual('show_month_x_of_year_y.Dec.2017'); - expect(instance.getNextMonthAriaLabel()).toEqual('show_month_x_of_year_y.Feb.2018'); + expect(instance.getPreviousMonthAriaLabel()).toEqual('show_month_x_of_year_y.December.2017'); + expect(instance.getNextMonthAriaLabel()).toEqual('show_month_x_of_year_y.February.2018'); instance.handleCurrentMonthChange({ value: 11 }); - expect(instance.getPreviousMonthAriaLabel()).toEqual('show_month_x_of_year_y.Nov.2018'); - expect(instance.getNextMonthAriaLabel()).toEqual('show_month_x_of_year_y.Jan.2019'); + expect(instance.getPreviousMonthAriaLabel()).toEqual('show_month_x_of_year_y.November.2018'); + expect(instance.getNextMonthAriaLabel()).toEqual('show_month_x_of_year_y.January.2019'); }); function shallowRender(props?: Partial) { diff --git a/server/sonar-web/src/main/js/components/controls/__tests__/__snapshots__/DateInput-test.tsx.snap b/server/sonar-web/src/main/js/components/controls/__tests__/__snapshots__/DateInput-test.tsx.snap index e6f37a0c6d7..b6d12dc1f09 100644 --- a/server/sonar-web/src/main/js/components/controls/__tests__/__snapshots__/DateInput-test.tsx.snap +++ b/server/sonar-web/src/main/js/components/controls/__tests__/__snapshots__/DateInput-test.tsx.snap @@ -109,14 +109,15 @@ exports[`should render 3`] = ` } onClick={[Function]} /> -
-
- + } @@ -362,7 +363,7 @@ exports[`should render 3`] = ` ] } /> - + diff --git a/server/sonar-web/src/main/js/helpers/l10n.ts b/server/sonar-web/src/main/js/helpers/l10n.ts index 0f4d35e40e7..6065fdc3e5a 100644 --- a/server/sonar-web/src/main/js/helpers/l10n.ts +++ b/server/sonar-web/src/main/js/helpers/l10n.ts @@ -74,6 +74,24 @@ export function getLocalizedMetricDomain(domainName: string) { return hasMessage(bundleKey) ? translate(bundleKey) : domainName; } +export function getMonthName(index: number) { + const months = [ + 'January', + 'February', + 'March', + 'April', + 'May', + 'June', + 'July', + 'August', + 'September', + 'October', + 'November', + 'December', + ]; + return translate(months[index]); +} + export function getShortMonthName(index: number) { const months = [ 'Jan', 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 058f5be8573..e188285828e 100644 --- a/sonar-core/src/main/resources/org/sonar/l10n/core.properties +++ b/sonar-core/src/main/resources/org/sonar/l10n/core.properties @@ -371,6 +371,7 @@ Sa=Sa select_month=Select a month show_month_x_of_year_y=Show {0} of {1} select_year=Select a year +date.select_month_and_year_x=Select the month and year, currently {0} #------------------------------------------------------------------------------ # -- 2.39.5