From 12c86ff15ea3cc8076befacc1a37a39484395ac1 Mon Sep 17 00:00:00 2001
From: Kalle <38327916+Sendouc@users.noreply.github.com>
Date: Thu, 21 Jul 2022 21:25:08 +0300
Subject: [PATCH] FIx WeekLinks keyboard navigation

---
 app/routes/calendar.tsx | 61 ++++++++++++++++++++++++-----------------
 app/styles/calendar.css |  5 ++++
 2 files changed, 41 insertions(+), 25 deletions(-)

diff --git a/app/routes/calendar.tsx b/app/routes/calendar.tsx
index f34b0ac7f..c9d35c00c 100644
--- a/app/routes/calendar.tsx
+++ b/app/routes/calendar.tsx
@@ -80,31 +80,42 @@ function WeekLinks() {
     <Flipper flipKey={data.weeks.map(({ number }) => number).join("")}>
       <div className="flex justify-center">
         <div className="calendar__weeks">
-          {data.weeks.map((week) => (
-            <Flipped key={week.number} flipId={week.number}>
-              <Link
-                to={`?week=${week.number}&year=${week.year}`}
-                className="calendar__week"
-              >
-                <>
-                  <div>
-                    {week.number === data.thisWeek
-                      ? "This"
-                      : week.number - data.thisWeek === 1
-                      ? "Next"
-                      : week.number - data.thisWeek === -1
-                      ? "Last"
-                      : week.number}{" "}
-                    <br />
-                    Week
-                  </div>
-                  <div className="calendar__event-count">
-                    ×{week.numberOfEvents}
-                  </div>
-                </>
-              </Link>
-            </Flipped>
-          ))}
+          {data.weeks.map((week, i) => {
+            const hidden = [
+              0,
+              1,
+              data.weeks.length - 2,
+              data.weeks.length - 1,
+            ].includes(i);
+
+            return (
+              <Flipped key={week.number} flipId={week.number}>
+                <Link
+                  to={`?week=${week.number}&year=${week.year}`}
+                  className="calendar__week"
+                  aria-hidden={hidden}
+                  tabIndex={hidden ? -1 : 0}
+                >
+                  <>
+                    <div>
+                      {week.number === data.thisWeek
+                        ? "This"
+                        : week.number - data.thisWeek === 1
+                        ? "Next"
+                        : week.number - data.thisWeek === -1
+                        ? "Last"
+                        : week.number}{" "}
+                      <br />
+                      Week
+                    </div>
+                    <div className="calendar__event-count">
+                      ×{week.numberOfEvents}
+                    </div>
+                  </>
+                </Link>
+              </Flipped>
+            );
+          })}
         </div>
       </div>
     </Flipper>
diff --git a/app/styles/calendar.css b/app/styles/calendar.css
index 7391711b8..41a4c66b7 100644
--- a/app/styles/calendar.css
+++ b/app/styles/calendar.css
@@ -29,6 +29,10 @@
   background-color: var(--theme-transparent);
 }
 
+.calendar__week:focus {
+  outline: 2px solid var(--theme);
+}
+
 .calendar__event-count {
   font-size: var(--fonts-xxxs);
   font-weight: var(--body);
@@ -40,6 +44,7 @@
 .calendar__week:nth-child(9) {
   width: calc(var(--full-size-week-width) - 2.5rem);
   height: calc(var(--full-size-week-height) - 2.5rem);
+  cursor: initial;
   font-size: var(--fonts-xxxxs);
   opacity: 0;
 }