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

Use locale for month aria labels #4697

Merged
merged 1 commit into from
Apr 16, 2024
Merged

Use locale for month aria labels #4697

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
6 changes: 3 additions & 3 deletions src/month.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -622,15 +622,15 @@ export default class Month extends React.Component {
chooseDayAriaLabelPrefix = "Choose",
disabledDayAriaLabelPrefix = "Not available",
day,
locale,
} = this.props;

const labelDate = utils.setMonth(day, month);
const prefix =
this.isDisabled(labelDate) || this.isExcluded(labelDate)
? disabledDayAriaLabelPrefix
: chooseDayAriaLabelPrefix;

return `${prefix} ${utils.formatDate(labelDate, "MMMM yyyy")}`;
return `${prefix} ${utils.formatDate(labelDate, "MMMM yyyy", locale)}`;
Copy link

Choose a reason for hiding this comment

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

I believe it would be better to format it in the user's preferred locale (using Intl.DateTimeFormat).

🔹 Best Practices (Nice to have)

Image of Jacob Jacob

Copy link
Contributor Author

Choose a reason for hiding this comment

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

I believe the formatDate function defaults to the users perfered locale when this prop is undefined.

Copy link

Choose a reason for hiding this comment

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

I was thinking more in terms of leveraging what the browser already provides, as the time and effort put into it for browsers is far more than a library. Though now that I say that, both most likely fall back to CLDR as their data source.

I don't feel strongly either way; it was merely a suggestion for a possible improvement that I would make. The PR is certainly fine as-is.

Image of Jacob Jacob

Copy link
Contributor Author

Choose a reason for hiding this comment

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

After alittle more research, the formatDate function fallbacks to whatever locale you have set with the setDefaultLocale function. But if you have not registered that language with the registerLocale function it will fall back to date-fns default locale i think.

};

getQuarterClassNames = (q) => {
Expand Down Expand Up @@ -830,7 +830,7 @@ export default class Month extends React.Component {
onPointerLeave={
this.props.usePointerEvent ? this.handleMouseLeave : undefined
}
aria-label={`${formattedAriaLabelPrefix}${utils.formatDate(day, "MMMM, yyyy")}`}
aria-label={`${formattedAriaLabelPrefix}${utils.formatDate(day, "MMMM, yyyy", this.props.locale)}`}
role="listbox"
>
{showMonthYearPicker
Expand Down
31 changes: 31 additions & 0 deletions test/month_test.test.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,7 @@ import range from "lodash/range";
import * as utils from "../src/date_utils";
import { runAxe } from "./run_axe";
import { getKey } from "./test_utils";
import { es } from "date-fns/locale";

describe("Month", () => {
function assertDateRangeInclusive(month, start, end) {
Expand Down Expand Up @@ -59,6 +60,36 @@ describe("Month", () => {
).toContain(expectedAriaLabel);
});

it("should display month listbox aria-label in Spanish if Spanish locale is provided", () => {
utils.registerLocale("es", es);
const date = utils.newDate("2015-12-01");
const { container } = render(
<Month day={date} locale="es" showMonthYearPicker />,
);
const expectedAriaLabel = utils.formatDate(date, "MMMM, yyyy", "es");

expect(
container
.querySelector(".react-datepicker__month")
.getAttribute("aria-label"),
).toContain(expectedAriaLabel);
});

it("should display month options aria-label in Spanish if Spanish locale is provided", () => {
utils.registerLocale("es", es);
const date = utils.newDate("2015-01-01");
const { container } = render(
<Month day={date} locale="es" showMonthYearPicker />,
);
const expectedAriaLabel = utils.formatDate(date, "MMMM yyyy", "es");

expect(
container
.querySelectorAll(".react-datepicker__month-text")[0]
.getAttribute("aria-label"),
).toContain(expectedAriaLabel);
});

it("should have the month aria-label with the specified prefix", () => {
const date = utils.newDate("2015-12-01");
const ariaLabelPrefix = "Selected Month";
Expand Down
Loading