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() {
const month = getMonthNames({ locale: this.__getLocale() })[this.centralDate.getMonth()];
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`
<div class="calendar__header">
${this.__renderPreviousButton()}
<h2
class="calendar__month-heading"
id="month_and_year"
aria-live="polite"
aria-atomic="true"
>
${this.__renderPreviousButton(previousMonth, previousYear)}
<h2 class="calendar__month-heading" id="month_and_year" aria-atomic="true">
${month} ${year}
</h2>
${this.__renderNextButton()}
${this.__renderNextButton(nextMonth, nextYear)}
</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`
<button
class="calendar__previous-month-button"
aria-label=${this.msgLit('lion-calendar:previousMonth')}
title=${this.msgLit('lion-calendar:previousMonth')}
aria-label=${previousButtonTitle}
title=${previousButtonTitle}
@click=${this.goToPreviousMonth}
?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`
<button
class="calendar__next-month-button"
aria-label=${this.msgLit('lion-calendar:nextMonth')}
title=${this.msgLit('lion-calendar:nextMonth')}
aria-label=${nextButtonTitle}
title=${nextButtonTitle}
@click=${this.goToNextMonth}
?disabled=${this.isNextMonthDisabled}
>

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

@ -45,7 +45,6 @@ describe('<lion-calendar>', () => {
<h2
id="month_and_year"
class="calendar__month-heading"
aria-live="polite"
aria-atomic="true"
>
December 2000
@ -62,7 +61,7 @@ describe('<lion-calendar>', () => {
`,
);
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(`
<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', () => {
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(
await fixture(
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');
});
});
@ -583,10 +581,18 @@ describe('<lion-calendar>', () => {
<lion-calendar .selectedDate="${new Date('2000/12/12')}"></lion-calendar>
`);
const elObj = new CalendarObject(el);
expect(elObj.previousMonthButtonEl.getAttribute('title')).to.equal('Previous month');
expect(elObj.previousMonthButtonEl.getAttribute('aria-label')).to.equal('Previous month');
expect(elObj.nextMonthButtonEl.getAttribute('title')).to.equal('Next month');
expect(elObj.nextMonthButtonEl.getAttribute('aria-label')).to.equal('Next month');
expect(elObj.previousMonthButtonEl.getAttribute('title')).to.equal(
'Previous month, November 2000',
);
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);
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';
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: