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

Clarify VoiceOver text for dates selected as start-date and end-date #1501

Merged
merged 3 commits into from
Jan 10, 2019
Merged

Clarify VoiceOver text for dates selected as start-date and end-date #1501

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
79f21b6
Clarify VoiceOver text for dates selected as check-in and check-out
nkinser Jan 7, 2019
06c97a1
fixed tests
nkinser Jan 7, 2019
e9197f0
addressed comments
nkinser Jan 10, 2019
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
10 changes: 10 additions & 0 deletions src/defaultPhrases.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -30,6 +30,8 @@ const chooseAvailableEndDate = ({ date }) => `Choose ${date} as your check-out d
const chooseAvailableDate = ({ date }) => date;
const dateIsUnavailable = ({ date }) => `Not available. ${date}`;
const dateIsSelected = ({ date }) => `Selected. ${date}`;
const dateIsSelectedAsStartDate = ({ date }) => `Selected as start date. ${date}`;
const dateIsSelectedAsEndDate = ({ date }) => `Selected as end date. ${date}`;

export default {
calendarLabel,
Expand Down Expand Up @@ -62,6 +64,8 @@ export default {
chooseAvailableEndDate,
dateIsUnavailable,
dateIsSelected,
dateIsSelectedAsStartDate,
dateIsSelectedAsEndDate,
};

export const DateRangePickerPhrases = {
Expand Down Expand Up @@ -93,6 +97,8 @@ export const DateRangePickerPhrases = {
chooseAvailableEndDate,
dateIsUnavailable,
dateIsSelected,
dateIsSelectedAsStartDate,
dateIsSelectedAsEndDate,
};

export const DateRangePickerInputPhrases = {
Expand Down Expand Up @@ -161,6 +167,8 @@ export const DayPickerPhrases = {
chooseAvailableDate,
dateIsUnavailable,
dateIsSelected,
dateIsSelectedAsStartDate,
dateIsSelectedAsEndDate,
};

export const DayPickerKeyboardShortcutsPhrases = {
Expand Down Expand Up @@ -192,4 +200,6 @@ export const CalendarDayPhrases = {
chooseAvailableDate,
dateIsUnavailable,
dateIsSelected,
dateIsSelectedAsStartDate,
dateIsSelectedAsEndDate,
};
10 changes: 9 additions & 1 deletion src/utils/getCalendarDaySettings.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,8 @@ export default function getCalendarDaySettings(day, ariaLabelFormat, daySize, mo
chooseAvailableDate,
dateIsUnavailable,
dateIsSelected,
dateIsSelectedAsStartDate,
dateIsSelectedAsEndDate,
} = phrases;

const daySizeStyles = {
Expand Down Expand Up @@ -36,7 +38,13 @@ export default function getCalendarDaySettings(day, ariaLabelFormat, daySize, mo

let ariaLabel = getPhrase(chooseAvailableDate, formattedDate);
if (selected) {
ariaLabel = getPhrase(dateIsSelected, formattedDate);
if (modifiers.has('selected-start') && dateIsSelectedAsStartDate) {
ariaLabel = getPhrase(dateIsSelectedAsStartDate, formattedDate);
} else if (modifiers.has('selected-end') && dateIsSelectedAsEndDate) {
ariaLabel = getPhrase(dateIsSelectedAsEndDate, formattedDate);
} else {
ariaLabel = getPhrase(dateIsSelected, formattedDate);
}
} else if (modifiers.has(BLOCKED_MODIFIER)) {
ariaLabel = getPhrase(dateIsUnavailable, formattedDate);
}
Expand Down
50 changes: 38 additions & 12 deletions test/components/CalendarDay_spec.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -61,6 +61,8 @@ describe('CalendarDay', () => {
phrases.chooseAvailableDate = sinon.stub().returns('chooseAvailableDate text');
phrases.dateIsSelected = sinon.stub().returns('dateIsSelected text');
phrases.dateIsUnavailable = sinon.stub().returns('dateIsUnavailable text');
phrases.dateIsSelectedAsStartDate = sinon.stub().returns('dateIsSelectedAsStartDate text');
phrases.dateIsSelectedAsEndDate = sinon.stub().returns('dateIsSelectedAsEndDate text');
});

it('is formatted with the chooseAvailableDate phrase function when day is available', () => {
Expand All @@ -78,21 +80,45 @@ describe('CalendarDay', () => {
});

it('is formatted with the dateIsSelected phrase function when day is selected', () => {
const selectedModifiers = new Set(['selected', 'selected-start', 'selected-end']);
const modifiers = new Set(['selected']);

selectedModifiers.forEach((selectedModifier) => {
const modifiers = new Set([selectedModifier]);
const wrapper = shallow((
<CalendarDay
modifiers={modifiers}
phrases={phrases}
day={day}
/>
)).dive();

expect(wrapper.prop('aria-label')).to.equal('dateIsSelected text');
});

it('is formatted with the dateIsSelectedAsStartDate phrase function when day is selected as the start date', () => {
const modifiers = new Set().add(BLOCKED_MODIFIER).add('selected-start');

const wrapper = shallow((
<CalendarDay
modifiers={modifiers}
phrases={phrases}
day={day}
/>
)).dive();

expect(wrapper.prop('aria-label')).to.equal('dateIsSelectedAsStartDate text');
});

it('is formatted with the dateIsSelectedAsEndDate phrase function when day is selected as the end date', () => {
const modifiers = new Set().add(BLOCKED_MODIFIER).add('selected-end');

const wrapper = shallow((
<CalendarDay
modifiers={modifiers}
phrases={phrases}
day={day}
/>
)).dive();
const wrapper = shallow((
<CalendarDay
modifiers={modifiers}
phrases={phrases}
day={day}
/>
)).dive();

expect(wrapper.prop('aria-label')).to.equal('dateIsSelected text');
});
expect(wrapper.prop('aria-label')).to.equal('dateIsSelectedAsEndDate text');
});

it('is formatted with the dateIsUnavailable phrase function when day is not available', () => {
Expand Down
50 changes: 38 additions & 12 deletions test/components/CustomizableCalendarDay_spec.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -62,6 +62,8 @@ describe('CustomizableCalendarDay', () => {
phrases.chooseAvailableDate = sinon.stub().returns('chooseAvailableDate text');
phrases.dateIsSelected = sinon.stub().returns('dateIsSelected text');
phrases.dateIsUnavailable = sinon.stub().returns('dateIsUnavailable text');
phrases.dateIsSelectedAsStartDate = sinon.stub().returns('dateIsSelectedAsStartDate text');
phrases.dateIsSelectedAsEndDate = sinon.stub().returns('dateIsSelectedAsEndDate text');
});

it('is formatted with the chooseAvailableDate phrase function when day is available', () => {
Expand All @@ -79,21 +81,45 @@ describe('CustomizableCalendarDay', () => {
});

it('is formatted with the dateIsSelected phrase function when day is selected', () => {
const selectedModifiers = new Set(['selected', 'selected-start', 'selected-end']);
const modifiers = new Set(['selected']);

selectedModifiers.forEach((selectedModifier) => {
const modifiers = new Set([selectedModifier]);
const wrapper = shallow((
<CustomizableCalendarDay
modifiers={modifiers}
phrases={phrases}
day={day}
/>
)).dive();

expect(wrapper.prop('aria-label')).to.equal('dateIsSelected text');
});

it('is formatted with the dateIsSelectedAsStartDate phrase function when day is selected as the start date', () => {
const modifiers = new Set().add(BLOCKED_MODIFIER).add('selected-start');

const wrapper = shallow((
<CustomizableCalendarDay
modifiers={modifiers}
phrases={phrases}
day={day}
/>
)).dive();

expect(wrapper.prop('aria-label')).to.equal('dateIsSelectedAsStartDate text');
});

it('is formatted with the dateIsSelectedAsEndDate phrase function when day is selected as the end date', () => {
const modifiers = new Set().add(BLOCKED_MODIFIER).add('selected-end');

const wrapper = shallow((
<CustomizableCalendarDay
modifiers={modifiers}
phrases={phrases}
day={day}
/>
)).dive();
const wrapper = shallow((
<CustomizableCalendarDay
modifiers={modifiers}
phrases={phrases}
day={day}
/>
)).dive();

expect(wrapper.prop('aria-label')).to.equal('dateIsSelected text');
});
expect(wrapper.prop('aria-label')).to.equal('dateIsSelectedAsEndDate text');
});

it('is formatted with the dateIsUnavailable phrase function when day is not available', () => {
Expand Down
71 changes: 53 additions & 18 deletions test/utils/getCalendarDaySettings_spec.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,6 +14,8 @@ const testPhrases = {
chooseAvailableDate: sinon.stub(),
dateIsSelected: sinon.stub(),
dateIsUnavailable: sinon.stub(),
dateIsSelectedAsStartDate: sinon.stub(),
dateIsSelectedAsEndDate: sinon.stub(),
};

describe('getCalendarDaySettings', () => {
Expand Down Expand Up @@ -182,6 +184,8 @@ describe('getCalendarDaySettings', () => {
phrases.chooseAvailableDate = sinon.stub().returns('chooseAvailableDate text');
phrases.dateIsSelected = sinon.stub().returns('dateIsSelected text');
phrases.dateIsUnavailable = sinon.stub().returns('dateIsUnavailable text');
phrases.dateIsSelectedAsStartDate = sinon.stub().returns('dateIsSelectedAsStartDate text');
phrases.dateIsSelectedAsEndDate = sinon.stub().returns('dateIsSelectedAsEndDate text');
});

afterEach(() => {
Expand All @@ -204,11 +208,57 @@ describe('getCalendarDaySettings', () => {
});

it('is formatted with the dateIsSelected phrase function when day is selected', () => {
const selectedModifiers = new Set(['selected', 'selected-start', 'selected-end']);
const modifiers = new Set(['selected']);

selectedModifiers.forEach((selectedModifier) => {
const modifiers = new Set().add(selectedModifier);
const { ariaLabel } = getCalendarDaySettings(
testDay,
testAriaLabelFormat,
testDaySize,
modifiers,
phrases,
);

expect(phrases.dateIsSelected.calledWith(expectedFormattedDay)).to.equal(true);
expect(ariaLabel).to.equal('dateIsSelected text');
});

it('is formatted with the dateIsSelectedAsStartDate phrase function when day is selected as the start date', () => {
const modifiers = new Set().add(BLOCKED_MODIFIER).add('selected-start');

const { ariaLabel } = getCalendarDaySettings(
testDay,
testAriaLabelFormat,
testDaySize,
modifiers,
phrases,
);

expect(phrases.dateIsSelectedAsStartDate.calledWith(expectedFormattedDay)).to.equal(true);
expect(ariaLabel).to.equal('dateIsSelectedAsStartDate text');
});

it('is formatted with the dateIsSelectedAsEndDate phrase function when day is selected as the end date', () => {
const modifiers = new Set().add(BLOCKED_MODIFIER).add('selected-end');

const { ariaLabel } = getCalendarDaySettings(
testDay,
testAriaLabelFormat,
testDaySize,
modifiers,
phrases,
);

expect(phrases.dateIsSelectedAsEndDate.calledWith(expectedFormattedDay)).to.equal(true);
expect(ariaLabel).to.equal('dateIsSelectedAsEndDate text');
});

it('is formatted with the dateIsSelected phrase function when day is selected as the start or end date and no selected start or end date phrase function is specified', () => {
phrases.dateIsSelectedAsStartDate = null;
phrases.dateIsSelectedAsEndDate = null;
const selectedModifiers = new Set(['selected-end', 'selected-start']);

selectedModifiers.forEach((selectedModifier) => {
const modifiers = new Set([selectedModifier]);
const { ariaLabel } = getCalendarDaySettings(
testDay,
testAriaLabelFormat,
Expand Down Expand Up @@ -236,20 +286,5 @@ describe('getCalendarDaySettings', () => {
expect(phrases.dateIsUnavailable.calledWith(expectedFormattedDay)).to.equal(true);
expect(ariaLabel).to.equal('dateIsUnavailable text');
});

it('is formatted with the dateIsSelected phrase function when day is selected for check in', () => {
const modifiers = new Set().add(BLOCKED_MODIFIER).add('selected-start');

const { ariaLabel } = getCalendarDaySettings(
testDay,
testAriaLabelFormat,
testDaySize,
modifiers,
phrases,
);

expect(phrases.dateIsSelected.calledWith(expectedFormattedDay)).to.equal(true);
expect(ariaLabel).to.equal('dateIsSelected text');
});
});
});