From 6b2783249f8c9ede7f315c91aeeceb162ff75c2d Mon Sep 17 00:00:00 2001
From: benjaminLeongSK <benjaminlsk@live.com>
Date: Tue, 14 Apr 2026 14:08:43 +0800
Subject: [PATCH 01/10] [#1082][BL] Make time slots tabbable with focus border

---
 .../time-slot-bar-week-days.style.tsx         |  7 +++
 .../time-slot-bar-week-days.tsx               | 54 +++++++++++++++++--
 2 files changed, 57 insertions(+), 4 deletions(-)

diff --git a/src/time-slot-bar-week/time-slot-bar-week-days.style.tsx b/src/time-slot-bar-week/time-slot-bar-week-days.style.tsx
index 4296431f09..dccc3654a7 100644
--- a/src/time-slot-bar-week/time-slot-bar-week-days.style.tsx
+++ b/src/time-slot-bar-week/time-slot-bar-week-days.style.tsx
@@ -130,6 +130,7 @@ export const TimeSlotComponent = styled(TimeSlot)<TimeSlotCellProps>`
     ${(props) => {
         if (props.$type === "vertical") {
             return css`
+                position: relative;
                 max-width: 200px;
                 height: ${props.$height}px;
                 min-height: ${props.$height}px;
@@ -139,6 +140,12 @@ export const TimeSlotComponent = styled(TimeSlot)<TimeSlotCellProps>`
         }
     }}
 
+    &:focus-within {
+        outline: 2px solid ${Colour["focus-ring"]};
+        outline-offset: 1px;
+        z-index: 1;
+    }
+
     ${(props) => {
         if (!props.$halfFill) {
             return css`
diff --git a/src/time-slot-bar-week/time-slot-bar-week-days.tsx b/src/time-slot-bar-week/time-slot-bar-week-days.tsx
index dec6e356d7..42ef6147d7 100644
--- a/src/time-slot-bar-week/time-slot-bar-week-days.tsx
+++ b/src/time-slot-bar-week/time-slot-bar-week-days.tsx
@@ -5,12 +5,15 @@ import maxBy from "lodash/maxBy";
 import minBy from "lodash/minBy";
 import React, { useMemo, useState } from "react";
 import { useResizeDetector } from "react-resize-detector";
+import { VisuallyHidden } from "../shared/accessibility";
 import { InternalCalendarProps } from "../shared/internal-calendar";
 import { CellStyleProps, DayCell } from "../shared/internal-calendar/day-cell";
 import { Colour } from "../theme";
 import { TimeSlot } from "../time-slot-bar/types";
 import { DateHelper } from "../util";
 import { CalendarHelper } from "../util/calendar-helper";
+import { StringHelper } from "../util/string-helper";
+import { TimeHelper } from "../util/time-helper";
 import {
     CellWeekText,
     ChevronIcon,
@@ -51,6 +54,7 @@ interface TimeSlotWeekDaysProps
 interface TimeSlotCell extends TimeSlot {
     cellLength: number;
     halfFill?: "top" | "bottom" | undefined;
+    isActualSlot?: boolean | undefined;
 }
 
 export const TimeSlotBarWeekDays = ({
@@ -191,13 +195,16 @@ export const TimeSlotBarWeekDays = ({
 
     function generateFallbackCell(
         prefix: string | number,
-        cellLength = 1
+        cellLength = 1,
+        startTime = "",
+        endTime = ""
     ): TimeSlotCell {
         return {
             id: `${prefix.toString()}-${new Date().getTime()}`,
-            startTime: "",
-            endTime: "",
+            startTime,
+            endTime,
             clickable: false,
+            isActualSlot: false,
             styleAttributes: {
                 backgroundColor: Colour["bg-stronger"],
             },
@@ -205,6 +212,20 @@ export const TimeSlotBarWeekDays = ({
         };
     }
 
+    function getSlotAriaLabel(date: string, slot: TimeSlot) {
+        const { startTime: slotStartTime, endTime: slotEndTime } = slot;
+        const isAvailable = slot.clickable ?? true;
+
+        return StringHelper.joinNonEmptyStrings([
+            dayjs(date).format("D MMMM YYYY dddd"),
+            slotStartTime && slotEndTime
+                ? TimeHelper.formatTimeRange(slotStartTime, slotEndTime)
+                : undefined,
+            isAvailable ? "Available" : "Unavailable",
+            slot.label,
+        ]);
+    }
+
     function initializeAndFillSlots(slots: TimeSlot[]): TimeSlotCell[] {
         const cellsArray = Array(numberOfCells).fill({});
 
@@ -226,6 +247,7 @@ export const TimeSlotBarWeekDays = ({
                     // Keep fixed slots as 1 long cell
                     cellsArray[Math.floor(startIndex)] = {
                         ...slot,
+                        isActualSlot: true,
                         cellLength: endIndex - startIndex,
                     };
                     break;
@@ -257,6 +279,7 @@ export const TimeSlotBarWeekDays = ({
                             id: `${slot.id}-${i}`,
                             startTime,
                             endTime,
+                            isActualSlot: true,
                             cellLength: 1,
                             halfFill,
                         };
@@ -442,6 +465,7 @@ export const TimeSlotBarWeekDays = ({
                                     const {
                                         id,
                                         clickable = true,
+                                        isActualSlot,
                                         styleAttributes,
                                         cellLength,
                                         halfFill,
@@ -474,7 +498,29 @@ export const TimeSlotBarWeekDays = ({
                                                     slot
                                                 )
                                             }
-                                        ></TimeSlotComponent>
+                                        >
+                                            {isActualSlot && (
+                                                <VisuallyHidden>
+                                                    <button
+                                                        type="button"
+                                                        aria-disabled={
+                                                            !clickable
+                                                        }
+                                                        aria-label={getSlotAriaLabel(
+                                                            formattedDate,
+                                                            slot
+                                                        )}
+                                                        onClick={() =>
+                                                            clickable &&
+                                                            handleSlotClick(
+                                                                formattedDate,
+                                                                slot
+                                                            )
+                                                        }
+                                                    />
+                                                </VisuallyHidden>
+                                            )}
+                                        </TimeSlotComponent>
                                     );
                                 })}
                             </TimeSlotWrapper>

From 1df4c9cda833c7786e507410813c0e841490a2b5 Mon Sep 17 00:00:00 2001
From: benjaminLeongSK <benjaminlsk@live.com>
Date: Tue, 14 Apr 2026 16:16:13 +0800
Subject: [PATCH 02/10] [#1082][BL] Add keyboard navigation

---
 .../time-slot-bar-week-days.tsx               | 145 ++++++++++++++++--
 1 file changed, 132 insertions(+), 13 deletions(-)

diff --git a/src/time-slot-bar-week/time-slot-bar-week-days.tsx b/src/time-slot-bar-week/time-slot-bar-week-days.tsx
index 42ef6147d7..21004817fa 100644
--- a/src/time-slot-bar-week/time-slot-bar-week-days.tsx
+++ b/src/time-slot-bar-week/time-slot-bar-week-days.tsx
@@ -3,7 +3,7 @@ import dayjs, { Dayjs } from "dayjs";
 import isEmpty from "lodash/isEmpty";
 import maxBy from "lodash/maxBy";
 import minBy from "lodash/minBy";
-import React, { useMemo, useState } from "react";
+import React, { useMemo, useRef, useState } from "react";
 import { useResizeDetector } from "react-resize-detector";
 import { VisuallyHidden } from "../shared/accessibility";
 import { InternalCalendarProps } from "../shared/internal-calendar";
@@ -55,6 +55,13 @@ interface TimeSlotCell extends TimeSlot {
     cellLength: number;
     halfFill?: "top" | "bottom" | undefined;
     isActualSlot?: boolean | undefined;
+    rowIndex?: number | undefined;
+}
+
+interface FocusableSlotMeta {
+    key: string;
+    date: string;
+    rowIndex: number;
 }
 
 export const TimeSlotBarWeekDays = ({
@@ -79,6 +86,7 @@ export const TimeSlotBarWeekDays = ({
     const dateFormat = "YYYY-MM-DD";
     const [expandAll, setExpandAll] = useState<boolean>(false);
     const [hoverDay, setHoverDay] = useState<Dayjs>();
+    const slotButtonRefs = useRef<Record<string, HTMLButtonElement | null>>({});
     const currentCalendarWeek = useMemo((): Dayjs[] => {
         return CalendarHelper.generateDaysForCurrentWeek(calendarDate);
     }, [calendarDate]);
@@ -141,6 +149,108 @@ export const TimeSlotBarWeekDays = ({
         setExpandAll((prevExpandValue) => !prevExpandValue);
     };
 
+    const getCellsForDate = (formattedDate: string) => {
+        return (
+            generatedDaySlots[formattedDate] ??
+            Array(variant === "flexible" ? numberOfCells : 1)
+                .fill(undefined)
+                .map((_, index) =>
+                    generateFallbackCell(
+                        index,
+                        variant === "fixed" ? numberOfCells : undefined
+                    )
+                )
+        );
+    };
+
+    const getFocusableSlotsForDate = (
+        formattedDate: string
+    ): FocusableSlotMeta[] => {
+        return getCellsForDate(formattedDate)
+            .filter(
+                (
+                    slot
+                ): slot is TimeSlotCell & {
+                    isActualSlot: true;
+                    rowIndex: number;
+                } => !!slot.isActualSlot && slot.rowIndex !== undefined
+            )
+            .map((slot) => ({
+                key: `${formattedDate}-${slot.id}`,
+                date: formattedDate,
+                rowIndex: slot.rowIndex,
+            }))
+            .sort((a, b) => a.rowIndex - b.rowIndex);
+    };
+
+    const handleSlotKeyDown = (
+        event: React.KeyboardEvent<HTMLButtonElement>,
+        currentSlot: FocusableSlotMeta
+    ) => {
+        const sameColumnSlots = getFocusableSlotsForDate(currentSlot.date);
+
+        const focusSlot = (slot?: FocusableSlotMeta) => {
+            if (!slot) return;
+            slotButtonRefs.current[slot.key]?.focus();
+        };
+
+        switch (event.key) {
+            case "ArrowRight":
+            case "ArrowDown": {
+                event.preventDefault();
+                const currentIndex = sameColumnSlots.findIndex(
+                    (slot) => slot.key === currentSlot.key
+                );
+                focusSlot(sameColumnSlots[currentIndex + 1]);
+                break;
+            }
+            case "ArrowLeft":
+            case "ArrowUp": {
+                event.preventDefault();
+                const currentIndex = sameColumnSlots.findIndex(
+                    (slot) => slot.key === currentSlot.key
+                );
+                focusSlot(sameColumnSlots[currentIndex - 1]);
+                break;
+            }
+            case "Home":
+                event.preventDefault();
+                focusSlot(sameColumnSlots[0]);
+                break;
+            case "End":
+                event.preventDefault();
+                focusSlot(sameColumnSlots[sameColumnSlots.length - 1]);
+                break;
+            case "PageUp":
+                event.preventDefault();
+                focusSlot(sameColumnSlots[0]);
+                break;
+            case "PageDown": {
+                event.preventDefault();
+                const hasCollapsedContent =
+                    !!maxVisibleCellHeight &&
+                    actualHeight > maxVisibleCellHeight;
+                if (hasCollapsedContent && !expandAll) {
+                    setExpandAll(true);
+                    const visibleRowCount = Math.max(
+                        1,
+                        Math.floor((maxVisibleCellHeight + 4) / 16)
+                    );
+                    const lastVisibleSlot = [...sameColumnSlots]
+                        .reverse()
+                        .find((slot) => slot.rowIndex < visibleRowCount);
+                    focusSlot(lastVisibleSlot ?? sameColumnSlots[0]);
+                    break;
+                }
+
+                focusSlot(sameColumnSlots[sameColumnSlots.length - 1]);
+                break;
+            }
+            default:
+                break;
+        }
+    };
+
     // =============================================================================
     // HELPER FUNCTIONS
     // =============================================================================
@@ -248,6 +358,7 @@ export const TimeSlotBarWeekDays = ({
                     cellsArray[Math.floor(startIndex)] = {
                         ...slot,
                         isActualSlot: true,
+                        rowIndex: Math.floor(startIndex),
                         cellLength: endIndex - startIndex,
                     };
                     break;
@@ -280,6 +391,7 @@ export const TimeSlotBarWeekDays = ({
                             startTime,
                             endTime,
                             isActualSlot: true,
+                            rowIndex: Math.floor(startIndex + i),
                             cellLength: 1,
                             halfFill,
                         };
@@ -447,18 +559,7 @@ export const TimeSlotBarWeekDays = ({
                 >
                     {currentCalendarWeek.map((day, dayIndex) => {
                         const formattedDate = day.format(dateFormat);
-                        const cellsArray =
-                            generatedDaySlots[formattedDate] ??
-                            Array(variant === "flexible" ? numberOfCells : 1)
-                                .fill(undefined)
-                                .map((_, index) =>
-                                    generateFallbackCell(
-                                        index,
-                                        variant === "fixed"
-                                            ? numberOfCells
-                                            : undefined
-                                    )
-                                );
+                        const cellsArray = getCellsForDate(formattedDate);
                         return (
                             <TimeSlotWrapper key={`wrapper-${dayIndex}`}>
                                 {cellsArray.map((slot) => {
@@ -475,6 +576,7 @@ export const TimeSlotBarWeekDays = ({
                                         backgroundColor,
                                         backgroundColor2,
                                     } = styleAttributes;
+                                    const slotKey = `${formattedDate}-${id}`;
                                     return (
                                         <TimeSlotComponent
                                             $type="vertical"
@@ -503,6 +605,11 @@ export const TimeSlotBarWeekDays = ({
                                                 <VisuallyHidden>
                                                     <button
                                                         type="button"
+                                                        ref={(element) => {
+                                                            slotButtonRefs.current[
+                                                                slotKey
+                                                            ] = element;
+                                                        }}
                                                         aria-disabled={
                                                             !clickable
                                                         }
@@ -510,6 +617,18 @@ export const TimeSlotBarWeekDays = ({
                                                             formattedDate,
                                                             slot
                                                         )}
+                                                        onKeyDown={(event) =>
+                                                            handleSlotKeyDown(
+                                                                event,
+                                                                {
+                                                                    key: slotKey,
+                                                                    date: formattedDate,
+                                                                    rowIndex:
+                                                                        slot.rowIndex ??
+                                                                        0,
+                                                                }
+                                                            )
+                                                        }
                                                         onClick={() =>
                                                             clickable &&
                                                             handleSlotClick(

From 6622e6c2fddaf0126da6554dc99f8def1def8ce6 Mon Sep 17 00:00:00 2001
From: benjaminLeongSK <benjaminlsk@live.com>
Date: Tue, 14 Apr 2026 16:33:25 +0800
Subject: [PATCH 03/10] [#1082][BL] Prevent handleSlotClick being called twice
 while using keyboard space/enter

---
 .../time-slot-bar-week-days.tsx               | 21 ++++++++++++-------
 1 file changed, 14 insertions(+), 7 deletions(-)

diff --git a/src/time-slot-bar-week/time-slot-bar-week-days.tsx b/src/time-slot-bar-week/time-slot-bar-week-days.tsx
index 21004817fa..a212db415c 100644
--- a/src/time-slot-bar-week/time-slot-bar-week-days.tsx
+++ b/src/time-slot-bar-week/time-slot-bar-week-days.tsx
@@ -144,6 +144,16 @@ export const TimeSlotBarWeekDays = ({
         onSlotClick?.(date, slot);
     };
 
+    const handleSlotButtonClick =
+        (date: string, slot: TimeSlot) =>
+        (event: React.MouseEvent<HTMLButtonElement>) => {
+            event.stopPropagation();
+
+            if (slot.clickable ?? true) {
+                handleSlotClick(date, slot);
+            }
+        };
+
     const handleExpandCollapseClick = (event: React.MouseEvent) => {
         event.preventDefault();
         setExpandAll((prevExpandValue) => !prevExpandValue);
@@ -629,13 +639,10 @@ export const TimeSlotBarWeekDays = ({
                                                                 }
                                                             )
                                                         }
-                                                        onClick={() =>
-                                                            clickable &&
-                                                            handleSlotClick(
-                                                                formattedDate,
-                                                                slot
-                                                            )
-                                                        }
+                                                        onClick={handleSlotButtonClick(
+                                                            formattedDate,
+                                                            slot
+                                                        )}
                                                     />
                                                 </VisuallyHidden>
                                             )}

From 31dd2342d067cf8415e4b1e1f7a254cc5d468cd5 Mon Sep 17 00:00:00 2001
From: benjaminLeongSK <benjaminlsk@live.com>
Date: Tue, 14 Apr 2026 16:44:22 +0800
Subject: [PATCH 04/10] [#1082][BL] Fix unavailble slot in android talkback

---
 src/time-slot-bar-week/time-slot-bar-week-days.tsx | 11 +++++++++--
 1 file changed, 9 insertions(+), 2 deletions(-)

diff --git a/src/time-slot-bar-week/time-slot-bar-week-days.tsx b/src/time-slot-bar-week/time-slot-bar-week-days.tsx
index a212db415c..5811b9765c 100644
--- a/src/time-slot-bar-week/time-slot-bar-week-days.tsx
+++ b/src/time-slot-bar-week/time-slot-bar-week-days.tsx
@@ -334,14 +334,12 @@ export const TimeSlotBarWeekDays = ({
 
     function getSlotAriaLabel(date: string, slot: TimeSlot) {
         const { startTime: slotStartTime, endTime: slotEndTime } = slot;
-        const isAvailable = slot.clickable ?? true;
 
         return StringHelper.joinNonEmptyStrings([
             dayjs(date).format("D MMMM YYYY dddd"),
             slotStartTime && slotEndTime
                 ? TimeHelper.formatTimeRange(slotStartTime, slotEndTime)
                 : undefined,
-            isAvailable ? "Available" : "Unavailable",
             slot.label,
         ]);
     }
@@ -587,6 +585,7 @@ export const TimeSlotBarWeekDays = ({
                                         backgroundColor2,
                                     } = styleAttributes;
                                     const slotKey = `${formattedDate}-${id}`;
+                                    const slotStateId = `${slotKey}-state`;
                                     return (
                                         <TimeSlotComponent
                                             $type="vertical"
@@ -613,6 +612,11 @@ export const TimeSlotBarWeekDays = ({
                                         >
                                             {isActualSlot && (
                                                 <VisuallyHidden>
+                                                    <span id={slotStateId}>
+                                                        {clickable
+                                                            ? "Available"
+                                                            : "Unavailable"}
+                                                    </span>
                                                     <button
                                                         type="button"
                                                         ref={(element) => {
@@ -623,6 +627,9 @@ export const TimeSlotBarWeekDays = ({
                                                         aria-disabled={
                                                             !clickable
                                                         }
+                                                        aria-describedby={
+                                                            slotStateId
+                                                        }
                                                         aria-label={getSlotAriaLabel(
                                                             formattedDate,
                                                             slot

From c74f2032143a35af8fdab6bd68991977b05e5603 Mon Sep 17 00:00:00 2001
From: benjaminLeongSK <benjaminlsk@live.com>
Date: Tue, 14 Apr 2026 16:47:09 +0800
Subject: [PATCH 05/10] [#1082][BL] Added test cases for keyboard navigation

---
 .../time-slot-bar-week.spec.tsx               | 176 ++++++++++++++++++
 1 file changed, 176 insertions(+)

diff --git a/tests/time-slot-bar-week/time-slot-bar-week.spec.tsx b/tests/time-slot-bar-week/time-slot-bar-week.spec.tsx
index 6f2507e948..3659a2d8d6 100644
--- a/tests/time-slot-bar-week/time-slot-bar-week.spec.tsx
+++ b/tests/time-slot-bar-week/time-slot-bar-week.spec.tsx
@@ -1,6 +1,8 @@
 import { fireEvent, render, screen } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
 import dayjs from "dayjs";
 import { TimeSlotBarWeek } from "../../src";
+import { Colour } from "../../src/theme";
 
 describe("TimeSlotBarWeekCalendar", () => {
     const DATE_FORMAT = "YYYY-MM-DD";
@@ -268,4 +270,178 @@ describe("TimeSlotBarWeekCalendar", () => {
         fireEvent.click(dateButton);
         expect(onChange).toHaveBeenCalledTimes(1);
     });
+
+    describe("Keyboard navigation", () => {
+        const navigationSlots = {
+            "2021-01-24": [
+                {
+                    id: "sun-0900",
+                    startTime: "09:00",
+                    endTime: "09:30",
+                    label: "Sun 9am",
+                    clickable: true,
+                    styleAttributes: {
+                        backgroundColor: Colour["bg-available"],
+                    },
+                },
+                {
+                    id: "sun-0930",
+                    startTime: "09:30",
+                    endTime: "10:00",
+                    label: "Sun 930am",
+                    clickable: true,
+                    styleAttributes: {
+                        backgroundColor: Colour["bg-available"],
+                    },
+                },
+            ],
+            "2021-01-25": [
+                {
+                    id: "mon-0900",
+                    startTime: "09:00",
+                    endTime: "09:30",
+                    label: "Mon 9am",
+                    clickable: true,
+                    styleAttributes: {
+                        backgroundColor: Colour["bg-available"],
+                    },
+                },
+            ],
+            "2021-01-26": [
+                {
+                    id: "tue-0900",
+                    startTime: "09:00",
+                    endTime: "09:30",
+                    label: "Tue 9am",
+                    clickable: true,
+                    styleAttributes: {
+                        backgroundColor: Colour["bg-available"],
+                    },
+                },
+            ],
+        };
+
+        it("should allow keyboard tabbing to time slots", async () => {
+            const user = userEvent.setup({
+                advanceTimers: jest.advanceTimersByTime,
+            });
+            render(
+                <TimeSlotBarWeek
+                    slots={{
+                        "2021-01-29": [
+                            {
+                                id: "slot-1",
+                                startTime: "09:00",
+                                endTime: "09:30",
+                                label: "Morning slot",
+                                clickable: true,
+                                styleAttributes: {
+                                    backgroundColor: Colour["bg-available"],
+                                },
+                            },
+                        ],
+                    }}
+                    currentCalendarDate={"2021-01-29"}
+                    showNavigationHeader={false}
+                />
+            );
+
+            await user.tab();
+
+            expect(
+                screen.getByRole("button", {
+                    name: "29 January 2021 Friday, 9:00AM to 9:30AM, Morning slot",
+                })
+            ).toHaveFocus();
+        });
+
+        it("should move focus within the column on arrow keys", async () => {
+            const user = userEvent.setup({
+                advanceTimers: jest.advanceTimersByTime,
+            });
+            render(
+                <TimeSlotBarWeek
+                    slots={navigationSlots}
+                    currentCalendarDate={"2021-01-24"}
+                    showNavigationHeader={false}
+                />
+            );
+
+            await user.tab();
+            const firstSlot = screen.getByRole("button", {
+                name: "24 January 2021 Sunday, 9:00AM to 9:30AM, Sun 9am",
+            });
+            const secondSlot = screen.getByRole("button", {
+                name: "24 January 2021 Sunday, 9:30AM to 10:00AM, Sun 930am",
+            });
+
+            expect(firstSlot).toHaveFocus();
+
+            fireEvent.keyDown(firstSlot, { key: "ArrowDown" });
+            expect(secondSlot).toHaveFocus();
+
+            fireEvent.keyDown(secondSlot, { key: "ArrowUp" });
+            expect(firstSlot).toHaveFocus();
+
+            fireEvent.keyDown(firstSlot, { key: "ArrowRight" });
+            expect(secondSlot).toHaveFocus();
+
+            fireEvent.keyDown(secondSlot, { key: "ArrowLeft" });
+            expect(firstSlot).toHaveFocus();
+        });
+
+        it("should move focus to first and last slot in the column for home and end", async () => {
+            const user = userEvent.setup({
+                advanceTimers: jest.advanceTimersByTime,
+            });
+            render(
+                <TimeSlotBarWeek
+                    slots={navigationSlots}
+                    currentCalendarDate={"2021-01-24"}
+                    showNavigationHeader={false}
+                />
+            );
+
+            await user.tab();
+            const firstRowSlot = screen.getByRole("button", {
+                name: "24 January 2021 Sunday, 9:00AM to 9:30AM, Sun 9am",
+            });
+            const lastColumnSlot = screen.getByRole("button", {
+                name: "24 January 2021 Sunday, 9:30AM to 10:00AM, Sun 930am",
+            });
+
+            fireEvent.keyDown(firstRowSlot, { key: "End" });
+            expect(lastColumnSlot).toHaveFocus();
+
+            fireEvent.keyDown(lastColumnSlot, { key: "Home" });
+            expect(firstRowSlot).toHaveFocus();
+        });
+
+        it("should move focus to first and last slot in the column for page up and page down", async () => {
+            const user = userEvent.setup({
+                advanceTimers: jest.advanceTimersByTime,
+            });
+            render(
+                <TimeSlotBarWeek
+                    slots={navigationSlots}
+                    currentCalendarDate={"2021-01-24"}
+                    showNavigationHeader={false}
+                />
+            );
+
+            await user.tab();
+            const firstSlot = screen.getByRole("button", {
+                name: "24 January 2021 Sunday, 9:00AM to 9:30AM, Sun 9am",
+            });
+            const lastColumnSlot = screen.getByRole("button", {
+                name: "24 January 2021 Sunday, 9:30AM to 10:00AM, Sun 930am",
+            });
+
+            fireEvent.keyDown(firstSlot, { key: "PageDown" });
+            expect(lastColumnSlot).toHaveFocus();
+
+            fireEvent.keyDown(lastColumnSlot, { key: "PageUp" });
+            expect(firstSlot).toHaveFocus();
+        });
+    });
 });

From 0b2d714dc1408a245f814dd1e1af8879c3060140 Mon Sep 17 00:00:00 2001
From: benjaminLeongSK <benjaminlsk@live.com>
Date: Wed, 15 Apr 2026 22:29:06 +0800
Subject: [PATCH 06/10] [#1082][BL] Added roles

---
 src/time-slot-bar-week/time-slot-bar-week-days.tsx | 12 ++++++++----
 1 file changed, 8 insertions(+), 4 deletions(-)

diff --git a/src/time-slot-bar-week/time-slot-bar-week-days.tsx b/src/time-slot-bar-week/time-slot-bar-week-days.tsx
index 5811b9765c..2511097700 100644
--- a/src/time-slot-bar-week/time-slot-bar-week-days.tsx
+++ b/src/time-slot-bar-week/time-slot-bar-week-days.tsx
@@ -492,7 +492,7 @@ export const TimeSlotBarWeekDays = ({
 
     const renderHeader = () => {
         return (
-            <HeaderCellWeekColumn>
+            <HeaderCellWeekColumn role="row">
                 {currentCalendarWeek.map((day, dayIndex) => {
                     const dayCellStyleProps = generateStyleProps(day);
 
@@ -501,6 +501,7 @@ export const TimeSlotBarWeekDays = ({
                             key={`day-${dayIndex}`}
                             date={day}
                             calendarDate={dayjs(selectedDate)}
+                            role="columnheader"
                             onSelect={() => {
                                 handleDayClick(
                                     day,
@@ -560,7 +561,7 @@ export const TimeSlotBarWeekDays = ({
 
     const renderTimeSlotBarCells = () => {
         return (
-            <Expandable style={expandableStyles}>
+            <Expandable style={expandableStyles} role="row">
                 <ColumnWeekCell
                     ref={cellsRef}
                     key={`week-cell-${calendarDate.format(dateFormat)}`}
@@ -569,7 +570,10 @@ export const TimeSlotBarWeekDays = ({
                         const formattedDate = day.format(dateFormat);
                         const cellsArray = getCellsForDate(formattedDate);
                         return (
-                            <TimeSlotWrapper key={`wrapper-${dayIndex}`}>
+                            <TimeSlotWrapper
+                                key={`wrapper-${dayIndex}`}
+                                role="gridcell"
+                            >
                                 {cellsArray.map((slot) => {
                                     const {
                                         id,
@@ -686,7 +690,7 @@ export const TimeSlotBarWeekDays = ({
     };
 
     return (
-        <Wrapper>
+        <Wrapper role="grid">
             {renderHeader()}
             {renderWeek()}
             {renderTimeColumn()}

From b064afd1e070a8f9a4e7953630965409e6ddd670 Mon Sep 17 00:00:00 2001
From: benjaminLeongSK <benjaminlsk@live.com>
Date: Thu, 16 Apr 2026 00:06:38 +0800
Subject: [PATCH 07/10] [#1082][BL] Amendments from MR comments

---
 .../time-slot-bar-week-days.style.tsx         |   3 +-
 .../time-slot-bar-week-days.tsx               | 232 ++++++++----------
 2 files changed, 105 insertions(+), 130 deletions(-)

diff --git a/src/time-slot-bar-week/time-slot-bar-week-days.style.tsx b/src/time-slot-bar-week/time-slot-bar-week-days.style.tsx
index dccc3654a7..892e660cf8 100644
--- a/src/time-slot-bar-week/time-slot-bar-week-days.style.tsx
+++ b/src/time-slot-bar-week/time-slot-bar-week-days.style.tsx
@@ -142,8 +142,7 @@ export const TimeSlotComponent = styled(TimeSlot)<TimeSlotCellProps>`
 
     &:focus-within {
         outline: 2px solid ${Colour["focus-ring"]};
-        outline-offset: 1px;
-        z-index: 1;
+        outline-offset: -2px;
     }
 
     ${(props) => {
diff --git a/src/time-slot-bar-week/time-slot-bar-week-days.tsx b/src/time-slot-bar-week/time-slot-bar-week-days.tsx
index 2511097700..123787c7e8 100644
--- a/src/time-slot-bar-week/time-slot-bar-week-days.tsx
+++ b/src/time-slot-bar-week/time-slot-bar-week-days.tsx
@@ -149,9 +149,7 @@ export const TimeSlotBarWeekDays = ({
         (event: React.MouseEvent<HTMLButtonElement>) => {
             event.stopPropagation();
 
-            if (slot.clickable ?? true) {
-                handleSlotClick(date, slot);
-            }
+            handleSlotClick(date, slot);
         };
 
     const handleExpandCollapseClick = (event: React.MouseEvent) => {
@@ -159,40 +157,6 @@ export const TimeSlotBarWeekDays = ({
         setExpandAll((prevExpandValue) => !prevExpandValue);
     };
 
-    const getCellsForDate = (formattedDate: string) => {
-        return (
-            generatedDaySlots[formattedDate] ??
-            Array(variant === "flexible" ? numberOfCells : 1)
-                .fill(undefined)
-                .map((_, index) =>
-                    generateFallbackCell(
-                        index,
-                        variant === "fixed" ? numberOfCells : undefined
-                    )
-                )
-        );
-    };
-
-    const getFocusableSlotsForDate = (
-        formattedDate: string
-    ): FocusableSlotMeta[] => {
-        return getCellsForDate(formattedDate)
-            .filter(
-                (
-                    slot
-                ): slot is TimeSlotCell & {
-                    isActualSlot: true;
-                    rowIndex: number;
-                } => !!slot.isActualSlot && slot.rowIndex !== undefined
-            )
-            .map((slot) => ({
-                key: `${formattedDate}-${slot.id}`,
-                date: formattedDate,
-                rowIndex: slot.rowIndex,
-            }))
-            .sort((a, b) => a.rowIndex - b.rowIndex);
-    };
-
     const handleSlotKeyDown = (
         event: React.KeyboardEvent<HTMLButtonElement>,
         currentSlot: FocusableSlotMeta
@@ -315,14 +279,12 @@ export const TimeSlotBarWeekDays = ({
 
     function generateFallbackCell(
         prefix: string | number,
-        cellLength = 1,
-        startTime = "",
-        endTime = ""
+        cellLength = 1
     ): TimeSlotCell {
         return {
             id: `${prefix.toString()}-${new Date().getTime()}`,
-            startTime,
-            endTime,
+            startTime: "",
+            endTime: "",
             clickable: false,
             isActualSlot: false,
             styleAttributes: {
@@ -341,6 +303,7 @@ export const TimeSlotBarWeekDays = ({
                 ? TimeHelper.formatTimeRange(slotStartTime, slotEndTime)
                 : undefined,
             slot.label,
+            slot.clickable ?? true ? "Available" : "Unavailable",
         ]);
     }
 
@@ -470,6 +433,40 @@ export const TimeSlotBarWeekDays = ({
         );
     }
 
+    const getCellsForDate = (formattedDate: string) => {
+        return (
+            generatedDaySlots[formattedDate] ??
+            Array(variant === "flexible" ? numberOfCells : 1)
+                .fill(undefined)
+                .map((_, index) =>
+                    generateFallbackCell(
+                        index,
+                        variant === "fixed" ? numberOfCells : undefined
+                    )
+                )
+        );
+    };
+
+    const getFocusableSlotsForDate = (
+        formattedDate: string
+    ): FocusableSlotMeta[] => {
+        return getCellsForDate(formattedDate)
+            .filter(
+                (
+                    slot
+                ): slot is TimeSlotCell & {
+                    isActualSlot: true;
+                    rowIndex: number;
+                } => !!slot.isActualSlot && slot.rowIndex !== undefined
+            )
+            .map((slot) => ({
+                key: `${formattedDate}-${slot.id}`,
+                date: formattedDate,
+                rowIndex: slot.rowIndex,
+            }))
+            .sort((a, b) => a.rowIndex - b.rowIndex);
+    };
+
     // =============================================================================
     // RENDER FUNCTIONS
     // =============================================================================
@@ -558,6 +555,68 @@ export const TimeSlotBarWeekDays = ({
             </TimeColumn>
         );
     };
+    const renderSlotCell = (formattedDate: string, slot: TimeSlotCell) => {
+        const {
+            id,
+            clickable = true,
+            isActualSlot,
+            styleAttributes,
+            cellLength,
+            halfFill,
+        } = slot;
+        const {
+            styleType = "default",
+            backgroundColor,
+            backgroundColor2,
+        } = styleAttributes;
+        const slotId = `${formattedDate}-${id}`;
+
+        return (
+            <TimeSlotComponent
+                $type="vertical"
+                $variant="default"
+                key={id}
+                $styleType={styleType}
+                $bgColor={backgroundColor}
+                $bgColor2={backgroundColor2}
+                $halfFill={halfFill}
+                $clickable={clickable}
+                $height={
+                    variant === "fixed"
+                        ? cellLength * 12 + (cellLength - 1) * 4
+                        : 12
+                }
+                onClick={() =>
+                    clickable && handleSlotClick(formattedDate, slot)
+                }
+            >
+                {isActualSlot && (
+                    <VisuallyHidden>
+                        <button
+                            type="button"
+                            ref={(element) => {
+                                slotButtonRefs.current[slotId] = element;
+                            }}
+                            aria-disabled={!clickable}
+                            aria-label={getSlotAriaLabel(formattedDate, slot)}
+                            onKeyDown={(event) =>
+                                handleSlotKeyDown(event, {
+                                    key: slotId,
+                                    date: formattedDate,
+                                    rowIndex: slot.rowIndex ?? 0,
+                                })
+                            }
+                            onClick={
+                                clickable
+                                    ? handleSlotButtonClick(formattedDate, slot)
+                                    : undefined
+                            }
+                        />
+                    </VisuallyHidden>
+                )}
+            </TimeSlotComponent>
+        );
+    };
 
     const renderTimeSlotBarCells = () => {
         return (
@@ -574,92 +633,9 @@ export const TimeSlotBarWeekDays = ({
                                 key={`wrapper-${dayIndex}`}
                                 role="gridcell"
                             >
-                                {cellsArray.map((slot) => {
-                                    const {
-                                        id,
-                                        clickable = true,
-                                        isActualSlot,
-                                        styleAttributes,
-                                        cellLength,
-                                        halfFill,
-                                    } = slot;
-                                    const {
-                                        styleType = "default",
-                                        backgroundColor,
-                                        backgroundColor2,
-                                    } = styleAttributes;
-                                    const slotKey = `${formattedDate}-${id}`;
-                                    const slotStateId = `${slotKey}-state`;
-                                    return (
-                                        <TimeSlotComponent
-                                            $type="vertical"
-                                            $variant="default"
-                                            key={id}
-                                            $styleType={styleType}
-                                            $bgColor={backgroundColor}
-                                            $bgColor2={backgroundColor2}
-                                            $halfFill={halfFill}
-                                            $clickable={clickable}
-                                            $height={
-                                                variant === "fixed"
-                                                    ? cellLength * 12 +
-                                                      (cellLength - 1) * 4
-                                                    : 12
-                                            }
-                                            onClick={() =>
-                                                clickable &&
-                                                handleSlotClick(
-                                                    formattedDate,
-                                                    slot
-                                                )
-                                            }
-                                        >
-                                            {isActualSlot && (
-                                                <VisuallyHidden>
-                                                    <span id={slotStateId}>
-                                                        {clickable
-                                                            ? "Available"
-                                                            : "Unavailable"}
-                                                    </span>
-                                                    <button
-                                                        type="button"
-                                                        ref={(element) => {
-                                                            slotButtonRefs.current[
-                                                                slotKey
-                                                            ] = element;
-                                                        }}
-                                                        aria-disabled={
-                                                            !clickable
-                                                        }
-                                                        aria-describedby={
-                                                            slotStateId
-                                                        }
-                                                        aria-label={getSlotAriaLabel(
-                                                            formattedDate,
-                                                            slot
-                                                        )}
-                                                        onKeyDown={(event) =>
-                                                            handleSlotKeyDown(
-                                                                event,
-                                                                {
-                                                                    key: slotKey,
-                                                                    date: formattedDate,
-                                                                    rowIndex:
-                                                                        slot.rowIndex ??
-                                                                        0,
-                                                                }
-                                                            )
-                                                        }
-                                                        onClick={handleSlotButtonClick(
-                                                            formattedDate,
-                                                            slot
-                                                        )}
-                                                    />
-                                                </VisuallyHidden>
-                                            )}
-                                        </TimeSlotComponent>
-                                    );
-                                })}
+                                {cellsArray.map((slot) =>
+                                    renderSlotCell(formattedDate, slot)
+                                )}
                             </TimeSlotWrapper>
                         );
                     })}

From f6112e4b305f92b689a0fc7d428be3d338f79881 Mon Sep 17 00:00:00 2001
From: benjaminLeongSK <benjaminlsk@live.com>
Date: Thu, 16 Apr 2026 00:07:46 +0800
Subject: [PATCH 08/10] [#1082][BL] Memoise function for efficiency

---
 .../time-slot-bar-week-days.tsx               | 53 +++++++++++--------
 1 file changed, 30 insertions(+), 23 deletions(-)

diff --git a/src/time-slot-bar-week/time-slot-bar-week-days.tsx b/src/time-slot-bar-week/time-slot-bar-week-days.tsx
index 123787c7e8..c23723ba4b 100644
--- a/src/time-slot-bar-week/time-slot-bar-week-days.tsx
+++ b/src/time-slot-bar-week/time-slot-bar-week-days.tsx
@@ -123,6 +123,33 @@ export const TimeSlotBarWeekDays = ({
         return {};
     }, [daySlots]);
 
+    const focusableSlotsByDate = useMemo(() => {
+        return currentCalendarWeek.reduce<Record<string, FocusableSlotMeta[]>>(
+            (result, day) => {
+                const formattedDate = day.format(dateFormat);
+
+                result[formattedDate] = getCellsForDate(formattedDate)
+                    .filter(
+                        (
+                            slot
+                        ): slot is TimeSlotCell & {
+                            isActualSlot: true;
+                            rowIndex: number;
+                        } => !!slot.isActualSlot && slot.rowIndex !== undefined
+                    )
+                    .map((slot) => ({
+                        key: `${formattedDate}-${slot.id}`,
+                        date: formattedDate,
+                        rowIndex: slot.rowIndex,
+                    }))
+                    .sort((a, b) => a.rowIndex - b.rowIndex);
+
+                return result;
+            },
+            {}
+        );
+    }, [currentCalendarWeek, getCellsForDate]);
+
     // =============================================================================
     // EVENT HANDLERS
     // =============================================================================
@@ -161,7 +188,7 @@ export const TimeSlotBarWeekDays = ({
         event: React.KeyboardEvent<HTMLButtonElement>,
         currentSlot: FocusableSlotMeta
     ) => {
-        const sameColumnSlots = getFocusableSlotsForDate(currentSlot.date);
+        const sameColumnSlots = focusableSlotsByDate[currentSlot.date] ?? [];
 
         const focusSlot = (slot?: FocusableSlotMeta) => {
             if (!slot) return;
@@ -433,7 +460,7 @@ export const TimeSlotBarWeekDays = ({
         );
     }
 
-    const getCellsForDate = (formattedDate: string) => {
+    function getCellsForDate(formattedDate: string) {
         return (
             generatedDaySlots[formattedDate] ??
             Array(variant === "flexible" ? numberOfCells : 1)
@@ -445,27 +472,7 @@ export const TimeSlotBarWeekDays = ({
                     )
                 )
         );
-    };
-
-    const getFocusableSlotsForDate = (
-        formattedDate: string
-    ): FocusableSlotMeta[] => {
-        return getCellsForDate(formattedDate)
-            .filter(
-                (
-                    slot
-                ): slot is TimeSlotCell & {
-                    isActualSlot: true;
-                    rowIndex: number;
-                } => !!slot.isActualSlot && slot.rowIndex !== undefined
-            )
-            .map((slot) => ({
-                key: `${formattedDate}-${slot.id}`,
-                date: formattedDate,
-                rowIndex: slot.rowIndex,
-            }))
-            .sort((a, b) => a.rowIndex - b.rowIndex);
-    };
+    }
 
     // =============================================================================
     // RENDER FUNCTIONS

From 58d350fd1eeee1e115cda96fd19affb9e3e497d5 Mon Sep 17 00:00:00 2001
From: benjaminLeongSK <benjaminlsk@live.com>
Date: Thu, 16 Apr 2026 00:24:09 +0800
Subject: [PATCH 09/10] [#1082][BL] Set collapsed cell as inert

---
 .../time-slot-bar-week-days.tsx               | 36 ++++++++++---------
 1 file changed, 20 insertions(+), 16 deletions(-)

diff --git a/src/time-slot-bar-week/time-slot-bar-week-days.tsx b/src/time-slot-bar-week/time-slot-bar-week-days.tsx
index c23723ba4b..9d6004e642 100644
--- a/src/time-slot-bar-week/time-slot-bar-week-days.tsx
+++ b/src/time-slot-bar-week/time-slot-bar-week-days.tsx
@@ -5,7 +5,7 @@ import maxBy from "lodash/maxBy";
 import minBy from "lodash/minBy";
 import React, { useMemo, useRef, useState } from "react";
 import { useResizeDetector } from "react-resize-detector";
-import { VisuallyHidden } from "../shared/accessibility";
+import { VisuallyHidden, inertValue } from "../shared/accessibility";
 import { InternalCalendarProps } from "../shared/internal-calendar";
 import { CellStyleProps, DayCell } from "../shared/internal-calendar/day-cell";
 import { Colour } from "../theme";
@@ -102,10 +102,20 @@ export const TimeSlotBarWeekDays = ({
 
     // React spring animation configuration
     const { height: actualHeight = 0, ref: cellsRef } = useResizeDetector();
+    const hasCollapsedContent =
+        !!maxVisibleCellHeight && actualHeight > maxVisibleCellHeight;
+    const visibleRowCount =
+        maxVisibleCellHeight !== undefined
+            ? Math.max(1, Math.floor((maxVisibleCellHeight + 4) / 16))
+            : 0;
+    const collapsedHeight =
+        112 + visibleRowCount > 0
+            ? visibleRowCount * 16 - 4
+            : maxVisibleCellHeight;
     const height = maxVisibleCellHeight
-        ? actualHeight < maxVisibleCellHeight || expandAll
+        ? !hasCollapsedContent || expandAll
             ? actualHeight
-            : maxVisibleCellHeight
+            : collapsedHeight
         : actualHeight;
     const expandableStyles = useSpring({ height });
 
@@ -228,15 +238,8 @@ export const TimeSlotBarWeekDays = ({
                 break;
             case "PageDown": {
                 event.preventDefault();
-                const hasCollapsedContent =
-                    !!maxVisibleCellHeight &&
-                    actualHeight > maxVisibleCellHeight;
                 if (hasCollapsedContent && !expandAll) {
                     setExpandAll(true);
-                    const visibleRowCount = Math.max(
-                        1,
-                        Math.floor((maxVisibleCellHeight + 4) / 16)
-                    );
                     const lastVisibleSlot = [...sameColumnSlots]
                         .reverse()
                         .find((slot) => slot.rowIndex < visibleRowCount);
@@ -577,6 +580,11 @@ export const TimeSlotBarWeekDays = ({
             backgroundColor2,
         } = styleAttributes;
         const slotId = `${formattedDate}-${id}`;
+        const isCollapsedSlot =
+            hasCollapsedContent &&
+            !expandAll &&
+            !!isActualSlot &&
+            (slot.rowIndex ?? 0) >= visibleRowCount;
 
         return (
             <TimeSlotComponent
@@ -598,7 +606,7 @@ export const TimeSlotBarWeekDays = ({
                 }
             >
                 {isActualSlot && (
-                    <VisuallyHidden>
+                    <VisuallyHidden inert={inertValue(isCollapsedSlot)}>
                         <button
                             type="button"
                             ref={(element) => {
@@ -652,11 +660,7 @@ export const TimeSlotBarWeekDays = ({
     };
 
     const renderCollapseExpandAll = () => {
-        if (
-            !maxVisibleCellHeight ||
-            !cellsRef.current ||
-            (actualHeight && actualHeight < maxVisibleCellHeight)
-        )
+        if (!maxVisibleCellHeight || !cellsRef.current || !hasCollapsedContent)
             return;
         return (
             <CollapseExpandAllWrapper>

From 6764a41fa63bf2080c7a4fb264b3796596619e63 Mon Sep 17 00:00:00 2001
From: benjaminLeongSK <benjaminlsk@live.com>
Date: Thu, 16 Apr 2026 00:24:17 +0800
Subject: [PATCH 10/10] [#1082][BL] Update test case

---
 .../time-slot-bar-week/time-slot-bar-week.spec.tsx | 14 +++++++-------
 1 file changed, 7 insertions(+), 7 deletions(-)

diff --git a/tests/time-slot-bar-week/time-slot-bar-week.spec.tsx b/tests/time-slot-bar-week/time-slot-bar-week.spec.tsx
index 3659a2d8d6..f57ada2bc4 100644
--- a/tests/time-slot-bar-week/time-slot-bar-week.spec.tsx
+++ b/tests/time-slot-bar-week/time-slot-bar-week.spec.tsx
@@ -350,7 +350,7 @@ describe("TimeSlotBarWeekCalendar", () => {
 
             expect(
                 screen.getByRole("button", {
-                    name: "29 January 2021 Friday, 9:00AM to 9:30AM, Morning slot",
+                    name: "29 January 2021 Friday, 9:00AM to 9:30AM, Morning slot, Available",
                 })
             ).toHaveFocus();
         });
@@ -369,10 +369,10 @@ describe("TimeSlotBarWeekCalendar", () => {
 
             await user.tab();
             const firstSlot = screen.getByRole("button", {
-                name: "24 January 2021 Sunday, 9:00AM to 9:30AM, Sun 9am",
+                name: "24 January 2021 Sunday, 9:00AM to 9:30AM, Sun 9am, Available",
             });
             const secondSlot = screen.getByRole("button", {
-                name: "24 January 2021 Sunday, 9:30AM to 10:00AM, Sun 930am",
+                name: "24 January 2021 Sunday, 9:30AM to 10:00AM, Sun 930am, Available",
             });
 
             expect(firstSlot).toHaveFocus();
@@ -404,10 +404,10 @@ describe("TimeSlotBarWeekCalendar", () => {
 
             await user.tab();
             const firstRowSlot = screen.getByRole("button", {
-                name: "24 January 2021 Sunday, 9:00AM to 9:30AM, Sun 9am",
+                name: "24 January 2021 Sunday, 9:00AM to 9:30AM, Sun 9am, Available",
             });
             const lastColumnSlot = screen.getByRole("button", {
-                name: "24 January 2021 Sunday, 9:30AM to 10:00AM, Sun 930am",
+                name: "24 January 2021 Sunday, 9:30AM to 10:00AM, Sun 930am, Available",
             });
 
             fireEvent.keyDown(firstRowSlot, { key: "End" });
@@ -431,10 +431,10 @@ describe("TimeSlotBarWeekCalendar", () => {
 
             await user.tab();
             const firstSlot = screen.getByRole("button", {
-                name: "24 January 2021 Sunday, 9:00AM to 9:30AM, Sun 9am",
+                name: "24 January 2021 Sunday, 9:00AM to 9:30AM, Sun 9am, Available",
             });
             const lastColumnSlot = screen.getByRole("button", {
-                name: "24 January 2021 Sunday, 9:30AM to 10:00AM, Sun 930am",
+                name: "24 January 2021 Sunday, 9:30AM to 10:00AM, Sun 930am, Available",
             });
 
             fireEvent.keyDown(firstSlot, { key: "PageDown" });