From d1f92a3ad73fdb825dd336d201a0892c8764d18b Mon Sep 17 00:00:00 2001
From: Gyulai Levente <47368351+gyulus3@users.noreply.github.com>
Date: Tue, 12 Sep 2023 15:10:23 +0200
Subject: [PATCH] fix(lion-calendar): Make disabled dates not selectable via
 keyboard navigation (#2058)

* 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>
---
 .changeset/late-pianos-draw.md                |  5 ++
 .../components/calendar/src/LionCalendar.js   |  2 +-
 .../calendar/test/lion-calendar.test.js       | 55 ++++++++++++++++++-
 3 files changed, 59 insertions(+), 3 deletions(-)
 create mode 100644 .changeset/late-pianos-draw.md

diff --git a/.changeset/late-pianos-draw.md b/.changeset/late-pianos-draw.md
new file mode 100644
index 000000000..9c98c5971
--- /dev/null
+++ b/.changeset/late-pianos-draw.md
@@ -0,0 +1,5 @@
+---
+'@lion/ui': patch
+---
+
+Make disabled date buttons not selectable via keyboard navigation in LionCalendar.
diff --git a/packages/ui/components/calendar/src/LionCalendar.js b/packages/ui/components/calendar/src/LionCalendar.js
index ee7057769..0a10b1b17 100644
--- a/packages/ui/components/calendar/src/LionCalendar.js
+++ b/packages/ui/components/calendar/src/LionCalendar.js
@@ -838,7 +838,7 @@ export class LionCalendar extends LocalizeMixin(LitElement) {
    * @private
    */
   __dayButtonSelection(el) {
-    if (isDayButton(el)) {
+    if (isDayButton(el) && !isDisabledDayButton(el)) {
       this.__dateSelectedByUser(el.date);
     }
   }
diff --git a/packages/ui/components/calendar/test/lion-calendar.test.js b/packages/ui/components/calendar/test/lion-calendar.test.js
index 4f0cc7880..03bc71889 100644
--- a/packages/ui/components/calendar/test/lion-calendar.test.js
+++ b/packages/ui/components/calendar/test/lion-calendar.test.js
@@ -221,7 +221,7 @@ describe('<lion-calendar>', () => {
       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 el = await fixture(html`
         <lion-calendar
@@ -239,7 +239,7 @@ describe('<lion-calendar>', () => {
       ).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 disable15th = /** @param {Date} d */ d => d.getDate() === 15;
       const el = await fixture(html`
@@ -253,6 +253,57 @@ describe('<lion-calendar>', () => {
       elObj.getDayEl(15).click();
       await el.updateComplete;
       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 () => {