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

fix(catalog): add info for next/previous month on to the buttons (#384)

Browse source
This commit is contained in:
Ovidiu 2019-12-05 16:17:26 +02:00 committed by Thomas Allmer
parent a7b0c338e1
commit b6ec5a8cb5
2 changed files with 52 additions and 25 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -257,18 +257,30 @@ export class LionCalendar extends LocalizeMixin(LitElement) {
__renderHeader() { __renderHeader() {
const month = getMonthNames({ locale: this.__getLocale() })[this.centralDate.getMonth()]; const month = getMonthNames({ locale: this.__getLocale() })[this.centralDate.getMonth()];
const year = this.centralDate.getFullYear(); const year = this.centralDate.getFullYear();
const nextMonth =
this.centralDate.getMonth() === 11
? getMonthNames({ locale: this.__getLocale() })[0]
: getMonthNames({ locale: this.__getLocale() })[this.centralDate.getMonth() + 1];
const previousMonth =
this.centralDate.getMonth() === 0
? getMonthNames({ locale: this.__getLocale() })[11]
: getMonthNames({ locale: this.__getLocale() })[this.centralDate.getMonth() - 1];
const nextYear =
this.centralDate.getMonth() === 11
? this.centralDate.getFullYear() + 1
: this.centralDate.getFullYear();
const previousYear =
this.centralDate.getMonth() === 0
? this.centralDate.getFullYear() - 1
: this.centralDate.getFullYear();
return html` return html`
<div class="calendar__header"> <div class="calendar__header">
${this.__renderPreviousButton()} ${this.__renderPreviousButton(previousMonth, previousYear)}
<h2 <h2 class="calendar__month-heading" id="month_and_year" aria-atomic="true">
class="calendar__month-heading"
id="month_and_year"
aria-live="polite"
aria-atomic="true"
>
${month} ${year} ${month} ${year}
</h2> </h2>
${this.__renderNextButton()} ${this.__renderNextButton(nextMonth, nextYear)}
</div> </div>
`; `;
} }
@ -290,12 +302,16 @@ export class LionCalendar extends LocalizeMixin(LitElement) {
}); });
} }
__renderPreviousButton() { __renderPreviousButton(previousMonth, previousYear) {
const previousButtonTitle = `${this.msgLit(
'lion-calendar:previousMonth',
)}, ${previousMonth} ${previousYear}`;
return html` return html`
<button <button
class="calendar__previous-month-button" class="calendar__previous-month-button"
aria-label=${this.msgLit('lion-calendar:previousMonth')} aria-label=${previousButtonTitle}
title=${this.msgLit('lion-calendar:previousMonth')} title=${previousButtonTitle}
@click=${this.goToPreviousMonth} @click=${this.goToPreviousMonth}
?disabled=${this.isPreviousMonthDisabled} ?disabled=${this.isPreviousMonthDisabled}
> >
@ -304,12 +320,13 @@ export class LionCalendar extends LocalizeMixin(LitElement) {
`; `;
} }
__renderNextButton() { __renderNextButton(nextMonth, nextYear) {
const nextButtonTitle = `Next Month, ${nextMonth} ${nextYear}`;
return html` return html`
<button <button
class="calendar__next-month-button" class="calendar__next-month-button"
aria-label=${this.msgLit('lion-calendar:nextMonth')} aria-label=${nextButtonTitle}
title=${this.msgLit('lion-calendar:nextMonth')} title=${nextButtonTitle}
@click=${this.goToNextMonth} @click=${this.goToNextMonth}
?disabled=${this.isNextMonthDisabled} ?disabled=${this.isNextMonthDisabled}
> >

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

@ -45,7 +45,6 @@ describe('<lion-calendar>', () => {
<h2 <h2
id="month_and_year" id="month_and_year"
class="calendar__month-heading" class="calendar__month-heading"
aria-live="polite"
aria-atomic="true" aria-atomic="true"
> >
December 2000 December 2000
@ -62,7 +61,7 @@ describe('<lion-calendar>', () => {
`, `,
); );
expect(el.shadowRoot.querySelector('.calendar__previous-month-button')).dom.to.equal(` expect(el.shadowRoot.querySelector('.calendar__previous-month-button')).dom.to.equal(`
<button class="calendar__previous-month-button" aria-label="Previous month" title="Previous month">&lt;</button> <button class="calendar__previous-month-button" aria-label="Previous month, October 2019" title="Previous month, October 2019">&lt;</button>
`); `);
}); });
@ -73,7 +72,7 @@ describe('<lion-calendar>', () => {
`, `,
); );
expect(el.shadowRoot.querySelector('.calendar__next-month-button')).dom.to.equal(` expect(el.shadowRoot.querySelector('.calendar__next-month-button')).dom.to.equal(`
<button class="calendar__next-month-button" aria-label="Next month" title="Next month">&gt;</button> <button class="calendar__next-month-button" aria-label="Next Month, December 2019" title="Next Month, December 2019">&gt;</button>
`); `);
}); });
}); });
@ -428,7 +427,7 @@ describe('<lion-calendar>', () => {
}); });
describe('Accessibility', () => { describe('Accessibility', () => {
it('has aria-live="polite" and aria-atomic="true" set on the secondary title', async () => { it('has aria-atomic="true" set on the secondary title', async () => {
const elObj = new CalendarObject( const elObj = new CalendarObject(
await fixture( await fixture(
html` html`
@ -436,7 +435,6 @@ describe('<lion-calendar>', () => {
`, `,
), ),
); );
expect(elObj.monthHeadingEl.getAttribute('aria-live')).to.equal('polite');
expect(elObj.monthHeadingEl.getAttribute('aria-atomic')).to.equal('true'); expect(elObj.monthHeadingEl.getAttribute('aria-atomic')).to.equal('true');
}); });
}); });
@ -583,10 +581,18 @@ describe('<lion-calendar>', () => {
<lion-calendar .selectedDate="${new Date('2000/12/12')}"></lion-calendar> <lion-calendar .selectedDate="${new Date('2000/12/12')}"></lion-calendar>
`); `);
const elObj = new CalendarObject(el); const elObj = new CalendarObject(el);
expect(elObj.previousMonthButtonEl.getAttribute('title')).to.equal('Previous month'); expect(elObj.previousMonthButtonEl.getAttribute('title')).to.equal(
expect(elObj.previousMonthButtonEl.getAttribute('aria-label')).to.equal('Previous month'); 'Previous month, November 2000',
expect(elObj.nextMonthButtonEl.getAttribute('title')).to.equal('Next month'); );
expect(elObj.nextMonthButtonEl.getAttribute('aria-label')).to.equal('Next month'); expect(elObj.previousMonthButtonEl.getAttribute('aria-label')).to.equal(
'Previous month, November 2000',
);
expect(elObj.nextMonthButtonEl.getAttribute('title')).to.equal(
'Next Month, January 2001',
);
expect(elObj.nextMonthButtonEl.getAttribute('aria-label')).to.equal(
'Next Month, January 2001',
);
}); });
}); });
}); });
@ -1179,11 +1185,15 @@ describe('<lion-calendar>', () => {
`); `);
const elObj = new CalendarObject(el); const elObj = new CalendarObject(el);
expect(elObj.nextMonthButtonEl.getAttribute('aria-label')).to.equal('Next month'); expect(elObj.nextMonthButtonEl.getAttribute('aria-label')).to.equal(
'Next Month, December 2019',
);
localize.locale = 'nl-NL'; localize.locale = 'nl-NL';
await el.updateComplete; await el.updateComplete;
expect(elObj.nextMonthButtonEl.getAttribute('aria-label')).to.equal('Volgende maand'); expect(elObj.nextMonthButtonEl.getAttribute('aria-label')).to.equal(
'Next Month, december 2019',
);
/** /**
* TODO: add more tests, e.g. for: * TODO: add more tests, e.g. for: