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

fix(lion-calendar): Make disabled dates not selectable via keyboard navigation (#2058)

Browse source 
* fix(calendar): Make disabled dates not selectable

* Add changeset

* chore(calendar): add skipped test for select date on [Enter]

---------

Co-authored-by: gerjanvangeest <Gerjan.van.Geest@ing.com>
This commit is contained in:
Gyulai Levente 2023-09-12 15:10:23 +02:00 committed by GitHub
parent d597c077b4
commit d1f92a3ad7
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
3 changed files with 59 additions and 3 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

5
.changeset/late-pianos-draw.md Normal file
View file

@ -0,0 +1,5 @@
---
'@lion/ui': patch
---
Make disabled date buttons not selectable via keyboard navigation in LionCalendar.

2
packages/ui/components/calendar/src/LionCalendar.js
View file

@ -838,7 +838,7 @@ export class LionCalendar extends LocalizeMixin(LitElement) {
* @private * @private
*/ */
__dayButtonSelection(el) { __dayButtonSelection(el) {
if (isDayButton(el)) { if (isDayButton(el) && !isDisabledDayButton(el)) {
this.__dateSelectedByUser(el.date); this.__dateSelectedByUser(el.date);
} }
} }

55
packages/ui/components/calendar/test/lion-calendar.test.js
View file

@ -221,7 +221,7 @@ describe('<lion-calendar>', () => {
expect(isSameDate(el.centralDate, new Date('2019/06/15'))).to.be.true; expect(isSameDate(el.centralDate, new Date('2019/06/15'))).to.be.true;
}); });
it('sends event "user-selected-date-changed" when user selects a date', async () => { it('sends event "user-selected-date-changed" when user selects a date via mouse', async () => {
const dateChangedSpy = sinon.spy(); const dateChangedSpy = sinon.spy();
const el = await fixture(html` const el = await fixture(html`
<lion-calendar <lion-calendar
@ -239,7 +239,7 @@ describe('<lion-calendar>', () => {
).to.equal(true); ).to.equal(true);
}); });
it('doesn\'t send event "user-selected-date-changed" when user selects a disabled date', async () => { it('doesn\'t send event "user-selected-date-changed" when user selects a disabled date via mouse', async () => {
const dateChangedSpy = sinon.spy(); const dateChangedSpy = sinon.spy();
const disable15th = /** @param {Date} d */ d => d.getDate() === 15; const disable15th = /** @param {Date} d */ d => d.getDate() === 15;
const el = await fixture(html` const el = await fixture(html`
@ -253,6 +253,57 @@ describe('<lion-calendar>', () => {
elObj.getDayEl(15).click(); elObj.getDayEl(15).click();
await el.updateComplete; await el.updateComplete;
expect(dateChangedSpy.called).to.equal(false); expect(dateChangedSpy.called).to.equal(false);
expect(isSameDate(/** @type {Date} */ (el.selectedDate), new Date('2000/12/12'))).to.be.true;
});
it.skip('sends event "user-selected-date-changed" when user selects a date via [Enter]', async () => {
/**
* TODO fix me
* The dispatchEvent of [Enter] should has to be on contentWrapperElement to be called
* But to get "selected" a check is done if the action comes from a button.
*/
const dateChangedSpy = sinon.spy();
const el = await fixture(html`
<lion-calendar
.selectedDate="${new Date('2000/10/12')}"
@user-selected-date-changed="${dateChangedSpy}"
></lion-calendar>
`);
const elObj = new CalendarObject(el);
el.__contentWrapperElement?.dispatchEvent(new KeyboardEvent('keydown', { key: 'ArrowLeft' }));
await el.updateComplete;
expect(elObj.activeMonth).to.equal('October');
expect(elObj.activeYear).to.equal('2000');
expect(elObj.focusedDayObj?.monthday).to.equal(11);
el.__contentWrapperElement?.dispatchEvent(new KeyboardEvent('keydown', { key: 'Enter' }));
await el.updateComplete;
expect(isSameDate(/** @type {Date} */ (el.selectedDate), new Date('2000/10/11'))).to.be.true;
expect(dateChangedSpy.called).to.equal(true);
});
it('doesn\'t send event "user-selected-date-changed" when user selects a disabled date via [Enter]', async () => {
const dateChangedSpy = sinon.spy();
const el = await fixture(html`
<lion-calendar
.selectedDate="${new Date('2000/10/12')}"
.minDate="${new Date('2000/10/12')}"
@user-selected-date-changed="${dateChangedSpy}"
></lion-calendar>
`);
const elObj = new CalendarObject(el);
el.__contentWrapperElement?.dispatchEvent(new KeyboardEvent('keydown', { key: 'ArrowLeft' }));
await el.updateComplete;
expect(elObj.activeMonth).to.equal('October');
expect(elObj.activeYear).to.equal('2000');
expect(elObj.focusedDayObj?.monthday).to.equal(11);
el.__contentWrapperElement?.dispatchEvent(new KeyboardEvent('keydown', { key: 'Enter' }));
await el.updateComplete;
expect(isSameDate(/** @type {Date} */ (el.selectedDate), new Date('2000/10/12'))).to.be.true;
expect(dateChangedSpy.called).to.equal(false);
}); });
it('exposes focusedDate getter', async () => { it('exposes focusedDate getter', async () => {