From: guillaume-peoch-sonarsource <guillaume.peoch@sonarsource.com>
Date: Tue, 31 Jan 2023 15:56:27 +0000 (+0100)
Subject: SONAR-18068 Buttons must have discernible text
X-Git-Tag: 10.0.0.68432~292
X-Git-Url: https://source.dussan.org/?a=commitdiff_plain;h=b53ddd89328a366908ad45855de507f571a1b6c6;p=sonarqube.git

SONAR-18068 Buttons must have discernible text
---

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 96ce359c17c..80174673eff 100644
--- a/server/sonar-web/src/main/js/components/controls/DateInput.tsx
+++ b/server/sonar-web/src/main/js/components/controls/DateInput.tsx
@@ -33,6 +33,7 @@ import {
   getShortWeekDayName,
   getWeekDayName,
   translate,
+  translateWithParameters,
 } from '../../helpers/l10n';
 import './DayPicker.css';
 import EscKeydownHandler from './EscKeydownHandler';
@@ -64,6 +65,8 @@ interface State {
 
 type Week = [string, string, string, string, string, string, string];
 
+const LAST_MONTH_INDEX = 11;
+
 export default class DateInput extends React.PureComponent<Props, State> {
   input?: HTMLInputElement | null;
 
@@ -123,6 +126,36 @@ export default class DateInput extends React.PureComponent<Props, State> {
     this.setState((state) => ({ currentMonth: addMonths(state.currentMonth, 1) }));
   };
 
+  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()
+        );
+  };
+
+  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()
+        );
+  };
+
   render() {
     const {
       alignRight,
@@ -195,7 +228,11 @@ export default class DateInput extends React.PureComponent<Props, State> {
               {open && (
                 <div className={classNames('date-input-calendar', { 'align-right': alignRight })}>
                   <nav className="date-input-calendar-nav">
-                    <ButtonIcon className="button-small" onClick={this.handlePreviousMonthClick}>
+                    <ButtonIcon
+                      className="button-small"
+                      aria-label={this.getPreviousMonthAriaLabel()}
+                      onClick={this.handlePreviousMonthClick}
+                    >
                       <ChevronLeftIcon />
                     </ButtonIcon>
                     <div className="date-input-calender-month">
@@ -218,7 +255,11 @@ export default class DateInput extends React.PureComponent<Props, State> {
                         )}
                       />
                     </div>
-                    <ButtonIcon className="button-small" onClick={this.handleNextMonthClick}>
+                    <ButtonIcon
+                      className="button-small"
+                      aria-label={this.getNextMonthAriaLabel()}
+                      onClick={this.handleNextMonthClick}
+                    >
                       <ChevronRightIcon />
                     </ButtonIcon>
                   </nav>
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 93500bcbe5f..30bd6262f11 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
@@ -103,6 +103,17 @@ it('should hightlightTo range', () => {
   expect(dayPicker.prop('selectedDays')).toEqual([dateB]);
 });
 
+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');
+
+  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');
+});
+
 function shallowRender(props?: Partial<DateInput['props']>) {
   const wrapper = shallow<DateInput>(
     <DateInput
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 bfe52a639ce..e6f37a0c6d7 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
@@ -116,6 +116,7 @@ exports[`should render 3`] = `
             className="date-input-calendar-nav"
           >
             <ButtonIcon
+              aria-label="show_month_x_of_year_y.Dec.2017"
               className="button-small"
               onClick={[Function]}
             >
@@ -248,6 +249,7 @@ exports[`should render 3`] = `
               />
             </div>
             <ButtonIcon
+              aria-label="show_month_x_of_year_y.Feb.2018"
               className="button-small"
               onClick={[Function]}
             >
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 e6d4da7b615..922a5e29dc1 100644
--- a/sonar-core/src/main/resources/org/sonar/l10n/core.properties
+++ b/sonar-core/src/main/resources/org/sonar/l10n/core.properties
@@ -369,6 +369,7 @@ Th=Th
 Fr=Fr
 Sa=Sa
 select_month=Select a month
+show_month_x_of_year_y=Show {0} of {1}
 select_year=Select a year
 
 #------------------------------------------------------------------------------