From f7ae7ea005ae48edd9a1a56c609775b79952c144 Mon Sep 17 00:00:00 2001
From: Jeri Peier <jeremias.peier@sbb.ch>
Date: Thu, 7 Nov 2024 16:56:08 +0100
Subject: [PATCH] fix(sbb-calendar): fix disabled month selection on wide view
 (#3195)

---------

Co-authored-by: Mario Castigliano <mario.castigliano@finconsgroup.com>
---
 .../calendar.snapshot.spec.snap.js            |   3 +-
 src/elements/calendar/calendar.spec.ts        | 634 ++++++++++--------
 src/elements/calendar/calendar.ts             |  74 +-
 3 files changed, 387 insertions(+), 324 deletions(-)

diff --git a/src/elements/calendar/__snapshots__/calendar.snapshot.spec.snap.js b/src/elements/calendar/__snapshots__/calendar.snapshot.spec.snap.js
index 25512b68cc..dc89ad9afa 100644
--- a/src/elements/calendar/__snapshots__/calendar.snapshot.spec.snap.js
+++ b/src/elements/calendar/__snapshots__/calendar.snapshot.spec.snap.js
@@ -27,8 +27,7 @@ snapshots["sbb-calendar renders Shadow DOM"] =
     <div class="sbb-calendar__controls-month">
       <button
         aria-label="Choose year and month January 2023"
-        class="sbb-calendar__controls-change-date"
-        id="sbb-calendar__date-selection"
+        class="sbb-calendar__controls-change-date sbb-calendar__date-selection"
         type="button"
       >
         January 2023
diff --git a/src/elements/calendar/calendar.spec.ts b/src/elements/calendar/calendar.spec.ts
index 6311ec64e1..568df96ff5 100644
--- a/src/elements/calendar/calendar.spec.ts
+++ b/src/elements/calendar/calendar.spec.ts
@@ -1,5 +1,5 @@
 import { assert, expect } from '@open-wc/testing';
-import { SbbBreakpointMediumMin } from '@sbb-esta/lyne-design-tokens';
+import { SbbBreakpointLargeMin } from '@sbb-esta/lyne-design-tokens';
 import { sendKeys, setViewport } from '@web/test-runner-commands';
 import { html } from 'lit/static-html.js';
 
@@ -13,149 +13,167 @@ import '../button.js';
 
 describe(`sbb-calendar`, () => {
   let element: SbbCalendarElement;
+
   const waitForTransition = async (): Promise<void> => {
-    await waitForLitRender(element);
+    //Wait for the transition to be over
     await waitForCondition(() => !element.hasAttribute('data-transition'));
-  };
 
-  beforeEach(async () => {
-    element = await fixture(
-      html`<sbb-calendar now="1673348400" selected="1673744400"></sbb-calendar>`,
+    await waitForLitRender(element);
+
+    //Wait for the new table to be rendered completely
+    await waitForCondition(
+      () => Array.from(element.shadowRoot!.querySelectorAll('.sbb-calendar__cell')).length > 0,
     );
-  });
+  };
 
-  it('renders', async () => {
-    assert.instanceOf(element, SbbCalendarElement);
-  });
+  const goToNextView = async (element: SbbCalendarElement): Promise<void> => {
+    const nextButton = element.shadowRoot!.querySelector<SbbSecondaryButtonElement>(
+      "sbb-secondary-button[icon-name='chevron-small-right-small']",
+    )!;
 
-  it('highlights current day', async () => {
-    const currentDayButton = element.shadowRoot!.querySelector('button[data-day="10 1 2023"]');
-    expect(currentDayButton).to.have.class('sbb-calendar__cell-current');
-  });
+    nextButton.click();
+    await waitForTransition();
+  };
 
-  it('renders and navigates to next month', async () => {
-    let day = element.shadowRoot!.querySelector('.sbb-calendar__day') as HTMLButtonElement;
-    expect(await day.getAttribute('data-day')).to.be.equal('1 1 2023');
+  describe('basic', () => {
+    beforeEach(async () => {
+      element = await fixture(
+        html`<sbb-calendar now="1673348400" selected="1673744400"></sbb-calendar>`,
+      );
+    });
 
-    const nextMonthButton: HTMLElement = element.shadowRoot!.querySelector(
-      '#sbb-calendar__controls-next',
-    )!;
-    nextMonthButton.click();
-    await waitForLitRender(element);
+    it('renders', async () => {
+      assert.instanceOf(element, SbbCalendarElement);
+    });
 
-    day = element.shadowRoot!.querySelector('.sbb-calendar__day') as HTMLButtonElement;
-    expect(await day.getAttribute('data-day')).to.be.equal('1 2 2023');
-  });
+    it('highlights current day', async () => {
+      const currentDayButton = element.shadowRoot!.querySelector('button[data-day="10 1 2023"]');
+      expect(currentDayButton).to.have.class('sbb-calendar__cell-current');
+    });
 
-  it('renders and navigates to previous month', async () => {
-    let day = element.shadowRoot!.querySelector('.sbb-calendar__day') as HTMLButtonElement;
-    expect(await day.getAttribute('data-day')).to.be.equal('1 1 2023');
+    it('renders and navigates to next month', async () => {
+      let day = element.shadowRoot!.querySelector('.sbb-calendar__day') as HTMLButtonElement;
+      expect(await day.getAttribute('data-day')).to.be.equal('1 1 2023');
 
-    const nextMonthButton: HTMLElement = element.shadowRoot!.querySelector(
-      '#sbb-calendar__controls-previous',
-    )!;
-    nextMonthButton.click();
-    await waitForLitRender(element);
+      const nextMonthButton: HTMLElement = element.shadowRoot!.querySelector(
+        '#sbb-calendar__controls-next',
+      )!;
+      nextMonthButton.click();
+      await waitForLitRender(element);
 
-    day = element.shadowRoot!.querySelector('.sbb-calendar__day') as HTMLButtonElement;
-    expect(await day.getAttribute('data-day')).to.be.equal('1 12 2022');
-  });
+      day = element.shadowRoot!.querySelector('.sbb-calendar__day') as HTMLButtonElement;
+      expect(await day.getAttribute('data-day')).to.be.equal('1 2 2023');
+    });
 
-  it('sets max and next month button gets disabled', async () => {
-    element.max = 1674946800;
-    await waitForLitRender(element);
+    it('renders and navigates to previous month', async () => {
+      let day = element.shadowRoot!.querySelector('.sbb-calendar__day') as HTMLButtonElement;
+      expect(await day.getAttribute('data-day')).to.be.equal('1 1 2023');
 
-    let day = element.shadowRoot!.querySelector('.sbb-calendar__day') as HTMLButtonElement;
-    expect(await day.getAttribute('data-day')).to.be.equal('1 1 2023');
+      const nextMonthButton: HTMLElement = element.shadowRoot!.querySelector(
+        '#sbb-calendar__controls-previous',
+      )!;
+      nextMonthButton.click();
+      await waitForLitRender(element);
 
-    const nextMonthButton: HTMLElement = element.shadowRoot!.querySelector(
-      '#sbb-calendar__controls-next',
-    )!;
-    expect(nextMonthButton).to.have.attribute('disabled');
-    nextMonthButton.click();
-    await waitForLitRender(element);
+      day = element.shadowRoot!.querySelector('.sbb-calendar__day') as HTMLButtonElement;
+      expect(await day.getAttribute('data-day')).to.be.equal('1 12 2022');
+    });
 
-    day = element.shadowRoot!.querySelector('.sbb-calendar__day') as HTMLButtonElement;
-    expect(await day.getAttribute('data-day')).to.be.equal('1 1 2023');
-  });
+    it('sets max and next month button gets disabled', async () => {
+      element.max = 1674946800;
+      await waitForLitRender(element);
 
-  it('sets min and previous month button gets disabled', async () => {
-    element.min = 1673737200;
-    await waitForLitRender(element);
+      let day = element.shadowRoot!.querySelector('.sbb-calendar__day') as HTMLButtonElement;
+      expect(await day.getAttribute('data-day')).to.be.equal('1 1 2023');
 
-    let day = element.shadowRoot!.querySelector('.sbb-calendar__day') as HTMLButtonElement;
-    expect(await day.getAttribute('data-day')).to.be.equal('1 1 2023');
+      const nextMonthButton: HTMLElement = element.shadowRoot!.querySelector(
+        '#sbb-calendar__controls-next',
+      )!;
+      expect(nextMonthButton).to.have.attribute('disabled');
+      nextMonthButton.click();
+      await waitForLitRender(element);
 
-    const nextMonthButton = element.shadowRoot!.querySelector(
-      '#sbb-calendar__controls-previous',
-    ) as HTMLElement;
-    expect(nextMonthButton).to.have.attribute('disabled');
-    nextMonthButton.click();
-    await waitForLitRender(element);
+      day = element.shadowRoot!.querySelector('.sbb-calendar__day') as HTMLButtonElement;
+      expect(await day.getAttribute('data-day')).to.be.equal('1 1 2023');
+    });
 
-    day = element.shadowRoot!.querySelector('.sbb-calendar__day') as HTMLButtonElement;
-    expect(await day.getAttribute('data-day')).to.be.equal('1 1 2023');
-  });
+    it('sets min and previous month button gets disabled', async () => {
+      element.min = 1673737200;
+      await waitForLitRender(element);
+
+      let day = element.shadowRoot!.querySelector('.sbb-calendar__day') as HTMLButtonElement;
+      expect(await day.getAttribute('data-day')).to.be.equal('1 1 2023');
+
+      const nextMonthButton = element.shadowRoot!.querySelector(
+        '#sbb-calendar__controls-previous',
+      ) as HTMLElement;
+      expect(nextMonthButton).to.have.attribute('disabled');
+      nextMonthButton.click();
+      await waitForLitRender(element);
 
-  it('selects a different date', async () => {
-    const selectedSpy = new EventSpy(SbbCalendarElement.events.dateSelected);
-    const selectedDate = element.shadowRoot!.querySelector('button[data-day="15 1 2023"]');
+      day = element.shadowRoot!.querySelector('.sbb-calendar__day') as HTMLButtonElement;
+      expect(await day.getAttribute('data-day')).to.be.equal('1 1 2023');
+    });
 
-    expect(selectedDate).to.have.class('sbb-calendar__selected');
+    it('selects a different date', async () => {
+      const selectedSpy = new EventSpy(SbbCalendarElement.events.dateSelected);
+      const selectedDate = element.shadowRoot!.querySelector('button[data-day="15 1 2023"]');
 
-    const newSelectedDate = element.shadowRoot!.querySelector(
-      'button[data-day="18 1 2023"]',
-    ) as HTMLElement;
-    expect(newSelectedDate).not.to.have.class('sbb-calendar__selected');
-    newSelectedDate.click();
-    await waitForCondition(() => selectedSpy.events.length === 1);
+      expect(selectedDate).to.have.class('sbb-calendar__selected');
 
-    expect(selectedDate).not.to.have.class('sbb-calendar__selected');
-    expect(newSelectedDate).to.have.class('sbb-calendar__selected');
-    expect(selectedSpy.count).to.be.greaterThan(0);
-  });
+      const newSelectedDate = element.shadowRoot!.querySelector(
+        'button[data-day="18 1 2023"]',
+      ) as HTMLElement;
+      expect(newSelectedDate).not.to.have.class('sbb-calendar__selected');
+      newSelectedDate.click();
+      await waitForCondition(() => selectedSpy.events.length === 1);
 
-  it("clicks on disabled day and doesn't change selection", async () => {
-    const selectedSpy = new EventSpy(SbbCalendarElement.events.dateSelected);
+      expect(selectedDate).not.to.have.class('sbb-calendar__selected');
+      expect(newSelectedDate).to.have.class('sbb-calendar__selected');
+      expect(selectedSpy.count).to.be.greaterThan(0);
+    });
 
-    element.max = 1674946800;
-    await waitForLitRender(element);
+    it("clicks on disabled day and doesn't change selection", async () => {
+      const selectedSpy = new EventSpy(SbbCalendarElement.events.dateSelected);
 
-    const day = element.shadowRoot!.querySelector('button[data-day="30 1 2023"]') as HTMLElement;
-    expect(day).to.have.attribute('disabled');
-    expect(day).not.to.have.class('sbb-calendar__selected');
-    day.click();
-    await waitForLitRender(element);
+      element.max = 1674946800;
+      await waitForLitRender(element);
 
-    expect(day).not.to.have.class('sbb-calendar__selected');
-    expect(selectedSpy.count).not.to.be.greaterThan(0);
-  });
+      const day = element.shadowRoot!.querySelector('button[data-day="30 1 2023"]') as HTMLElement;
+      expect(day).to.have.attribute('disabled');
+      expect(day).not.to.have.class('sbb-calendar__selected');
+      day.click();
+      await waitForLitRender(element);
 
-  it('changes to year and month selection views', async () => {
-    const yearSelectionButton: HTMLElement = element.shadowRoot!.querySelector(
-      '#sbb-calendar__date-selection',
-    )!;
+      expect(day).not.to.have.class('sbb-calendar__selected');
+      expect(selectedSpy.count).not.to.be.greaterThan(0);
+    });
 
-    expect(yearSelectionButton).not.to.be.null;
-    yearSelectionButton.click();
-    await waitForTransition();
+    it('changes to year and month selection views', async () => {
+      const yearSelectionButton: HTMLElement = element.shadowRoot!.querySelector(
+        '.sbb-calendar__date-selection',
+      )!;
 
-    const yearSelection: HTMLElement = element.shadowRoot!.querySelector(
-      '#sbb-calendar__year-selection',
-    )!;
-    expect(yearSelection).not.to.be.null;
-    expect(yearSelection).dom.to.be.equal(`
+      expect(yearSelectionButton).not.to.be.null;
+      yearSelectionButton.click();
+      await waitForTransition();
+
+      const yearSelection: HTMLElement = element.shadowRoot!.querySelector(
+        '#sbb-calendar__year-selection',
+      )!;
+      expect(yearSelection).not.to.be.null;
+      expect(yearSelection).dom.to.be.equal(`
       <button aria-label="Choose date 2016 - 2039" class="sbb-calendar__controls-change-date" id="sbb-calendar__year-selection" type="button">
         2016 - 2039
         <sbb-icon aria-hidden="true" data-namespace="default" name="chevron-small-up-small" role="img"></sbb-icon>
       </button>
     `);
 
-    const yearCells: HTMLElement[] = Array.from(
-      element.shadowRoot!.querySelectorAll('.sbb-calendar__table-year'),
-    );
-    expect(yearCells.length).to.be.equal(24);
-    expect(yearCells[0]).dom.to.be.equal(`
+      const yearCells: HTMLElement[] = Array.from(
+        element.shadowRoot!.querySelectorAll('.sbb-calendar__table-year'),
+      );
+      expect(yearCells.length).to.be.equal(24);
+      expect(yearCells[0]).dom.to.be.equal(`
       <td class="sbb-calendar__table-data sbb-calendar__table-year">
         <button aria-disabled="false" aria-label="2016" aria-pressed="false" class="sbb-calendar__cell sbb-calendar__pill" data-year="2016" tabindex="-1">
           2016
@@ -163,31 +181,31 @@ describe(`sbb-calendar`, () => {
       </td>
     `);
 
-    const selectedYear: HTMLElement = yearCells.find((e) => e.innerText === '2023')!;
-    const yearButton: HTMLElement = selectedYear.querySelector('button')!;
-    expect(yearButton).to.have.class('sbb-calendar__selected');
-    expect(yearCells[yearCells.length - 1].innerText).to.be.equal('2039');
+      const yearButton: HTMLButtonElement =
+        element.shadowRoot!.querySelector<HTMLButtonElement>('[data-year="2023"]')!;
+      expect(yearButton).to.have.class('sbb-calendar__selected');
+      expect(yearCells[yearCells.length - 1].innerText).to.be.equal('2039');
 
-    yearButton.click();
+      yearButton.click();
 
-    await waitForTransition();
+      await waitForTransition();
 
-    const monthSelection: HTMLElement = element.shadowRoot!.querySelector(
-      '#sbb-calendar__month-selection',
-    )!;
-    expect(monthSelection).not.to.be.null;
-    expect(monthSelection).dom.to.be.equal(`
+      const monthSelection: HTMLElement = element.shadowRoot!.querySelector(
+        '#sbb-calendar__month-selection',
+      )!;
+      expect(monthSelection).not.to.be.null;
+      expect(monthSelection).dom.to.be.equal(`
       <button aria-label="Choose date 2023" class="sbb-calendar__controls-change-date" id="sbb-calendar__month-selection" type="button">
         2023
         <sbb-icon aria-hidden="true" data-namespace="default" name="chevron-small-up-small" role="img"></sbb-icon>
       </button>
     `);
 
-    const monthCells: HTMLElement[] = Array.from(
-      element.shadowRoot!.querySelectorAll('.sbb-calendar__table-month'),
-    );
-    expect(monthCells.length).to.be.equal(12);
-    expect(monthCells[0]).dom.to.be.equal(`
+      const monthCells: HTMLElement[] = Array.from(
+        element.shadowRoot!.querySelectorAll('.sbb-calendar__table-month'),
+      );
+      expect(monthCells.length).to.be.equal(12);
+      expect(monthCells[0]).dom.to.be.equal(`
       <td class="sbb-calendar__table-data sbb-calendar__table-month">
         <button
           aria-disabled="false"
@@ -201,54 +219,166 @@ describe(`sbb-calendar`, () => {
       </td>
     `);
 
-    monthCells[0].querySelector('button')!.click();
-    await waitForLitRender(element);
-
-    await waitForTransition();
+      monthCells[0].querySelector('button')!.click();
+      await waitForLitRender(element);
 
-    const dayCells = Array.from(element.shadowRoot!.querySelectorAll('.sbb-calendar__day'));
-    expect(dayCells.length).to.be.equal(31);
-  });
+      await waitForTransition();
 
-  it('changes to year and month selection views if wide', async () => {
-    await setViewport({ width: SbbBreakpointMediumMin, height: 1000 });
-    element.wide = true;
+      const dayCells = Array.from(element.shadowRoot!.querySelectorAll('.sbb-calendar__day'));
+      expect(dayCells.length).to.be.equal(31);
+    });
 
-    await waitForLitRender(element);
+    it('opens year view', async () => {
+      element.view = 'year';
+      await waitForLitRender(element);
 
-    // Open year selection
-    element
-      .shadowRoot!.querySelector<HTMLButtonElement>('button#sbb-calendar__date-selection')!
-      .click();
+      expect(element.shadowRoot!.querySelector('.sbb-calendar__table-year-view')).not.to.be.null;
+    });
 
-    await waitForTransition();
-    await waitForLitRender(element);
+    it('opens month view', async () => {
+      element.view = 'month';
+      await waitForLitRender(element);
 
-    const selectedYear: HTMLElement = Array.from(
-      element.shadowRoot!.querySelectorAll<HTMLTableCellElement>('.sbb-calendar__table-year'),
-    ).find((e) => e.innerText === '2063')!;
-    const yearButton: HTMLElement = selectedYear.querySelector('button')!;
+      expect(element.shadowRoot!.querySelector('.sbb-calendar__table-month-view')).not.to.be.null;
+      expect(
+        element.shadowRoot!.querySelector('#sbb-calendar__month-selection')!.textContent!.trim(),
+      ).to.be.equal('2023');
+    });
 
-    // Open month selection
-    yearButton.click();
+    it('opens month view with selected date', async () => {
+      element.selected = '2017-01-22';
+      element.view = 'month';
+      await waitForLitRender(element);
 
-    await waitForLitRender(element);
-    await waitForTransition();
+      expect(
+        element.shadowRoot!.querySelector('#sbb-calendar__month-selection')!.textContent!.trim(),
+      ).to.be.equal('2017');
+    });
 
-    // Click last available month on right side
-    element
-      .shadowRoot!.querySelector<HTMLButtonElement>('button[aria-label="December 2062"]')!
-      .click();
+    it('opens month view with current date', async () => {
+      element.selected = undefined;
+      element.now = '2022-08-15';
+      element.view = 'month';
+      await waitForLitRender(element);
 
-    await waitForLitRender(element);
-    await waitForTransition();
+      expect(
+        element.shadowRoot!.querySelector('#sbb-calendar__month-selection')!.textContent!.trim(),
+      ).to.be.equal('2022');
+    });
 
-    // Day view should be opened with December 2062
-    expect(
-      element
-        .shadowRoot!.querySelector<HTMLButtonElement>('button#sbb-calendar__date-selection')!
-        .innerText.trim(),
-    ).to.be.equal('December 2062');
+    describe('navigation', () => {
+      it('navigates left via keyboard', async () => {
+        element.focus();
+        expect(
+          document.activeElement!.shadowRoot!.activeElement!.getAttribute('data-day'),
+        ).to.be.equal('15 1 2023');
+
+        await sendKeys({ press: 'ArrowLeft' });
+        await waitForLitRender(element);
+
+        expect(
+          document.activeElement!.shadowRoot!.activeElement!.getAttribute('data-day'),
+        ).to.be.equal('14 1 2023');
+      });
+
+      it('navigates right via keyboard', async () => {
+        element.focus();
+        expect(
+          document.activeElement!.shadowRoot!.activeElement!.getAttribute('data-day'),
+        ).to.be.equal('15 1 2023');
+
+        await sendKeys({ press: 'ArrowRight' });
+        await waitForLitRender(element);
+
+        expect(
+          document.activeElement!.shadowRoot!.activeElement!.getAttribute('data-day'),
+        ).to.be.equal('16 1 2023');
+      });
+
+      it('navigates up via keyboard', async () => {
+        element.focus();
+        expect(
+          document.activeElement!.shadowRoot!.activeElement!.getAttribute('data-day'),
+        ).to.be.equal('15 1 2023');
+
+        await sendKeys({ press: 'ArrowUp' });
+        await waitForLitRender(element);
+
+        expect(
+          document.activeElement!.shadowRoot!.activeElement!.getAttribute('data-day'),
+        ).to.be.equal('8 1 2023');
+      });
+
+      it('navigates down via keyboard', async () => {
+        element.focus();
+        expect(
+          document.activeElement!.shadowRoot!.activeElement!.getAttribute('data-day'),
+        ).to.be.equal('15 1 2023');
+
+        await sendKeys({ press: 'ArrowDown' });
+        await waitForLitRender(element);
+
+        expect(
+          document.activeElement!.shadowRoot!.activeElement!.getAttribute('data-day'),
+        ).to.be.equal('22 1 2023');
+      });
+
+      it('navigates to first day via keyboard', async () => {
+        element.focus();
+        expect(
+          document.activeElement!.shadowRoot!.activeElement!.getAttribute('data-day'),
+        ).to.be.equal('15 1 2023');
+
+        await sendKeys({ press: 'Home' });
+        await waitForLitRender(element);
+
+        expect(
+          document.activeElement!.shadowRoot!.activeElement!.getAttribute('data-day'),
+        ).to.be.equal('1 1 2023');
+      });
+
+      it('navigates to last day via keyboard', async () => {
+        element.focus();
+        expect(
+          document.activeElement!.shadowRoot!.activeElement!.getAttribute('data-day'),
+        ).to.be.equal('15 1 2023');
+
+        await sendKeys({ press: 'End' });
+        await waitForLitRender(element);
+
+        expect(
+          document.activeElement!.shadowRoot!.activeElement!.getAttribute('data-day'),
+        ).to.be.equal('31 1 2023');
+      });
+
+      it('navigates to column start via keyboard', async () => {
+        element.focus();
+        expect(
+          document.activeElement!.shadowRoot!.activeElement!.getAttribute('data-day'),
+        ).to.be.equal('15 1 2023');
+
+        await sendKeys({ press: 'PageUp' });
+        await waitForLitRender(element);
+
+        expect(
+          document.activeElement!.shadowRoot!.activeElement!.getAttribute('data-day'),
+        ).to.be.equal('1 1 2023');
+      });
+
+      it('navigates to column end via keyboard', async () => {
+        element.focus();
+        expect(
+          document.activeElement!.shadowRoot!.activeElement!.getAttribute('data-day'),
+        ).to.be.equal('15 1 2023');
+
+        await sendKeys({ press: 'PageDown' });
+        await waitForLitRender(element);
+
+        expect(
+          document.activeElement!.shadowRoot!.activeElement!.getAttribute('data-day'),
+        ).to.be.equal('29 1 2023');
+      });
+    });
   });
 
   it('renders with min and max', async () => {
@@ -287,155 +417,87 @@ describe(`sbb-calendar`, () => {
     expect(firstDisabledMaxDate).to.have.attribute('aria-disabled', 'true');
   });
 
-  it('opens year view', async () => {
-    element.view = 'year';
-    await waitForLitRender(element);
-
-    expect(element.shadowRoot!.querySelector('.sbb-calendar__table-year-view')).not.to.be.null;
-  });
-
-  it('opens month view', async () => {
-    element.view = 'month';
-    await waitForLitRender(element);
-
-    expect(element.shadowRoot!.querySelector('.sbb-calendar__table-month-view')).not.to.be.null;
-    expect(
-      element.shadowRoot!.querySelector('#sbb-calendar__month-selection')!.textContent!.trim(),
-    ).to.be.equal('2023');
-  });
-
-  it('opens month view with selected date', async () => {
-    element.selected = '2017-01-22';
-    element.view = 'month';
-    await waitForLitRender(element);
-
-    expect(
-      element.shadowRoot!.querySelector('#sbb-calendar__month-selection')!.textContent!.trim(),
-    ).to.be.equal('2017');
-  });
-
-  it('opens month view with current date', async () => {
-    element.selected = undefined;
-    element.now = '2022-08-15';
-    element.view = 'month';
-    await waitForLitRender(element);
-
-    expect(
-      element.shadowRoot!.querySelector('#sbb-calendar__month-selection')!.textContent!.trim(),
-    ).to.be.equal('2022');
-  });
-
-  describe('navigation', () => {
-    it('navigates left via keyboard', async () => {
-      element.focus();
-      expect(
-        document.activeElement!.shadowRoot!.activeElement!.getAttribute('data-day'),
-      ).to.be.equal('15 1 2023');
-
-      await sendKeys({ press: 'ArrowLeft' });
-      await waitForLitRender(element);
-
-      expect(
-        document.activeElement!.shadowRoot!.activeElement!.getAttribute('data-day'),
-      ).to.be.equal('14 1 2023');
+  describe('wide', () => {
+    beforeEach(async () => {
+      await setViewport({ width: SbbBreakpointLargeMin, height: 1000 });
     });
 
-    it('navigates right via keyboard', async () => {
-      element.focus();
-      expect(
-        document.activeElement!.shadowRoot!.activeElement!.getAttribute('data-day'),
-      ).to.be.equal('15 1 2023');
-
-      await sendKeys({ press: 'ArrowRight' });
-      await waitForLitRender(element);
+    it('changes to year and month selection views', async () => {
+      element = await fixture(
+        html`<sbb-calendar now="1673348400" selected="1673744400" wide></sbb-calendar>`,
+      );
 
-      expect(
-        document.activeElement!.shadowRoot!.activeElement!.getAttribute('data-day'),
-      ).to.be.equal('16 1 2023');
-    });
+      // Open year selection
+      element
+        .shadowRoot!.querySelector<HTMLButtonElement>('button.sbb-calendar__date-selection')!
+        .click();
 
-    it('navigates up via keyboard', async () => {
-      element.focus();
-      expect(
-        document.activeElement!.shadowRoot!.activeElement!.getAttribute('data-day'),
-      ).to.be.equal('15 1 2023');
+      await waitForTransition();
 
-      await sendKeys({ press: 'ArrowUp' });
-      await waitForLitRender(element);
+      // Open month selection
+      element.shadowRoot!.querySelector<HTMLButtonElement>('[data-year="2063"]')!.click();
 
-      expect(
-        document.activeElement!.shadowRoot!.activeElement!.getAttribute('data-day'),
-      ).to.be.equal('8 1 2023');
-    });
+      await waitForTransition();
 
-    it('navigates down via keyboard', async () => {
-      element.focus();
-      expect(
-        document.activeElement!.shadowRoot!.activeElement!.getAttribute('data-day'),
-      ).to.be.equal('15 1 2023');
+      element.shadowRoot!.querySelector<HTMLButtonElement>('[aria-label="December 2063"]')!.click();
 
-      await sendKeys({ press: 'ArrowDown' });
-      await waitForLitRender(element);
+      await waitForTransition();
 
+      // Day view should be opened with December 2062
       expect(
-        document.activeElement!.shadowRoot!.activeElement!.getAttribute('data-day'),
-      ).to.be.equal('22 1 2023');
+        element
+          .shadowRoot!.querySelector<HTMLButtonElement>('button.sbb-calendar__date-selection')!
+          .innerText.trim(),
+      ).to.be.equal('December 2063');
     });
 
-    it('navigates to first day via keyboard', async () => {
-      element.focus();
-      expect(
-        document.activeElement!.shadowRoot!.activeElement!.getAttribute('data-day'),
-      ).to.be.equal('15 1 2023');
-
-      await sendKeys({ press: 'Home' });
-      await waitForLitRender(element);
+    it('renders with min and max', async () => {
+      await setViewport({ width: SbbBreakpointLargeMin, height: 1000 });
+      element = await fixture(
+        html`<sbb-calendar
+          now="2024-11-04"
+          selected="2024-11-20"
+          min="2023-11-04"
+          max="2026-12-31"
+          wide
+        ></sbb-calendar>`,
+      );
 
-      expect(
-        document.activeElement!.shadowRoot!.activeElement!.getAttribute('data-day'),
-      ).to.be.equal('1 1 2023');
-    });
+      // Open year selection
+      element
+        .shadowRoot!.querySelector<HTMLButtonElement>('button.sbb-calendar__date-selection')!
+        .click();
 
-    it('navigates to last day via keyboard', async () => {
-      element.focus();
-      expect(
-        document.activeElement!.shadowRoot!.activeElement!.getAttribute('data-day'),
-      ).to.be.equal('15 1 2023');
+      await waitForTransition();
 
-      await sendKeys({ press: 'End' });
-      await waitForLitRender(element);
+      // Open month selection
+      element.shadowRoot!.querySelector<HTMLButtonElement>('[data-year="2023"]')!.click();
 
-      expect(
-        document.activeElement!.shadowRoot!.activeElement!.getAttribute('data-day'),
-      ).to.be.equal('31 1 2023');
-    });
+      await waitForTransition();
 
-    it('navigates to column start via keyboard', async () => {
-      element.focus();
+      // Check if January 2024 is clickable (first possible)
       expect(
-        document.activeElement!.shadowRoot!.activeElement!.getAttribute('data-day'),
-      ).to.be.equal('15 1 2023');
-
-      await sendKeys({ press: 'PageUp' });
-      await waitForLitRender(element);
+        element.shadowRoot!.querySelector<HTMLButtonElement>('button[aria-label="January 2024"]'),
+      ).not.to.have.attribute('disabled');
 
+      // Check if November 2023 is clickable
       expect(
-        document.activeElement!.shadowRoot!.activeElement!.getAttribute('data-day'),
-      ).to.be.equal('1 1 2023');
-    });
+        element.shadowRoot!.querySelector<HTMLButtonElement>('button[aria-label="November 2023"]'),
+      ).not.to.have.attribute('disabled');
 
-    it('navigates to column end via keyboard', async () => {
-      element.focus();
-      expect(
-        document.activeElement!.shadowRoot!.activeElement!.getAttribute('data-day'),
-      ).to.be.equal('15 1 2023');
+      // Navigate to max page
+      await goToNextView(element);
+      await goToNextView(element);
 
-      await sendKeys({ press: 'PageDown' });
-      await waitForLitRender(element);
+      const nextButton = element.shadowRoot!.querySelector<SbbSecondaryButtonElement>(
+        "sbb-secondary-button[icon-name='chevron-small-right-small']",
+      )!;
+      expect(nextButton).to.have.attribute('disabled');
 
+      // Check if December 2026 is clickable (last possible)
       expect(
-        document.activeElement!.shadowRoot!.activeElement!.getAttribute('data-day'),
-      ).to.be.equal('29 1 2023');
+        element.shadowRoot!.querySelector<HTMLButtonElement>('button[aria-label="December 2026"]'),
+      ).not.to.have.attribute('disabled');
     });
   });
 
@@ -446,7 +508,7 @@ describe(`sbb-calendar`, () => {
       );
 
       const yearSelectionButton: HTMLElement = element.shadowRoot!.querySelector(
-        '#sbb-calendar__date-selection',
+        '.sbb-calendar__date-selection',
       )!;
 
       expect(yearSelectionButton).not.to.be.null;
diff --git a/src/elements/calendar/calendar.ts b/src/elements/calendar/calendar.ts
index d5a6b5a4d9..7956ed7330 100644
--- a/src/elements/calendar/calendar.ts
+++ b/src/elements/calendar/calendar.ts
@@ -427,51 +427,56 @@ class SbbCalendarElement<T = Date> extends SbbHydrationMixin(LitElement) {
 
   /** Checks if date is within the min-max range. */
   private _isDayInRange(date: string): boolean {
-    if (!this._min && !this._max) {
+    if (!this.min && !this.max) {
       return true;
     }
     const isBeforeMin: boolean =
-      this._dateAdapter.isValid(this._min) &&
-      this._dateAdapter.compareDate(this._min!, this._dateAdapter.deserialize(date)!) > 0;
+      this._dateAdapter.isValid(this.min) &&
+      this._dateAdapter.compareDate(this.min!, this._dateAdapter.deserialize(date)!) > 0;
     const isAfterMax: boolean =
-      this._dateAdapter.isValid(this._max) &&
-      this._dateAdapter.compareDate(this._max!, this._dateAdapter.deserialize(date)!) < 0;
+      this._dateAdapter.isValid(this.max) &&
+      this._dateAdapter.compareDate(this.max!, this._dateAdapter.deserialize(date)!) < 0;
     return !(isBeforeMin || isAfterMax);
   }
 
-  private _isMonthInRange(month: number): boolean {
-    if (!this._min && !this._max) {
+  private _isMonthInRange(month: number, year: number): boolean {
+    if (!this.min && !this.max) {
       return true;
     }
+
     const isBeforeMin: boolean =
-      this._dateAdapter.isValid(this._min) &&
-      this._dateAdapter.getYear(this._min!) >= this._chosenYear! &&
-      this._dateAdapter.getMonth(this._min!) > month;
+      this._dateAdapter.isValid(this.min) &&
+      (year < this._dateAdapter.getYear(this.min!) ||
+        (year === this._dateAdapter.getYear(this.min!) &&
+          month < this._dateAdapter.getMonth(this.min!)));
+
     const isAfterMax: boolean =
-      this._dateAdapter.isValid(this._max) &&
-      this._dateAdapter.getYear(this._max!) <= this._chosenYear! &&
-      this._dateAdapter.getMonth(this._max!) < month;
+      this._dateAdapter.isValid(this.max) &&
+      (year > this._dateAdapter.getYear(this.max!) ||
+        (year === this._dateAdapter.getYear(this.max!) &&
+          month > this._dateAdapter.getMonth(this.max!)));
+
     return !(isBeforeMin || isAfterMax);
   }
 
   private _isYearInRange(year: number): boolean {
-    if (!this._min && !this._max) {
+    if (!this.min && !this.max) {
       return true;
     }
     const isBeforeMin: boolean =
-      this._dateAdapter.isValid(this._min) && this._dateAdapter.getYear(this._min!) > year;
+      this._dateAdapter.isValid(this.min) && this._dateAdapter.getYear(this.min!) > year;
     const isAfterMax: boolean =
-      this._dateAdapter.isValid(this._max) && this._dateAdapter.getYear(this._max!) < year;
+      this._dateAdapter.isValid(this.max) && this._dateAdapter.getYear(this.max!) < year;
     return !(isBeforeMin || isAfterMax);
   }
 
   // Implementation adapted from https://github.com/angular/components/blob/main/src/material/datepicker/year-view.ts#L366
-  private _isMonthFilteredOut(month: number): boolean {
+  private _isMonthFilteredOut(month: number, year: number): boolean {
     if (!this.dateFilter) {
       return true;
     }
 
-    const firstOfMonth = this._dateAdapter.createDate(this._chosenYear!, month, 1)!;
+    const firstOfMonth = this._dateAdapter.createDate(year, month, 1)!;
     for (
       let date: T = firstOfMonth;
       this._dateAdapter.getMonth(date) == month;
@@ -526,12 +531,12 @@ class SbbCalendarElement<T = Date> extends SbbHydrationMixin(LitElement) {
   }
 
   private _assignActiveDate(date: T): void {
-    if (this._min && this._dateAdapter.compareDate(this._min, date) > 0) {
-      this._activeDate = this._min;
+    if (this.min && this._dateAdapter.compareDate(this.min, date) > 0) {
+      this._activeDate = this.min;
       return;
     }
-    if (this._max && this._dateAdapter.compareDate(this._max, date) < 0) {
-      this._activeDate = this._max;
+    if (this.max && this._dateAdapter.compareDate(this.max, date) < 0) {
+      this._activeDate = this.max;
       return;
     }
     this._activeDate = date;
@@ -558,17 +563,17 @@ class SbbCalendarElement<T = Date> extends SbbHydrationMixin(LitElement) {
   }
 
   private _prevDisabled(prevDate: T): boolean {
-    if (!this._min) {
+    if (!this.min) {
       return false;
     }
-    return this._dateAdapter.compareDate(prevDate, this._min) < 0;
+    return this._dateAdapter.compareDate(prevDate, this.min) < 0;
   }
 
   private _nextDisabled(nextDate: T): boolean {
-    if (!this._max) {
+    if (!this.max) {
       return false;
     }
-    return this._dateAdapter.compareDate(nextDate, this._max) > 0;
+    return this._dateAdapter.compareDate(nextDate, this.max) > 0;
   }
 
   /** Checks if the "previous month" button should be disabled. */
@@ -602,7 +607,7 @@ class SbbCalendarElement<T = Date> extends SbbHydrationMixin(LitElement) {
 
   private _nextYearDisabled(): boolean {
     const nextYear = this._dateAdapter.createDate(
-      this._dateAdapter.getYear(this._activeDate) + 1,
+      this._dateAdapter.getYear(this._activeDate) + (this._wide ? 2 : 1),
       1,
       1,
     );
@@ -615,7 +620,7 @@ class SbbCalendarElement<T = Date> extends SbbHydrationMixin(LitElement) {
   }
 
   private _nextYearRangeDisabled(): boolean {
-    const years = isBreakpoint('medium') && this.wide ? this._nextMonthYears : this._years;
+    const years = this._wide ? this._nextMonthYears : this._years;
     const lastYearRange = years[years.length - 1];
     const lastYear = lastYearRange[lastYearRange.length - 1];
     const nextYear = this._dateAdapter.createDate(lastYear + 1, 1, 1);
@@ -882,8 +887,7 @@ class SbbCalendarElement<T = Date> extends SbbHydrationMixin(LitElement) {
     return html`
       <button
         type="button"
-        id="sbb-calendar__date-selection"
-        class="sbb-calendar__controls-change-date"
+        class="sbb-calendar__date-selection sbb-calendar__controls-change-date"
         aria-label="${i18nYearMonthSelection[this._language.current]} ${monthLabel}"
         @click=${() => {
           this._resetFocus = true;
@@ -1068,8 +1072,8 @@ class SbbCalendarElement<T = Date> extends SbbHydrationMixin(LitElement) {
             (row: Month[]) => html`
               <tr>
                 ${row.map((month: Month) => {
-                  const isOutOfRange = !this._isMonthInRange(month.monthValue);
-                  const isFilteredOut = !this._isMonthFilteredOut(month.monthValue);
+                  const isOutOfRange = !this._isMonthInRange(month.monthValue, year);
+                  const isFilteredOut = !this._isMonthFilteredOut(month.monthValue, year);
                   const selectedMonth = this._selected
                     ? this._dateAdapter.getMonth(this._dateAdapter.deserialize(this._selected)!)
                     : undefined;
@@ -1099,7 +1103,7 @@ class SbbCalendarElement<T = Date> extends SbbHydrationMixin(LitElement) {
                       })}
                       @click=${() => this._onMonthSelection(month.monthValue, year)}
                       ?disabled=${isOutOfRange || isFilteredOut}
-                      aria-label=${`${month.longValue} ${this._chosenYear}`}
+                      aria-label=${`${month.longValue} ${year}`}
                       aria-pressed=${selected}
                       aria-disabled=${String(isOutOfRange || isFilteredOut)}
                       tabindex="-1"
@@ -1177,9 +1181,7 @@ class SbbCalendarElement<T = Date> extends SbbHydrationMixin(LitElement) {
   /** Creates the label with the year range for the yearly view. */
   private _createLabelForYearView(): TemplateResult {
     const firstYear: number = this._years.flat()[0];
-    const lastYearArray: number[] = (
-      isBreakpoint('medium') && this.wide ? this._nextMonthYears : this._years
-    ).flat();
+    const lastYearArray: number[] = (this._wide ? this._nextMonthYears : this._years).flat();
     const lastYear: number = lastYearArray[lastYearArray.length - 1];
     const yearLabel = `${firstYear} - ${lastYear}`;
     return html`