Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

feature: add aria-disabled to Month component #4702

Merged
merged 2 commits into from
Apr 17, 2024
Merged

feature: add aria-disabled to Month component #4702

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
f22a885
feature: add aria-disabled to Month component
MatteoPieroni Apr 17, 2024
356f0d2
feature: add tests for aria-disabled Month component
MatteoPieroni Apr 17, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
29 changes: 13 additions & 16 deletions src/month.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -545,31 +545,27 @@ export default class Month extends React.Component {
}
};

isMonthDisabled = (month) => {
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Nice job extracting out this logic 👍

◽ Compliment

Image of Joey G Joey G

const { day, minDate, maxDate, excludeDates, includeDates } = this.props;
const labelDate = utils.setMonth(day, month);
return (
(minDate || maxDate || excludeDates || includeDates) &&
utils.isMonthDisabled(labelDate, this.props)
);
};

getMonthClassNames = (m) => {
const {
day,
startDate,
endDate,
selected,
minDate,
maxDate,
preSelection,
monthClassName,
excludeDates,
includeDates,
} = this.props;
const { day, startDate, endDate, selected, preSelection, monthClassName } =
this.props;
const _monthClassName = monthClassName
? monthClassName(utils.setMonth(day, m))
: undefined;
const labelDate = utils.setMonth(day, m);
return clsx(
"react-datepicker__month-text",
`react-datepicker__month-${m}`,
_monthClassName,
{
"react-datepicker__month-text--disabled":
(minDate || maxDate || excludeDates || includeDates) &&
utils.isMonthDisabled(labelDate, this.props),
"react-datepicker__month-text--disabled": this.isMonthDisabled(m),
"react-datepicker__month-text--selected": this.isSelectedMonth(
day,
m,
Expand Down Expand Up @@ -737,6 +733,7 @@ export default class Month extends React.Component {
}
tabIndex={this.getTabIndex(m)}
className={this.getMonthClassNames(m)}
aria-disabled={this.isMonthDisabled(m)}
role="option"
aria-label={this.getAriaLabel(m)}
aria-current={this.isCurrentMonth(day, m) ? "date" : undefined}
Expand Down
15 changes: 10 additions & 5 deletions test/month_test.test.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -430,7 +430,7 @@ describe("Month", () => {
expect(utils.getMonth(monthClicked)).toBe(6);
});

it("should return disabled class if current date is out of bound of minDate and maxDate", () => {
it("should return disabled month if current date is out of bound of minDate and maxDate", () => {
const onDayClickSpy = jest.fn();
const onDayMouseEnterSpy = jest.fn();
const { container } = render(
Expand All @@ -449,13 +449,14 @@ describe("Month", () => {
expect(
month.classList.contains("react-datepicker__month-text--disabled"),
).toBe(true);
expect(month.getAttribute("aria-disabled")).toBe("true");
fireEvent.click(month);
expect(onDayClickSpy).not.toHaveBeenCalled();
fireEvent.mouseEnter(month);
expect(onDayMouseEnterSpy).not.toHaveBeenCalled();
});

it("should not return disabled class if current date is before minDate but same month", () => {
it("should not return disabled month if current date is before minDate but same month", () => {
const onDayClickSpy = jest.fn();
const onDayMouseEnterSpy = jest.fn();
const { container } = render(
Expand All @@ -473,13 +474,14 @@ describe("Month", () => {
expect(
month.classList.contains("react-datepicker__month-text--disabled"),
).not.toBe(true);
expect(month.getAttribute("aria-disabled")).not.toBe("true");
fireEvent.click(month);
expect(onDayClickSpy).toHaveBeenCalled();
fireEvent.mouseEnter(month);
expect(onDayMouseEnterSpy).toHaveBeenCalled();
});

it("should not return disabled class if current date is after maxDate but same month", () => {
it("should not return disabled month if current date is after maxDate but same month", () => {
const onDayClickSpy = jest.fn();
const onDayMouseEnterSpy = jest.fn();
const { container } = render(
Expand All @@ -497,13 +499,14 @@ describe("Month", () => {
expect(
month.classList.contains("react-datepicker__month-text--disabled"),
).not.toBe(true);
expect(month.getAttribute("aria-disabled")).not.toBe("true");
fireEvent.click(month);
expect(onDayClickSpy).toHaveBeenCalled();
fireEvent.mouseEnter(month);
expect(onDayMouseEnterSpy).toHaveBeenCalled();
});

it("should return disabled class if specified excludeDate", () => {
it("should return disabled month if specified excludeDate", () => {
const onDayClickSpy = jest.fn();
const onDayMouseEnterSpy = jest.fn();
const { container } = render(
Expand All @@ -530,14 +533,15 @@ describe("Month", () => {
expect(
month.classList.contains("react-datepicker__month-text--disabled"),
).toBe(true);
expect(month.getAttribute("aria-disabled")).toBe("true");
fireEvent.click(month);
expect(onDayClickSpy).not.toHaveBeenCalled();
fireEvent.mouseEnter(month);
expect(onDayMouseEnterSpy).not.toHaveBeenCalled();
});
});

it("should return disabled class if specified includeDate", () => {
it("should return disabled month if specified includeDate", () => {
const { container } = render(
<Month
day={utils.newDate("2015-01-01")}
Expand Down Expand Up @@ -566,6 +570,7 @@ describe("Month", () => {
expect(
month.classList.contains("react-datepicker__month-text--disabled"),
).toBe(true);
expect(month.getAttribute("aria-disabled")).toBe("true");
}
});

Expand Down
Loading