Skip to content

Commit

Permalink
Dynamic aria labels fix (#2063)
Browse files Browse the repository at this point in the history 
* Added aria-label props to parent components

* Use enzyme instead of React TestUtils
  • Loading branch information
@oscarcarlstrom
oscarcarlstrom committed Feb 21, 2020
1 parent 3b720a3 commit 70ebb0a
Show file tree
Hide file tree
Showing 5 changed files with 103 additions and 12 deletions.
26 changes: 19 additions & 7 deletions src/calendar.jsx
View file
Expand Up @@ -68,16 +68,14 @@ export default class Calendar extends React.Component {

static propTypes = {
adjustDateOnChange: PropTypes.bool,
previousMonthAriaLabel: PropTypes.string,
nextMonthAriaLabel: PropTypes.string,
previousYearAriaLabel: PropTypes.string,
nextYearAriaLabel: PropTypes.string,
chooseDayAriaLabelPrefix: PropTypes.string,
className: PropTypes.string,
children: PropTypes.node,
container: PropTypes.func,
dateFormat: PropTypes.oneOfType([PropTypes.string, PropTypes.array])
.isRequired,
dayClassName: PropTypes.func,
disabledDayAriaLabelPrefix: PropTypes.string,
monthClassName: PropTypes.func,
timeClassName: PropTypes.func,
disabledKeyboardNavigation: PropTypes.bool,
Expand All @@ -100,6 +98,8 @@ export default class Calendar extends React.Component {
minDate: PropTypes.instanceOf(Date),
monthsShown: PropTypes.number,
monthSelectedIn: PropTypes.number,
nextMonthAriaLabel: PropTypes.string,
nextYearAriaLabel: PropTypes.string,
onClickOutside: PropTypes.func.isRequired,
onMonthChange: PropTypes.func,
onYearChange: PropTypes.func,
Expand All @@ -122,6 +122,8 @@ export default class Calendar extends React.Component {
timeCaption: PropTypes.string,
openToDate: PropTypes.instanceOf(Date),
peekNextMonth: PropTypes.bool,
previousMonthAriaLabel: PropTypes.string,
previousYearAriaLabel: PropTypes.string,
scrollableYearDropdown: PropTypes.bool,
scrollableMonthYearDropdown: PropTypes.bool,
preSelection: PropTypes.instanceOf(Date),
Expand Down Expand Up @@ -155,7 +157,8 @@ export default class Calendar extends React.Component {
showPopperArrow: PropTypes.bool,
handleOnKeyDown: PropTypes.func,
isInputFocused: PropTypes.bool,
customTimeInput: PropTypes.element
customTimeInput: PropTypes.element,
weekAriaLabelPrefix: PropTypes.string
};

constructor(props) {
Expand Down Expand Up @@ -393,7 +396,10 @@ export default class Calendar extends React.Component {
const isForYear =
this.props.showMonthYearPicker || this.props.showQuarterYearPicker;

const { previousMonthAriaLabel = "Previous Month", previousYearAriaLabel = "Previous Year" } = this.props;
const {
previousMonthAriaLabel = "Previous Month",
previousYearAriaLabel = "Previous Year"
} = this.props;

return (
<button
Expand Down Expand Up @@ -461,7 +467,10 @@ export default class Calendar extends React.Component {
const isForYear =
this.props.showMonthYearPicker || this.props.showQuarterYearPicker;

const { nextMonthAriaLabel = "Previous Month", nextYearAriaLabel = "Previous Year" } = this.props;
const {
nextMonthAriaLabel = "Previous Month",
nextYearAriaLabel = "Previous Year"
} = this.props;

return (
<button
Expand Down Expand Up @@ -674,6 +683,9 @@ export default class Calendar extends React.Component {
>
{this.renderHeader({ monthDate, i })}
<Month
chooseDayAriaLabelPrefix={this.props.chooseDayAriaLabelPrefix}
disabledDayAriaLabelPrefix={this.props.disabledDayAriaLabelPrefix}
weekAriaLabelPrefix={this.props.weekAriaLabelPrefix}
onChange={this.changeMonthYear}
day={monthDate}
dayClassName={this.props.dayClassName}
Expand Down
15 changes: 13 additions & 2 deletions src/index.jsx
View file
Expand Up @@ -120,13 +120,15 @@ export default class DatePicker extends React.Component {
calendarClassName: PropTypes.string,
calendarContainer: PropTypes.func,
children: PropTypes.node,
chooseDayAriaLabelPrefix: PropTypes.string,
className: PropTypes.string,
customInput: PropTypes.element,
customInputRef: PropTypes.string,
// eslint-disable-next-line react/no-unused-prop-types
dateFormat: PropTypes.oneOfType([PropTypes.string, PropTypes.array]),
dateFormatCalendar: PropTypes.string,
dayClassName: PropTypes.func,
disabledDayAriaLabelPrefix: PropTypes.string,
monthClassName: PropTypes.func,
timeClassName: PropTypes.func,
disabled: PropTypes.bool,
Expand Down Expand Up @@ -230,7 +232,8 @@ export default class DatePicker extends React.Component {
showPopperArrow: PropTypes.bool,
excludeScrollbar: PropTypes.bool,
enableTabLoop: PropTypes.bool,
customTimeInput: PropTypes.element
customTimeInput: PropTypes.element,
weekAriaLabelPrefix: PropTypes.string
};

constructor(props) {
Expand Down Expand Up @@ -707,6 +710,9 @@ export default class DatePicker extends React.Component {
this.calendar = elem;
}}
locale={this.props.locale}
chooseDayAriaLabelPrefix={this.props.chooseDayAriaLabelPrefix}
disabledDayAriaLabelPrefix={this.props.disabledDayAriaLabelPrefix}
weekAriaLabelPrefix={this.props.weekAriaLabelPrefix}
adjustDateOnChange={this.props.adjustDateOnChange}
setOpen={this.setOpen}
shouldCloseOnSelect={this.props.shouldCloseOnSelect}
Expand Down Expand Up @@ -835,7 +841,12 @@ export default class DatePicker extends React.Component {
};

renderClearButton = () => {
const { isClearable, selected, clearButtonTitle, ariaLabelClose = "Close" } = this.props;
const {
isClearable,
selected,
clearButtonTitle,
ariaLabelClose = "Close"
} = this.props;
if (isClearable && selected != null) {
return (
<button
Expand Down
15 changes: 13 additions & 2 deletions src/month.jsx
View file
Expand Up @@ -9,6 +9,8 @@ const FIXED_HEIGHT_STANDARD_WEEK_COUNT = 6;
export default class Month extends React.Component {
static propTypes = {
ariaLabelPrefix: PropTypes.string,
chooseDayAriaLabelPrefix: PropTypes.string,
disabledDayAriaLabelPrefix: PropTypes.string,
disabledKeyboardNavigation: PropTypes.bool,
day: PropTypes.instanceOf(Date).isRequired,
dayClassName: PropTypes.func,
Expand Down Expand Up @@ -45,7 +47,8 @@ export default class Month extends React.Component {
showMonthYearPicker: PropTypes.bool,
showQuarterYearPicker: PropTypes.bool,
handleOnKeyDown: PropTypes.func,
isInputFocused: PropTypes.bool
isInputFocused: PropTypes.bool,
weekAriaLabelPrefix: PropTypes.string
};

handleDayClick = (day, event) => {
Expand Down Expand Up @@ -119,6 +122,9 @@ export default class Month extends React.Component {
while (true) {
weeks.push(
<Week
ariaLabelPrefix={this.props.weekAriaLabelPrefix}
chooseDayAriaLabelPrefix={this.props.chooseDayAriaLabelPrefix}
disabledDayAriaLabelPrefix={this.props.disabledDayAriaLabelPrefix}
key={i}
day={currentWeekStart}
month={utils.getMonth(this.props.day)}
Expand Down Expand Up @@ -301,7 +307,12 @@ export default class Month extends React.Component {
};

render() {
const { showMonthYearPicker, showQuarterYearPicker, day, ariaLabelPrefix = "month " } = this.props;
const {
showMonthYearPicker,
showQuarterYearPicker,
day,
ariaLabelPrefix = "month "
} = this.props;
return (
<div
className={this.getClassNames()}
Expand Down
12 changes: 11 additions & 1 deletion src/week.jsx
View file
Expand Up @@ -11,9 +11,12 @@ export default class Week extends React.Component {
};
}
static propTypes = {
ariaLabelPrefix: PropTypes.string,
disabledKeyboardNavigation: PropTypes.bool,
day: PropTypes.instanceOf(Date).isRequired,
dayClassName: PropTypes.func,
disabledDayAriaLabelPrefix: PropTypes.string,
chooseDayAriaLabelPrefix: PropTypes.string,
endDate: PropTypes.instanceOf(Date),
excludeDates: PropTypes.array,
filterDate: PropTypes.func,
Expand Down Expand Up @@ -82,14 +85,21 @@ export default class Week extends React.Component {
? this.handleWeekClick.bind(this, startOfWeek, weekNumber)
: undefined;
days.push(
<WeekNumber key="W" weekNumber={weekNumber} onClick={onClickAction} />
<WeekNumber
key="W"
weekNumber={weekNumber}
onClick={onClickAction}
ariaLabelPrefix={this.props.ariaLabelPrefix}
/>
);
}
return days.concat(
[0, 1, 2, 3, 4, 5, 6].map(offset => {
const day = utils.addDays(startOfWeek, offset);
return (
<Day
ariaLabelPrefixWhenEnabled={this.props.chooseDayAriaLabelPrefix}
ariaLabelPrefixWhenDisabled={this.props.disabledDayAriaLabelPrefix}
key={day.valueOf()}
day={day}
month={this.props.month}
Expand Down
47 changes: 47 additions & 0 deletions test/datepicker_test.js
View file
Expand Up @@ -5,6 +5,7 @@ import { mount } from "enzyme";
import defer from "lodash/defer";
import DatePicker from "../src/index.jsx";
import Day from "../src/day";
import WeekNumber from "../src/week_number";
import TestWrapper from "./test_wrapper.jsx";
import PopperComponent from "../src/popper_component.jsx";
import CustomInput from "./helper_components/custom_input.jsx";
Expand Down Expand Up @@ -1224,4 +1225,50 @@ describe("DatePicker", () => {

expect(arrow).to.be.empty;
});

it("should pass chooseDayAriaLabelPrefix prop to the correct child component", () => {
const chooseDayAriaLabelPrefix = "My choose-day-prefix";
const datePicker = mount(
<DatePicker inline chooseDayAriaLabelPrefix={chooseDayAriaLabelPrefix} />
);
expect(
datePicker
.find(Day)
.first()
.prop("ariaLabelPrefixWhenEnabled")
).to.equal(chooseDayAriaLabelPrefix);
});

it("should pass disabledDayAriaLabelPrefix prop to the correct child component", () => {
const disabledDayAriaLabelPrefix = "My disabled-day-prefix";
const datePicker = mount(
<DatePicker
inline
disabledDayAriaLabelPrefix={disabledDayAriaLabelPrefix}
/>
);
expect(
datePicker
.find(Day)
.first()
.prop("ariaLabelPrefixWhenDisabled")
).to.equal(disabledDayAriaLabelPrefix);
});

it("should pass weekAriaLabelPrefix prop to the correct child component", () => {
const weekAriaLabelPrefix = "My week-prefix";
const datePicker = mount(
<DatePicker
inline
showWeekNumbers
weekAriaLabelPrefix={weekAriaLabelPrefix}
/>
);
expect(
datePicker
.find(WeekNumber)
.first()
.prop("ariaLabelPrefix")
).to.equal(weekAriaLabelPrefix);
});
});

0 comments on commit 70ebb0a

Please sign in to comment.