From 155642f665b5a4342581862db651ef2ce357cb74 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Ville=20Pyntt=C3=A4ri?= <ville.pynttari@vincit.fi>
Date: Tue, 23 Jul 2024 11:05:50 +0300
Subject: [PATCH 1/4] Moved inline styles to named component

---
 frontend/src/components/RoomCard/RoomCard.tsx | 96 ++++++++++---------
 1 file changed, 50 insertions(+), 46 deletions(-)

diff --git a/frontend/src/components/RoomCard/RoomCard.tsx b/frontend/src/components/RoomCard/RoomCard.tsx
index 31cf33b..9d2837f 100644
--- a/frontend/src/components/RoomCard/RoomCard.tsx
+++ b/frontend/src/components/RoomCard/RoomCard.tsx
@@ -241,45 +241,59 @@ class RoomCardCapacityBox extends React.Component<{
     }
 }
 
+const BusyRoomStatusContent = styled('div')(({ theme }) => ({
+    alignSelf: 'stretch',
+    justifyContent: 'flex-start',
+    alignItems: 'center',
+    gap: 5,
+    display: 'inline-flex'
+}));
+
+const BusyRoomStatusIcon = styled('div')(({ theme }) => ({
+    textAlign: 'center',
+    color: '#E83520',
+    fontSize: 16,
+    fontFamily: 'Material Icons',
+    fontWeight: '400',
+    wordWrap: 'break-word'
+}));
+
+type BusyRoomStatusTextContentProps = {
+    props?: {
+        flex?: string;
+        width?: number;
+        fontSize?: number;
+        fontWeight?: string | number;
+    };
+};
+const BusyRoomStatusTextContent = styled('div')<BusyRoomStatusTextContentProps>(
+    ({ theme, props }) => ({
+        color: '#1D1D1D',
+        fontSize: 12,
+        fontFamily: 'Studio Feixen Sans',
+        fontWeight: '4',
+        textTransform: 'uppercase',
+        wordWrap: 'break-word',
+        ...props
+    })
+);
 export const BusyRoomCardReservationStatusIndicator = (props: {
     room: Room;
 }) => {
     return (
-        <div
-            style={{
-                alignSelf: 'stretch',
-                justifyContent: 'flex-start',
-                alignItems: 'center',
-                gap: 5,
-                display: 'inline-flex'
-            }}
-        >
-            <div
-                style={{
-                    textAlign: 'center',
-                    color: '#E83520',
-                    fontSize: 16,
-                    fontFamily: 'Material Icons',
-                    fontWeight: '400',
-                    wordWrap: 'break-word'
-                }}
-            >
+        <BusyRoomStatusContent>
+            <BusyRoomStatusIcon>
                 <DoNotDisturb />
-            </div>
-            <div
-                style={{
+            </BusyRoomStatusIcon>
+            <BusyRoomStatusTextContent
+                props={{
                     flex: '1 1 0',
-                    color: '#1D1D1D',
-                    fontSize: 12,
-                    fontFamily: 'Studio Feixen Sans',
-                    fontWeight: '4',
-                    textTransform: 'uppercase',
-                    wordWrap: 'break-word'
+                    fontSize: 12
                 }}
             >
                 Occupied for {roomFreeIn(props.room)} minutes
-            </div>
-        </div>
+            </BusyRoomStatusTextContent>
+        </BusyRoomStatusContent>
     );
 };
 
@@ -350,28 +364,18 @@ const ReservationStatusText = (props: {
                 <>
                     <BusyRoomCardReservationStatusIndicator room={props.room} />
 
-                    <div
-                        style={{
-                            alignSelf: 'stretch',
-                            justifyContent: 'space-between',
-                            alignItems: 'flex-start',
-                            display: 'inline-flex'
-                        }}
-                    >
-                        <div
-                            style={{
+                    <BusyRoomStatusTextContent>
+                        <BusyRoomStatusTextContent
+                            props={{
                                 width: 283,
-                                color: '#1D1D1D',
                                 fontSize: 16,
-                                fontFamily: 'Studio Feixen Sans',
-                                fontWeight: '2',
-                                wordWrap: 'break-word'
+                                fontWeight: '2'
                             }}
                         >
                             Next available slot:{' '}
                             {getNextCalendarEventTimeString(props.room)}
-                        </div>
-                    </div>
+                        </BusyRoomStatusTextContent>
+                    </BusyRoomStatusTextContent>
                 </>
             ) : (
                 <>

From b0c5c47ba736a484d81783773bc011aa435f292a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Ville=20Pyntt=C3=A4ri?= <ville.pynttari@vincit.fi>
Date: Tue, 23 Jul 2024 11:18:07 +0300
Subject: [PATCH 2/4] Added aria label to Checked icon

---
 frontend/src/theme_2024.ts | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/frontend/src/theme_2024.ts b/frontend/src/theme_2024.ts
index 5a143c4..74215a8 100644
--- a/frontend/src/theme_2024.ts
+++ b/frontend/src/theme_2024.ts
@@ -57,7 +57,8 @@ export const DoNotDisturb = styled(DoNotDisturbOn)(({ theme }) => ({
     fontSize: 16
 }));
 export const CheckCircle = styled(CheckCircleIcon)(({ theme }) => ({
-    color: COLORS.ACCENT_GREEN
+    color: COLORS.ACCENT_GREEN,
+    ariaLabel: 'Check circle'
 }));
 
 export const CenterAlignedStack = styled(Stack)(({ theme }) => ({

From 2bb44886d09baa19d894b9bb3984b7a2eef5225a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Ville=20Pyntt=C3=A4ri?= <ville.pynttari@vincit.fi>
Date: Tue, 23 Jul 2024 11:22:53 +0300
Subject: [PATCH 3/4] Added aria label to time left

---
 frontend/src/components/util/TimeLeft.tsx | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/frontend/src/components/util/TimeLeft.tsx b/frontend/src/components/util/TimeLeft.tsx
index ab17277..d203fb7 100644
--- a/frontend/src/components/util/TimeLeft.tsx
+++ b/frontend/src/components/util/TimeLeft.tsx
@@ -86,7 +86,11 @@ const TimeLeft = (props: TimeLeftProps) => {
 
     return (
         <Box>
-            <TimeLeftTypography variant={'h3'} data-testid="TimeLeftTest">
+            <TimeLeftTypography
+                variant={'h3'}
+                data-testid="TimeLeftTest"
+                aria-label={'Time left text'}
+            >
                 {timeLeftText} {getTimeLeft(endTime)}
             </TimeLeftTypography>
         </Box>

From 0c8d7a4e62f7a91dc5e6e99f06953837b74bc2e5 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Ville=20Pyntt=C3=A4ri?= <ville.pynttari@vincit.fi>
Date: Tue, 23 Jul 2024 11:29:52 +0300
Subject: [PATCH 4/4] Added labelled by to room card booked to you

---
 frontend/src/components/RoomCard/RoomCard.tsx | 8 +++++++-
 1 file changed, 7 insertions(+), 1 deletion(-)

diff --git a/frontend/src/components/RoomCard/RoomCard.tsx b/frontend/src/components/RoomCard/RoomCard.tsx
index 9d2837f..3fbc7c1 100644
--- a/frontend/src/components/RoomCard/RoomCard.tsx
+++ b/frontend/src/components/RoomCard/RoomCard.tsx
@@ -468,6 +468,8 @@ const RoomCard = (props: RoomCardProps) => {
                         <StartBox>
                             <CheckCircleIcon color="success" fontSize="small" />
                             <Typography
+                                id={'booked-to-you-label'}
+                                aria-label={'Booked to you'}
                                 variant="subtitle1"
                                 color="success.main"
                                 margin={'0 0 0 5px'}
@@ -482,6 +484,8 @@ const RoomCard = (props: RoomCardProps) => {
                         <StartBox>
                             <CheckCircleIcon color="success" fontSize="small" />
                             <Typography
+                                id={'booked-to-you-label'}
+                                aria-label={'Booked to you'}
                                 variant="subtitle1"
                                 color="success.main"
                                 margin={'0 0 0 5px'}
@@ -530,7 +534,9 @@ const RoomCard = (props: RoomCardProps) => {
                         <RoomCardCapacityBox busy={isBusy} room={room} />
                     </Row>
 
-                    {bookingTime()}
+                    <Typography aria-labelledby={'booked-to-you-label'}>
+                        {bookingTime()}
+                    </Typography>
 
                     <Row>
                         <Stack direction={'column'}>