getShortWeekDayName,
getWeekDayName,
translate,
+ translateWithParameters,
} from '../../helpers/l10n';
import './DayPicker.css';
import EscKeydownHandler from './EscKeydownHandler';
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;
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,
{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">
)}
/>
</div>
- <ButtonIcon className="button-small" onClick={this.handleNextMonthClick}>
+ <ButtonIcon
+ className="button-small"
+ aria-label={this.getNextMonthAriaLabel()}
+ onClick={this.handleNextMonthClick}
+ >
<ChevronRightIcon />
</ButtonIcon>
</nav>
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