ayo/lion
1
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Merge pull request #335 from ing-bank/fix/issue-302-part-2

Browse source 
fix(calendar): issue 302 part 2 - skipped month
This commit is contained in:
gerjanvangeest 2019-10-18 12:18:27 +02:00 committed by GitHub
commit 4e6cb798ac
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
2 changed files with 36 additions and 2 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

13
packages/calendar/src/LionCalendar.js
View file

@ -553,12 +553,21 @@ export class LionCalendar extends LocalizeMixin(LitElement) {
__modifyDate(modify, { dateType, type, mode } = {}) {
let tmpDate = new Date(this.centralDate);
// if we're not working with days, reset
// day count to first day of the month
if (type !== 'Date') {
tmpDate.setDate(1);
}
tmpDate[`set${type}`](tmpDate[`get${type}`]() + modify);
// if we've reset the day count,
// restore day count as best we can
if (type !== 'Date') {
const maxDays = new Date(tmpDate.getFullYear(), tmpDate.getMonth() + 1, 0).getDate();
tmpDate.setDate(Math.min(this.centralDate.getDate(), maxDays));
}
if (!this.__isEnabledDate(tmpDate)) {
tmpDate = this.__findBestEnabledDateFor(tmpDate, { mode });
}
this[dateType] = tmpDate;
}

25
packages/calendar/test/lion-calendar.test.js
View file

@ -546,6 +546,31 @@ describe('<lion-calendar>', () => {
clock.restore();
});
it('supports navigating from larger months to smaller ones (day counts)', async () => {
// given
const inputDate = new Date('2019/08/31');
const element = await fixture(html`
<lion-calendar .centralDate="${inputDate}"> </lion-calendar>
`);
// when
const remote = new CalendarObject(element);
remote.nextMonthButtonEl.click();
await element.updateComplete;
// then
expect(remote.activeMonthAndYear).to.equal('September 2019');
expect(remote.centralDayObj.el).dom.to.equal(`
<button
class="calendar__day-button"
tabindex="0"
aria-label="30 September 2019 Monday"
aria-selected="false"
past=""
current-month="">
30
</button>
`);
});
describe('Accessibility', () => {
it('navigate buttons have a aria-label and title attribute with accessible label', async () => {
const el = await fixture(html`